// JavaScript Document

var slideshow=new Array(); // regular array (add an optional integer
    slideshow[0]="tnt|TNT Express - |Corporate, Intranet, Media, Analytics";
    slideshow[1]="cq5|CQ5 - |Building websites, components, modifying the GUI and widgets";
	slideshow[2]="goodvibes|Good Vibes - |Json website with fixed left content"
	slideshow[3]="hci|HCI - |Design and Prototype a mobile application";
	slideshow[4]="freshcards|Fresh Cards -|Final Year Project Card e-Commerce website";

function right(){
		var number = $('div.slideshow').attr("id");
	   		number = (parseInt(number)+1);
	   		if(number>4)number=0;
			blackBar(number);
}
	   
function blackBar(number){
		  var data = slideshow[number].split('|');
		  $('div.slideshow').fadeTo(700,0.1,function(){
				 				$('div.blackbar span.h1').text(data[1]); 
								$('span.text').text(data[2]);
								$(this).attr("id",number).attr("class","").addClass("slideshow").addClass("featured").addClass(data[0]).fadeTo(700,1)});

}	 
							  
$(document).ready(function(){
	
Image1= new Image(950,428)
Image1.src = "images/cq5.png"

Image2= new Image(950,428)
Image2.src = "images/hci.png"

Image3= new Image(950,428)
Image3.src = "images/goodvibes.png"

Image4= new Image(950,428)
Image4.src = "images/freshcards.png"

Image5= new Image(889,2500)
Image5.src= "images/timeline.png";

var t=setInterval (right, 6000);

$('div#arrow-left , div#arrow-right').hover(function(){
	$(this).fadeTo(600,1);
},function(){
	$(this).fadeTo(600,0.5);
});
	   $('div#arrow-left').click(function(){
	   		var number = $('div.slideshow').attr("id");
	   		number = number-1;
	   		if(number<0)number=4;
	     	blackBar(number);
		    clearInterval(t);
	   t=setInterval (right, 6000);
	   });
	   
	   $('div#arrow-right').click(function(){
		   right();
	   	clearInterval(t);
		t=setInterval (right, 6000);	
	   });
     $('div.box-timeline').hover(function(){
		 $('div.box-timeline div').fadeTo(300,0.2);
	     $('div.box-timeline h1').text('Click to View Timeline');
		 },function(){
			 $('div.box-timeline div').fadeTo(300,1);
			  $('div.box-timeline h1').text('Timeline');
		});
		$('div.box-timeline div').click(function(){
			$('div#content').fadeTo(600,0.1,function(){
			$('div#timeline').fadeTo(0,0.1,function(){
			$(this).show();
			$('div#content').hide();
			$(this).fadeTo(600,1);
			});
				
			});
		});
		$('div#timeline span').click(function(){
			$('div#timeline').fadeTo(600,0.1,function(){
			$('div#content').fadeTo(0,0.1,function(){
			$(this).show();
			$('div#timeline').hide();
			$(this).fadeTo(600,1);
			});
				
			});
		});
 });