$(function(){

	$("#access").hover(
		function() {
			$(this).attr({src:"images/access2.png"});
		},
		function() {
			$(this).attr({src:"images/access.png"});
		}
	)

	$("#sitemap").hover(
		function() {
			$(this).attr({src:"images/sitemap2.png"});
		},
		function() {
			$(this).attr({src:"images/sitemap.png"});
		}
	)

	$("#aboutus").hover(
		function() {
			$(this).attr({src:"images/aboutus2.png"});
		},
		function() {
			$(this).attr({src:"images/aboutus.png"});
		}
	)

	// image change
	count = $("#play_list a").size();
	$("#play_list a:not(:first-child)").hide();
	$("#play_info").html($("#play_list a:first-child").find("img").attr("alt"));

	$("#play_no li:first-child").css({"background":"#fff","color":"#000"}); 

	$("#play_info").click(function(){window.open($("#play_list a:first-child").attr("href"), "_blank")});
   
	$("#play_no li").click(function() {    
		index = $(this).text() - 1;
		if (index >= count || index == before) return;
		var temp = before;
		before = index;

		$("#play_info").html($("#play_list a").eq(index).find("img").attr("alt"));    
		$("#play_info").unbind().click(function(){window.open($("#play_list a").eq(index).attr("href"), "_blank")});

		$("#play_list a").stop();
		$("#play_list a").css({opacity:1});
		$("#play_list a").css({"z-index":$("#play_image").css("z-index")});
		$("#play_list a").not($("#play_list a").eq(temp)).hide();
		$("#play_list a").eq(temp).width($("#play_image").width());
		$("#play_list a").eq(temp).height($("#play_image").height());
		$("#play_list a").eq(temp).show();

		$("#play_list a").eq(index).css({"z-index":$("#play_image").css("z-index")+10});

		var amari = index%4;
		switch(amari) {
		case 0:
			$("#play_list a").eq(index).width(0).height(0).css({opacity: 0}).show();
			$("#play_list a").eq(index).animate(
				{width: $("#play_image").width(), height:$("#play_image").height(), opacity: 1}, 
				3000)
			break;
		case 1:
			if(temp != index) {
				$("#play_list a").eq(temp).fadeOut(1000);
			}
			$("#play_list a").eq(index).fadeIn(1500);
			break;
		case 2:
			$("#play_list a").eq(index).width(0);
			$("#play_list a").eq(index).css({opacity: 0});
			$("#play_list a").eq(index).show();
			$("#play_list a").eq(index).animate({width: $("#play_image").width(), opacity: 1}, 3000)
			break;
		case 3:
			$("#play_list a").eq(index).height(0);
			$("#play_list a").eq(index).css({"opacity": 0});
			$("#play_list a").eq(index).show();
			$("#play_list a").eq(index).animate({height: $("#play_image").height(), opacity: 1}, 3000)
			break;
		default:
			if(temp != index) {
				$("#play_list a").eq(temp).fadeOut(1000);
			}
			$("#play_list a").eq(index).fadeIn(2500);
			break;
		}
		$(this).css({"background":"#fff","color":"#000"}).siblings().css({"background":"#000","color":"#fff"});    
	});    
	t = setInterval("showAuto()", 4000);    
	$("#play_image").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});   
	t_colorchg = setInterval("colorchange()", 1000);    

})

function showAuto()    
{    
	index = index >= (count - 1) ? 0 : index + 1;    
	$("#play_no li").eq(index).trigger("click");    
}

function colorchange()    
{    
	t_count=t_count+1;
	t_count = t_count % 2;
	if(t_count == 0) {
		$(".colorchange").css({color:"red"});
	} else {
		$(".colorchange").css({color:"#1921a3"});
	}
}