var put;
var flg = 1;
var fadeFnc;
var timer = 4000;
var ftimer0 = 1200;
var ftimer1 = 500;
	
$(function(){
		$("#visual").css("height","238px");
		$("#visual > p").css("height","238px");
	createElm();
	fadeFnc = setInterval(faderoop,timer);
	
	$("#horizontal-nav a img").mouseover(function () {
	  clearInterval(fadeFnc);
	  $(this).fadeTo("fast", 0.8);
	  if($(this).attr("id") == "a"){
				fade0(ftimer1);
	  }
	  if($(this).attr("id") == "b"){
				fade1(ftimer1);
	  }
	  if($(this).attr("id") == "c"){
				fade2(ftimer1);
	  }
	  if($(this).attr("id") == "d"){
				fade3(ftimer1);
	  }
	});
	
	$("#horizontal-nav a img").mouseout(function () {
	  $(this).fadeTo("fast", 1);
		fadeFnc = setInterval(faderoop,timer);
	});

});

var faderoop = function(){
	if((flg) == 0){
		fade0(ftimer0);
	}
		if((flg) == 1){
		fade1(ftimer0);
	}
		if((flg) == 2){
		fade2(ftimer0);
	}
		if((flg) == 3){
		fade3(ftimer0);
	}
}


var fade0 = function(ftimer){
		$("#visual > p").hide();
		$("#visual > p:eq(0)").fadeIn(ftimer,function(){flg = 1;});
	}
var fade1 = function(ftimer){
		$("#visual > p").hide();
		$("#visual > p:eq(1)").fadeIn(ftimer,function(){flg = 2;});
	}
var fade2 = function(ftimer){
		$("#visual > p").hide();
		$("#visual > p:eq(2)").fadeIn(ftimer,function(){flg = 3;});
	}
var fade3 = function(ftimer){
		$("#visual > p").hide();
		$("#visual > p:eq(3)").fadeIn(ftimer,function(){flg = 0;});
	}


var createElm = function(){
	var uri = new Array("/guideline/index.html","/JSDepository/index.html","/blog/index.html","/labs.html");

	for(var i=0;i<uri.length;i+=1){
		var p = $(document.createElement("p"));
		p.attr("id", "v"+i);
		var a = $(document.createElement("a"));
		a.attr("href", uri[i]);
		p.append(a);
		$("#visual").append(p);
	}
	$("#visual > p:gt(0)").hide();
}