// JavaScript Document
$(document).ready(function(){
	$("span").css("opacity",".7");
	$("#select > .click").index( $("#select > .click"));
	$("#select > .click").click(function () {
		// this is the dom element clicked
		var index = $("#select > .click").index(this);
		var text = "#image" + (index + 1);
		var image = ".image" + (index + 1);
		$image = image;
		//filter the images, hide element not clicked, fadeIn the clicked element
		$(".gallery:visible").css("display", "none").filter(image).css("display","block");
		$(".gallery:hidden").css("display", "none").filter(image).fadeIn("slow");
		//change font weight of selected index
		var cssSelect = {
		backgroundColor: "#ddd",
		fontWeight: "bold",
		color:"#4D4D4D"
		}
		var cssNormal = {
		backgroundColor: "#4D4D4D",
		fontWeight: "lighter",
		color:"#cccccc"
		}
		var cssP1 = {
		backgroundColor: "#4D4D4D",
		fontWeight: "lighter",
		color:"#cccccc"
		} 
		var cssHover = {
		backgroundColor: "#ddd",
		fontWeight: "lighter",
		color:"#4D4D4D"
		}
		$("#select > .click").hover(
			function () {
        		$(this).css(cssHover).filter(text).css(cssSelect);
      		}, 
     		 function () {
       			 $(this).css(cssNormal).filter(text).css(cssSelect);
     		 }
    );
		 
		$("#select > .click").css(cssNormal).filter(text).css(cssSelect);
		$("#select > .p1").css(cssP1).filter(text).css(cssSelect);
	});
});
/*$(document).ready(function(){
	var $curr = $(".start");
	var $stop = $(".stop");
	var $start = $(".start");
	var $middle = $(".middle");
	var $fade = "slow";
	var cssInactive = {opacity: ".6"}
	var cssActive = {opacity: "1"}
	$("span").css("opacity","1");
	$(".start:visible").find("#prev").css(cssInactive);
	$("#prev").click(function () {
		if (($start).is(":visible")) {
			$curr.css("display","block");
			$("#prev").css(cssInactive);
		}
		else if (($middle).is(":visible")) {
			$curr.css("display","none");
			$curr = $curr.prev().fadeIn($fade);
		}
		else if (($stop).is(":visible")) {
			$curr.css("display","none");
			$curr = $curr.prev().fadeIn($fade);
			$("#next").css(cssActive);
		}
	});
	$("#next").click(function () {
		if (($start).is(":visible")) {
			$curr.css("display","none");
			$curr = $curr.next().fadeIn($fade);
			$("#next").css(cssActive);
			$("#prev").css(cssActive);
		}
		else if (($middle).is(":visible")) {
			$curr.css("display","none");
			$curr = $curr.next().fadeIn($fade);
		}
		else if (($stop).is(":visible")) {
			$curr.css("display","block");
			$("#next").css(cssInactive);
		}
	});
});*/