JW.imageArray = null;
JW.imageCounter = null;
JW.lastImage = null;
JW.preloadImages = function(array){
	if(array.length > 0){
		var myImages = new Asset.images(array,{
			onProgress: function(counter, index){
			 //console.log('loading image: ' +counter);
			},
			onComplete: function(){
				JW.generateImages();
		    }
		});
		JW.imageArray = myImages;
		$('pager').addEvent('click',function(){
			var newCounter = JW.imageCounter+1;
			if((newCounter + 1) > JW.imageArray.length){
				newCounter = 0;
			}
			JW.enlargeImage(newCounter);
		});
		
		$('pager_back').addEvent('click',function(){
			var newCounter = JW.imageCounter - 1;
			if(newCounter < 0){

				newCounter = JW.imageArray.length - 1;
			}
			
			JW.enlargeImage(newCounter);
		});
		
		$('closer').addEvent('click',function(){
			$('scrollable').setStyle('visibility','visible');
			if($chk($('weblogoverview'))){
				$('weblogoverview').setStyle('visibility','visible');
			}
			$('imageLargeContainer').setStyle('display','none');
		});
	}
	
}

JW.generateImages = function(){
	var imageContainer = $('images');
	JW.imageArray.each(function(item,index){
		var clonedImage = item.clone(true,true);
		JW.largeImage(clonedImage);
		
		var divElement = new Element('div');
		divElement.className = 'portfolioImage';
		var aElement = new Element('a');
		aElement.href = '#1';
		aElement.addEvent('click',function(){
			JW.enlargeImage(index);
		});
		item.setStyle('height','auto');
		item.setStyle('width','70%');
		item.injectInside(aElement);
		aElement.injectInside(divElement);
		divElement.injectInside(imageContainer);
		
	});
	
}


JW.largeImage = function(imgElement){
	imgElement.removeProperty('width');
	if(Browser.Engine.trident){
		var assetImage = new Asset.image(imgElement.src);
		//console.log(assetImage.getSize());
		var imageHeight = assetImage.height;
		var imageWidth = assetImage.width;
	}else{
		
	}
	if(imageHeight == 0){
		var imageHeight = 200;
		var imageWidth = 200;
	}
	
	var width = window.getSize().x; 
	var height = window.getSize().y; 

		var newheight = height-130;
		var ratio = (newheight / imageHeight);
		//console.log(ratio);
		var newWidth = imageWidth * ratio;
		
		imgElement.setStyle('height',newheight+'px');
		imgElement.setStyle('width',(newWidth)+'px');
	
	imgElement.setStyle('opacity','0');
	imgElement.injectInside($('largeImages'));
	$('pager').setStyle('left',((width/2) - 20)+'px');
	$('pager').setStyle('top',(height - 110)+'px');
	
	$('pager_back').setStyle('left',((width/2) - 100)+'px');
	$('pager_back').setStyle('top',(height - 110)+'px');
	
	$('closer').setStyle('left',((width/2) - 220)+'px');
	$('closer').setStyle('top',(height - 110)+'px');
}

JW.enlargeImage = function(counter){
	JW.imageCounter = counter;
	$('scrollable').setStyle('visibility','hidden');
	if($chk($('weblogoverview'))){
		$('weblogoverview').setStyle('visibility','hidden');
	}
	$('imageLargeContainer').setStyle('display','inline');
	
	var children = $('largeImages').getChildren();
	
	if(JW.lastImage){
		var myFx = new Fx.Tween(JW.lastImage);
		//Immediately sets the background color of the element to red:
		myFx.start('opacity', '1', '0');
	}
	JW.lastImage = children[counter];
	var myFx = new Fx.Tween(JW.lastImage);
	//Immediately sets the background color of the element to red:
	myFx.start('opacity', '0', '1');
	
	
	
	
	//var width = window.getSize().x; 
	//var height = window.getSize().y; 
	
	//$('imageLargeContainer').innerHTML = '';
	//var imgElement = new Element('img');
	//imgElement.src = url;
	//imgElement.setStyle('height',(height-110)+'px');
	//imgElement.setStyle('width',(width-100)+'px');
	//imgElement.injectTop($('imageLargeContainer'));
	//imgElement.id="zoomed";
}

window.addEvent('resize',function(){
	var width = window.getSize().x; 
	var height = window.getSize().y; 
	if($('pager')){
		$('pager').setStyle('left',((width/2) - 20)+'px');
		$('pager').setStyle('top',(height - 110)+'px');
		$('pager_back').setStyle('left',((width/2) - 100)+'px');
		$('pager_back').setStyle('top',(height - 110)+'px');
		$('closer').setStyle('left',((width/2) - 220)+'px');
		$('closer').setStyle('top',(height - 110)+'px');
	}
	var slides = $('largeImages').getElements('img');
	slides.each(function(item,index){
		var imageHeight = item.height;
		var imageWidth = item.width;
		if(imageHeight == 0){
			var imageHeight = 200;
			var imageWidth = 200;
		}
		var newheight = height-130;

		var ratio = (newheight / imageHeight);
		
		var newWidth = imageWidth * ratio;

		item.setStyle('height',newheight+'px');
		item.setStyle('width',newWidth+'px');
	
		//item.setStyle('width',(width-100)+'px');
	});
	
});