var over
var c=0
var t
var time

jQuery().ready(function(){
	
	$("#banner-2").hide();
	$("#banner-3").hide();
	$("#banner-4").hide();
	MM_preloadImages("images/detail_preview01.gif");
	MM_preloadImages("images/detail_preview02.gif");
	MM_preloadImages("images/detail_preview03.gif");
	MM_preloadImages("images/detail_preview04.gif");

	timedCount()

	/* mouseover content 1*/
	
	$("#content-1").mouseover(function(){
		clearTimeout(t);
		$("#content-1").hide();
		$("#banner-2").hide();
		$("#banner-3").hide();
		$("#banner-4").hide();
		$("#banner-1").show();
		$("#content-1").show();
		document.getElementById("mc-1").className='notranparent';
		document.getElementById("mc-2").className='tranparent';
		document.getElementById("mc-3").className='tranparent';
		document.getElementById("mc-4").className='tranparent';
		$(this).mouseout(function(){
			clearTimeout(t);
			var c=1;
			t=setTimeout("timedCount()",4500);
		});
	});

	/* mouseover content 2*/
	
	$("#content-2").mouseover(function(){
		clearTimeout(t);
		$("#content-2").hide();
		$("#banner-1").hide();
		$("#banner-3").hide();
		$("#banner-4").hide();
		$("#banner-2").show();
		$("#content-2").show();
		document.getElementById("mc-2").className='notranparent';
		document.getElementById("mc-1").className='tranparent';
		document.getElementById("mc-3").className='tranparent';
		document.getElementById("mc-4").className='tranparent';
		$(this).mouseout(function(){
			clearTimeout(t);
			var c=2;
			t=setTimeout("timedCount()",4500);
		});
	});
	
	/* mouseover content 3*/
	
	$("#content-3").mouseover(function(){
		clearTimeout(t);
		$("#content-3").hide();
		$("#banner-2").hide();
		$("#banner-1").hide();
		$("#banner-4").hide();
		$("#banner-3").show();
		$("#content-3").show();
		document.getElementById("mc-3").className='notranparent';
		document.getElementById("mc-2").className='tranparent';
		document.getElementById("mc-1").className='tranparent';
		document.getElementById("mc-4").className='tranparent';
		$(this).mouseout(function(){
			clearTimeout(t);
			var c=3;
			t=setTimeout("timedCount()",4500);
		});
	});

	/* mouseover content 4*/
	
	$("#content-4").mouseover(function(){
		clearTimeout(t);
		$("#content-4").hide();
		$("#banner-2").hide();
		$("#banner-3").hide();
		$("#banner-1").hide();
		$("#banner-4").show();
		$("#content-4").show();
		document.getElementById("mc-4").className='notranparent';
		document.getElementById("mc-2").className='tranparent';
		document.getElementById("mc-3").className='tranparent';
		document.getElementById("mc-1").className='tranparent';
		$(this).mouseout(function(){
			clearTimeout(t);
			var c=4;
			t=setTimeout("timedCount()",4500);
		});
	});

});

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function timedCount(){
	
	if(c > 4){
		c = 0;
	}

	time = 4500;
	if(c==4){
		time = 0; 
	}

	c=c+1;
	t=setTimeout("timedCount()",time);
	showhide(c);
}

function showhide(i){
	switch(c){
		case 1 :
		$("#content-1").hide();
		$("#banner-2").hide();
		$("#banner-3").hide();
		$("#banner-4").hide();
		$("#banner-1").fadeIn(1000); /* ความเร็วรูป*/
		$("#content-1").fadeIn(2000); /* ความเร็ว content */
		document.getElementById("mc-1").className='notranparent';
		document.getElementById("mc-2").className='tranparent';
		document.getElementById("mc-3").className='tranparent';
		document.getElementById("mc-4").className='tranparent';
		break;
		case 2 :
		$("#content-2").hide();
		$("#banner-1").hide();
		$("#banner-3").hide();
		$("#banner-4").hide();
		$("#banner-2").fadeIn(1000);
		$("#content-2").fadeIn(2000);
		document.getElementById("mc-2").className='notranparent';
		document.getElementById("mc-1").className='tranparent';
		document.getElementById("mc-3").className='tranparent';
		document.getElementById("mc-4").className='tranparent';
		break;
		case 3 :
		$("#content-3").hide();
		$("#banner-2").hide();
		$("#banner-1").hide();
		$("#banner-4").hide();
		$("#banner-3").fadeIn(1000);
		$("#content-3").fadeIn(2000);
		document.getElementById("mc-3").className='notranparent';
		document.getElementById("mc-2").className='tranparent';
		document.getElementById("mc-1").className='tranparent';
		document.getElementById("mc-4").className='tranparent';
		break;
		case 4 :
		$("#content-4").hide();
		$("#banner-2").hide();
		$("#banner-3").hide();
		$("#banner-1").hide();
		$("#banner-4").fadeIn(1000);
		$("#content-4").fadeIn(2000);
		document.getElementById("mc-4").className='notranparent';
		document.getElementById("mc-2").className='tranparent';
		document.getElementById("mc-3").className='tranparent';
		document.getElementById("mc-1").className='tranparent';
		break;
	}	
}