// JavaScript Document
var startpage = "nowwehavetaken";

//set the image to the first in the folder '1.jpg'
var currentImage = 1;
var firstrun = "";


window.addEvent('load', function() {								 
	
//For image fade
	imgFx = new Fx.Tween('canvas', {
                 property: 'opacity',
                 duration: 400,
                 transition: Fx.Transitions.linear,
                 onComplete: function(e){
					// alert('fire');
					 if(firstrun==""){
						
						 firstrun="run";
	                     preloadimages();

					 }
        	 }
         });
	
    //alert('loaded!');

	imgFx.start(0.01,1);
	
//For Project Nav fade
if(showProjectNav){
		NavFx = new Fx.Tween('nav', {
			property: 'opacity',
			duration: 500, 
			transition: Fx.Transitions.linear
		});
	NavFx.start(0,1);
}

//For Logo fade in

		NavFx = new Fx.Tween('logo', {
			property: 'opacity',
			duration: 800, 
			transition: Fx.Transitions.linear
			
			
			
		});
		NavFx.start(0,1).chain(function(){ 
										
						
	
	                   	 var TopNavFx = new Fx.Tween('top-nav-ul', {property: 'opacity', duration: 2500, transition: Fx.Transitions.linear});
						 TopNavFx.start(0,1).chain(function(){javascript:location.href= startpage + '.php';});
					
						
						
				});

});


var elm = $('canvas');

var nextImage = function() {

		imgFx.start(1,0.01).chain(function(){ 	
		elm.removeEvents();
		elm.empty();
		
		if(parseInt(currentImage) == parseInt(imageCount)){
			currentImage = 1;
		}else{
			currentImage+=1;
		}
		
		
		var myImage = new Asset.image('images/'+ imagePath +'/'+ currentImage + '.jpg', {id: 'myImage'});

		myImage.inject(elm , 'top');
		counter.set('text', currentImage + "/" + imageCount);
		imgFx.start(0.01,1);
		
		$('myImage').addEvent('click', function(){
			nextImage();
		return false; // equivalent to stopPropagation.
		});		
});
	
	
}


var prevImage = function() {
	
	
	imgFx.start(1,0).chain(function(){ 	
		
		elm.removeEvents();
		elm.empty();
		
		if(parseInt(currentImage) == 1){
		
			//alert('reset');
			currentImage = imageCount;
			//alert(currentImage);
			
		}else{
			currentImage-=1;
		}
		
		//alert('images/'+ imagePath +'/'+ currentImage + '.jpg');
		var myImage = new Asset.image('images/'+ imagePath +'/'+ currentImage + '.jpg', {id: 'myImage'});
			
		myImage.inject(elm , 'top');
		counter.set('text', currentImage + "/" + imageCount);
		imgFx.start(0,1);
	
		$('myImage').addEvent('click', function(){
			nextImage();
		return false; // equivalent to stopPropagation.
		});
	
	
	});
	
	
}




 	var counter = $('counter');
	counter.set('text', currentImage + "/" + imageCount);

	//pre load images after main image finishes fading (first time only).

	var preloadimages = function(){
		
		//alert('preload images called');
			var imgArray = [];
			for(i=0; i<=imageCount-1; i++){
				imgArray[i] = "images/" + imagePath + "/" + parseInt(i + 1) + ".jpg";
			}
		var allImages = new Asset.images(imgArray);
		
	}
	
	
	 
		
		//preload the 1st image of each portfolio.
		
		var imgArraypreview = [];

		
			/* preloading */
			 
			
			//work out how many nav items there are and therefore how many images to load.
				
				var myElements = $('nav').getElements('a');
				
				//myElements.each(function(el) {
										 //alert(el);
				//						 });
		
				//strip the path from the href
				
				for(e=0; e<=myElements.length-1; e++){
						
						var str = myElements[e].toString();
						var lstSlsh = str.lastIndexOf("/");
						var lstdot = str.lastIndexOf(".");
						
								
						imageToLoad = str.substring((lstSlsh+1), lstdot);
						
						imgArraypreview[e] = imageToLoad;
						}
			
			
				//------------------------------------------------------
				//load images and put in preview div
				var images = imgArraypreview;
				//alert(images);
				var loader = new Asset.images(images, {
						onComplete: function() {
							images.each( function( im, index ) {
								//alert(index+ '=' + im);
								im = "images/" + im + "/1.jpg";
								new Element('img',{ src:im, id:'img'+index, style:'position:absolute;opacity:0;display:none;' }).inject($('preview'));
								
								
								
							})
						}
					});
				
			

				//-----------------------------------------------------
				$('preview').position({
				  relativeTo: $('canvas'),
					  position: {
							x: 'left',
							y: 'top'
						}
					});
				//------------------------------------------------------
				//give the nav links ids to use in a second with the mouseover function.
				howmanylinks = $('nav').getElements('a');
				
				howmanylinks.each(function (hm, ind) {
												//alert(ind);
												howmanylinks[ind].set('id', ind);
											}
											)
				//--------------------------------------------------------
				//event listeners
				//mouseenter
								
				$('nav').getElements('a').addEvent('mouseenter', function(e) 
				{	
					new Event(e).stop();
					
					
					// figure out which image to display & which page we are on.
					var im = this.toString();
					var slh = im.lastIndexOf("/");
					var dot= im.lastIndexOf(".");
					
					imageToLoad = im.substring((slh+1), dot);
					
					var pg = window.location.toString();
					var slh2 = pg.lastIndexOf("/");
					var dot2 = pg.lastIndexOf(".");
					
					
					pageLoaded = pg.substring((slh2+1), dot2);
					
					
					

					if(imageToLoad.toString() != pageLoaded.toString()){
												
					
						val = this.id;
						
						objToFade = $('img' + val).id;
												
						//fade out canvas
						var cFx = new Fx.Tween($('canvas'));
						cFx.set('opacity', '0');
												
						//fade in preview					
						var oFx = new Fx.Tween(objToFade);
						oFx.start('opacity', '0', '1');
												
						$('img' + val).setStyle('display', 'block');
						}
				});
				
				
				//mouseleave
				$('nav').getElements('a').addEvent('mouseleave', function(e) 
				{	
					new Event(e).stop();
					
					// figure out which image to display & which page we are on.
					var im = this.toString();
					var slh = im.lastIndexOf("/");
					var dot= im.lastIndexOf(".");
					
					imageToLoad = im.substring((slh+1), dot);
					
					var pg = window.location.toString();
					var slh2 = pg.lastIndexOf("/");
					var dot2 = pg.lastIndexOf(".");
					
					
					pageLoaded = pg.substring((slh2+1), dot2);
					
					
					

					if(imageToLoad.toString() != pageLoaded.toString()){
					
					
						val = this.id;
						
						objToFade = $('img' + val).id;
												
						var cFx = new Fx.Tween($('canvas'));
						cFx.set('opacity', '1');
												
						var oFx = new Fx.Tween(objToFade);
						oFx.start('opacity', '1', '0');
																		
						$('img' + val).setStyle('display', 'none');
					}
					
				});