/**
 * large-images-layout.js
 */

$(function(){
	
	//-----------------------
	// Large Image Setting
	//-----------------------
	// Initialize
	window.LargeImageInitializer = {};
	
	// Functions
	function arrayShuffle(oldArray) {
		var newArray = oldArray.slice();
	 	var len = newArray.length;
		var i = len;
		 while (i--) {
		 	var p = parseInt(Math.random()*len);
			var t = newArray[i];
	  		newArray[i] = newArray[p];
		  	newArray[p] = t;
	 	}
		return newArray; 
	};
	
	// Variables
	var LARGE_IMAGE_MOVE       = 1050;
	var largeImageHtmlTemplate = '<div class="large-image" style="left:%left%px;"><img src="%src%" width="1050" height="470" alt="%alt%" title="" /></div>';
	var largeImages;
	var largeImagesTotal       = largePreloadImages.length;
	var largeImagesHolder      = $('div#large-images-holder');
	var largeImagesNavigation  = $('div#large-images-navigation-inner');
	if(largeImagesTotal > 1) {
		largePreloadImages = arrayShuffle(largePreloadImages);
	}
	
	// Preload the images
	largeImagesHolder.bind('PRELOAD_COMPLETE.LARGE_IMAGES', function(){
		
		// Generate the html code
		var html = '';
		for(var i = 0; i < largeImagesTotal; i ++) {
			var eachHtml = largeImageHtmlTemplate;
			eachHtml     = eachHtml.replace('%left%', 1050 * i);
			eachHtml     = eachHtml.replace('%src%', largePreloadImages[i]);
			eachHtml     = eachHtml.replace('%alt%', largeMeta[i].alt);
			html += eachHtml;
		}
		largeImagesHolder.html(html);
		
		// Animate the first image.
		$('div.large-image').eq(0).css('opacity', 0);
		$('div.large-image').eq(0).delay(200).animate({opacity: 1}, 1000, 'easeInOutExpo', function(e){
			//$(e.currentTarget).css('filter', 'none');
			
			// Initialize Navigations
			LargeImageInitializer.initialize();
		});
		
	});
	largeImagesHolder.preload({
		images: largePreloadImages,
		namespace: 'LARGE_IMAGES'
	});
	
	LargeImageInitializer.initialize = function() {
		largeImages = $('div.large-image');
		
		// If the number of large images is more than 1
		if(largeImages.length > 1) {
			
			// Variables
			var largeImagesIDs    = new Array();
			var largeLeftLinkObj  = $('a#large-images-left-link');
			var largeRightLinkObj = $('a#large-images-right-link');
			for(var i = 0; i < largeImagesTotal; i ++) {
				largeImagesIDs.push(i);
			}
			
			// Add the events to the navigations
			// Left
			largeLeftLinkObj.bind('click', function(e){
				
				if(largeImages.filter(':animated').length > 0) return;
				
				// ID management
				var lastId = largeImagesIDs.pop();
				largeImagesIDs.unshift(lastId);
				var lastLargeImageObj  = largeImages.eq(lastId);
				var lastLargeImageLeft = lastLargeImageObj.position().left;
				lastLargeImageObj.css('left', lastLargeImageLeft - (LARGE_IMAGE_MOVE * largeImagesTotal));
				
				// Check Positions
				var positions = new Array();
				for(var i = 0; i < largeImagesTotal; i ++) {
					positions[i] = largeImages.eq(i).position().left;
				}
				
				// Animate
				for(var i = 0; i < largeImagesTotal; i ++) {
					var currentImageObj = largeImages.eq(i);
					currentImageObj.animate({left: positions[i] + LARGE_IMAGE_MOVE}, 500, 'easeInOutExpo');
				}
			});
			
			// Right
			largeRightLinkObj.bind('click', function(e){
				
				if(largeImages.filter(':animated').length > 0) return;
				
				// Check Positions
				var positions = new Array();
				for(var i = 0; i < largeImagesTotal; i ++) {
					positions[i] = largeImages.eq(i).position().left;
				}
				
				// Animate
				for(var i = 0; i < largeImagesTotal; i ++) {
					var currentImageObj = largeImages.eq(i);
					if(i != largeImagesTotal - 1) {
						currentImageObj.animate({left: positions[i] - LARGE_IMAGE_MOVE}, 500, 'easeInOutExpo');
					} else {
						currentImageObj.animate({left: positions[i] - LARGE_IMAGE_MOVE}, 500, 'easeInOutExpo', function(e){
							var firstId = largeImagesIDs.shift();
							largeImagesIDs.push(firstId);
							var firstLargeImageObj   = largeImages.eq(firstId);
							var firstLargetImageLeft = firstLargeImageObj.position().left
							firstLargeImageObj.css('left', firstLargetImageLeft + (LARGE_IMAGE_MOVE * largeImagesTotal));
						});
					}
				}
				
			});
			
			
			// Animate the navigation
			largeImagesNavigation.css('opacity', 0);
			largeImagesNavigation.css('display', 'block');
			largeImagesNavigation.animate({opacity: 1}, 1000, 'easeInOutExpo', function(e){
				//$(e.currentTarget).css('filter', 'none');
			});
			
			// Link
			if(LARGE_IMAGE_LINK != '') {
				// Style
				largeImagesHolder.css('cursor', 'pointer');
				
				// Events
				largeImagesHolder.bind('click', function(e){
					var target = (LARGE_IMAGE_TARGET == 'self-window') ? '_self' : '_blank';
					window.open(LARGE_IMAGE_LINK, target);
				});
				
			}
			
		}
		
	}

	
	//-------------
	// Link
	//-------------
	
	
	
});