/*!
 Javascript Slideshow
$(document).ready(function() {
 */
function makeSlideShow() {



	// -- init --

    var html;
    var w = 940;
    var h = 430;
    var project = 0;
	var inter = 0;
	var intertrigger = true;
	var mydelay = 7000; // -- delay for the slideshow

    var projects = $("#screens").find("#insidebox");
    var frames = Array();


    var titles = $("#titles").html().split('|');
    var infos = $("#descriptions").html().split('|');


    for(var i=0;i<projects.length;i++)
    {    	
        frames[i] = $(projects[i]).find("li");

        // add a dot to projects nav

        if(i==0)
        {
	        html = '<li class="project" id="0-' + (i*w) + '-' + i + '"><img src="images/dot_on.png" width="10" height="10" /></li>';
        }else{
	        html = '<li class="project" id="0-' + (i*w) + '-' + i + '"><img src="images/dot_off.png" width="10" height="10" /></a</li>';
        }
        $('#nav-projects ul').append(html);


        // update position
        $(projects[i]).css('left',(i*w)+'px');


	    for(n=0;n<frames.length;n++)
   		{
	        if(i==0)
	        {
	       	    for(j=0;j<frames[0].length;j++)
		   		{

		    		// add a dot to the frames nav
			        if(j==0)
			        {
				        html = '<li class="frame" id="' + (j*h) + '-' + (i*w) + '-' + j + '"><img src="images/dot_on.png" width="10" height="10" /></li>';
			        }else{
				        html = '<li class="frame" id="' + (j*h) + '-' + (i*w) + '-' + j + '"><a href="#"><img src="images/dot_off.png" width="10" height="10" /></li>';
			        }

		  	 		$('#nav-frames ul').append(html);

	  	 		}

	        }

	        // update position
	        $(frames[n]).css('top',(n*h)+'px');
	        $(frames[n]).css('left',(i*w)+'px');
	    }     

    }

	// -- init the title
    $('#screens #titles').html(titles[0]);
	$('#screens #titles').css('display','block')

	// -- init the infos    
	$('#framebox #infos').html(infos[0]);


	// -- events --

	$(".project").click(function(e)
	{
		deleteAutoPilot();

    	var atr = $(this).attr("id").split("-");

		// animation
		$("#inside").animate({top:0},500,function()
		{
			$("#inside").animate({left:"-"+atr[1]+"px"},500);
		});

    	updateFrames(atr[2]);

	});

	$('.frame').live('click', function(e)
	{
		deleteAutoPilot();

    	var atr = $(this).attr("id").split("-");

    	$("#inside").animate({top:"-"+atr[0]+"px"},500);

    	// changing the dots
		$(".frame").find("img").attr("src","images/dot_off.png");
    	$(this).find("img").attr("src","images/dot_on.png");

    	$("#frame-on").animate({marginTop: -26 + ((atr[2]*17)) + "px"},500);

	});


	function updateFrames( pr )
	{

    	// changing the dots
		$(".project").find("img").attr("src","images/dot_off.png");
    	$("#0-"+(pr*w)+"-"+pr).find("img").attr("src","images/dot_on.png");	

		$('#frame-on').fadeOut(300);

		$('#nav-frames').fadeOut(300, function()
		{

	    	// update of title
			$('#screens #titles').fadeOut(300, function()
			{
			    $('#screens #titles').html(titles[pr]);
				$('#screens #titles').fadeIn(300);
			});
			
			// update of the infos
			$('#framebox #infos').fadeOut(300, function()
			{
			    $('#framebox #infos').html(infos[pr]);
				$('#framebox #infos').fadeIn(300);
			});

			// remove dots
			$('#nav-frames').children('ul').remove();
			$('#nav-frames').append("<ul></ul>");


			$('#nav-frames').fadeIn(300, function()
			{
		   	    for(j=0;j<frames[pr].length;j++)
		   		{
			    	// add a dot to the frames nav
			        if(j==0)
			        {
				        html = '<li class="frame" id="' + (j*h) + '-' + (i*w) + '-' + j + '"><img src="images/dot_on.png" width="10" height="10" /></li>';
			        }else{
				        html = '<li class="frame" id="' + (j*h) + '-' + (i*w) + '-' + j + '"><img src="images/dot_off.png" width="10" height="10" /></li>';
			        }
		  	 		$('#nav-frames ul').append(html);

			 	}

				$('#frame-on').css('margin-top','-25px');
				$('#frame-on').fadeIn(300);


	    	});

    	});


		project	= pr;
	}

	$("#button-prev").click(function(e)
	{
		deleteAutoPilot();

		if(project>0)
		{
			project--;
		}else{
			project = projects.length-1;
		}

		var newpos = $(projects[project]).css('left');

		// animation
		$("#inside").animate({top:0},500,function()
		{
			$("#inside").animate({left:"-"+newpos},500);
		});

		updateFrames(project);

	}).mouseover(function(){
		var imagepath = $('#button-prev').find('img').attr('src').split('/images/');
		$('#button-prev').find("img").attr("src",imagepath[0]+"/images/button-post-prev-on.png");
	}).mouseout(function(){
		var imagepath = $('#button-prev').find('img').attr('src').split('/images/');
		$('#button-prev').find("img").attr("src",imagepath[0]+"/images/arrow_prev.png");
	});

	$("#button-next").click(function(e)
	{
		deleteAutoPilot();
		nextProject();
	}).mouseover(function(){
		var imagepath = $('#button-next').find('img').attr('src').split('/images/');
		$('#button-next').find("img").attr("src",imagepath[0]+"/images/button-post-next-on.png");
	}).mouseout(function(){
		var imagepath = $('#button-next').find('img').attr('src').split('/images/');
		$('#button-next').find("img").attr("src",imagepath[0]+"/images/arrow_next.png");
	});

	function nextProject()
	{
		if(project<projects.length-1)
		{
			project++;
		}else{
			project = 0;
		}

		var newpos = $(projects[project]).css('left');

		// animation
		$("#inside").animate({top:0},500,function()
		{
			$("#inside").animate({left:"-"+newpos},500);
		});

		updateFrames(project);
	}

	// -- slideshow functions -- 
	
	function autoPilot()
	{
		inter = setInterval(nextProject,mydelay);
		var imagepath = $('#autopilot').find('img').attr('src').split('/images/');
		$('#autopilot').find("img").attr("src",imagepath[0]+"/images/btpause.png");
		intertrigger = true;
	}

	function deleteAutoPilot()
	{
		clearInterval(inter);
		inter = 0;
		var imagepath = $('#autopilot').find('img').attr('src').split('/images/');
		$('#autopilot').find("img").attr("src",imagepath[0]+"/images/btplay.png");
		intertrigger = false;
	}

	$("#autopilot").live('click',function(e)
	{
		if(intertrigger)
		{
			deleteAutoPilot();
		}else{
			autoPilot();
		}
	});


	// Display Information panel
	
	var triggerInfos = true;
	
	$("#button-infos").click(function(e)
	{
		var imagepath = $(this).find('img').attr('src').split('/images/');
		
		if(triggerInfos){
			$("#infos").animate({top:"430px"},500);
			$(this).find("img").attr("src",imagepath[0]+"/images/infos.png");
			triggerInfos = false
		}else{
			$("#infos").animate({top:"-=50px"},500);
			$(this).find("img").attr("src",imagepath[0]+"/images/infos-off.png");
			triggerInfos = true;
		}
		
	});	


	// launch slideshow
	autoPilot();
	
	setTimeout(function(){
		$("#infos").animate({top:"-=50px"},500);
		var imagepath = $("#button-infos").find('img').attr('src').split('/images/');
		$("#button-infos").find("img").attr("src",imagepath[0]+"/images/infos-off.png");
	},2000);

}