var n;
var t1=100; // fadeOut time
var t2=1000; // fadeIn time
var t3=5000; // transition time


$(document).ready(function(){

initSlide(4);

});

function initSlide(y){
n = y;
$(".visualImg").each(function(){
$(this).hide();
});

	
for( var i = 0 ; i < n ; i ++){	
		$('#mainVisualNav').append('<p><a class="navBtn" id="mainVisualNav0' + (i+1) + '" href="javascript:void(0);"><img width="37" height="8" alt="" src="/resouces/images/spacer.gif"></a></p>');
			}

$('.mainVisualNav').css('display','block');
if(n == 1){
$('#mainVisual01').fadeIn(t2);

return false;
} else {
imageSwap00();
};




$('#mainVisualNav01').click(
function () {
imageSwap01();
});
$('#mainVisualNav02').click(
function () {
imageSwap02();
});
$('#mainVisualNav03').click(
function () {
imageSwap03();
});
$('#mainVisualNav04').click(
function () {
imageSwap04();
});
$('#mainVisualNav05').click(
function () {
imageSwap05();
});

$('#mainVisualNav06').click(
function () {
imageSwap06();
});
$('#mainVisualNav07').click(
function () {
imageSwap07();
});
$('#mainVisualNav08').click(
function () {
imageSwap08();
});
};

function imageSwap00() {
$(".mainVisual").each(function(){
$(this).hide();
});
$('#mainVisual01').fadeIn(t2);
$(".navBtn").each(function(){
$(this).css("background","url(/resouces/images/main_visual_nav.gif)");
});
$('#mainVisualNav01').css("background","url(/resouces/images/main_visual_nav_on.gif)");
timer=setTimeout("imageSwap02()",t3);
}


function imageSwap01() {
clearTimeout(timer);
$(".mainVisual").each(function(){
$(this).fadeOut(t1);
});
$('#mainVisual01').fadeIn(t2);
var changeSrc = $('.mainVisualNav').attr('src','/slide_nav03.gif');

$('.mainVisualNav img').attr('src','include/images/slide_nav01.gif');


$('#mainVisualNav01').css("background","url(/resouces/images/main_visual_nav_on.gif)");
timer=setTimeout("imageSwap02()",t3);
}

function imageSwap02() {
clearTimeout(timer);
$(".mainVisual").each(function(){
$(this).fadeOut(t1);
});
$('#mainVisual02').fadeIn(t2);

$('.mainVisualNav img').attr('src','include/images/slide_nav02.gif');

 if(n == 2){
 timer=setTimeout("imageSwap01()",t3);
 } else {
 timer=setTimeout("imageSwap03()",t3);
 };
}

function imageSwap03() {
clearTimeout(timer);
$(".mainVisual").each(function(){
$(this).fadeOut(t1);
});
$('#mainVisual03').fadeIn(t2);
$('.mainVisualNav img').attr('src','include/images/slide_nav03.gif');

if(n == 3){
timer=setTimeout("imageSwap01()",t3);
} else {
timer=setTimeout("imageSwap04()",t3);
};

}

function imageSwap04() {
clearTimeout(timer);
$(".mainVisual").each(function(){
$(this).fadeOut(t1);
});
$('#mainVisual04').fadeIn(t2);
$('.mainVisualNav img').attr('src','include/images/slide_nav04.gif');
if(n == 4){
timer=setTimeout("imageSwap01()",t3);
} else {
timer=setTimeout("imageSwap05()",t3);
};

}

function imageSwap05() {
clearTimeout(timer);
$(".mainVisual").each(function(){
$(this).fadeOut(t1);
});
$('#mainVisual05').fadeIn(t2);
$(".navBtn").each(function(){
$(this).css("background","url(/resouces/images/main_visual_nav.gif)");
});
$('#mainVisualNav05').css("background","url(/resouces/images/main_visual_nav_on.gif)");

if(n == 5){
timer=setTimeout("imageSwap01()",t3);
} else {
timer=setTimeout("imageSwap06()",t3);
};

}


function imageSwap06() {
clearTimeout(timer);
$(".mainVisual").each(function(){
$(this).fadeOut(t1);
});
$('#mainVisual06').fadeIn(t2);
$(".navBtn").each(function(){
$(this).css("background","url(/resouces/images/main_visual_nav.gif)");
});
$('#mainVisualNav06').css("background","url(/resouces/images/main_visual_nav_on.gif)");

if(n == 6){
timer=setTimeout("imageSwap01()",t3);
} else {
timer=setTimeout("imageSwap07()",t3);
};

}


function imageSwap07() {
clearTimeout(timer);
$(".mainVisual").each(function(){
$(this).fadeOut(t1);
});
$('#mainVisual07').fadeIn(t2);
$(".navBtn").each(function(){
$(this).css("background","url(/resouces/images/main_visual_nav.gif)");
});
$('#mainVisualNav07').css("background","url(/resouces/images/main_visual_nav_on.gif)");

if(n == 7){
timer=setTimeout("imageSwap01()",t3);
} else {
timer=setTimeout("imageSwap08()",t3);
};

}

function imageSwap08() {
clearTimeout(timer);
$(".mainVisual").each(function(){
$(this).fadeOut(t1);
});
$('#mainVisual08').fadeIn(t2);
$(".navBtn").each(function(){
$(this).css("background","url(img/main_visual_nav.gif)");
});
$('#mainVisualNav08').css("background","url(/resouces/images/main_visual_nav_on.gif)");
timer=setTimeout("imageSwap01()",t3);
}