/* Author: 

*/

/* Global variables
-------------------------------------------------------------- */
var $items = {};
var $itemsStatic = {};
var $itemsActive = {};

(function ($) {
    var cache = [];
    // Arguments are image paths relative to the current page.
    $.preLoadImages = function () {
        var args_len = arguments.length;
        for (var i = args_len; i--; ) {
            var cacheImage = document.createElement('img');
            cacheImage.src = arguments[i];
            cache.push(cacheImage);
        }
    }
    
})(jQuery)

$(document).ready(function () {

    // Cache the Window object
	$window = $(window);
	
	$.preLoadImages("img/item/splash.jpg, img/item/bg-menu.png");
	//$('#summary').fadeIn('slow');
	

	function update( data ){
		$('#done').html( ''+data.done );
		$('#total').html( ''+data.total );
		$('#persentage').css('width', (data.done / data.total)*100 +'%' );
		$('#loaded').html( ''+data.loaded );
		$('#failed').html( ''+data.failed );
	};
	function complete( data ){
		update( data );
		$('#image-next').html( 'none' );//reset the "loading: xxxx"
		$('#image-loaded').html( data.image );
	};
	function request( data ){
		update( data );
		$('#image-next').html( data.image );//set the "loading: xxxx"
	};
	function finish(){//hide the summary
		//$('#summary').hide();
		//$('#paralaxSlider .stage').show();
		animScenes.triggerSceneStart();
	};
	
	$('.toggle').click(function() {
		var target = $(this).attr('href').substring(1);
		$('#' + target).slideToggle();
		
		return false;
	});
	
	$('.open-menu').click(function() {
		var target = $(this).attr('href').substring(1);
		$('.open-menu').hide();
		$('#paralaxMenu').animate({top: '0'}, 800);
		
		return false;
	});
	
	$('.close-menu').click(function() {
		var target = $(this).attr('href').substring(1);
		$('#paralaxMenu').animate({top: '-448px'}, 800, function(){
			$('.open-menu').show();
		});
		
		return false;
	});
	
}); //end document ready



var animScenes = animScenes || {};

animScenes = {
	$items: $('[data-type]'),
	$itemsStatic: $('[data-type = "static"]'),
	$itemsActive: $('[data-type = "animation"]'),
	splash: $('#splash'),
	modal: $('#modal'),
	stage: $('.stage'),
	persentage: $('#persentage'),
	animationComplete: false,
	
	triggerSceneStart: function(){
		var ss = this;
		this.persentage.fadeOut();
		
		// Cache the X-Y offset and the speed of each sprite
		this.$items.each(function() {
			var $this = $(this);
			$this.data('Xposition', $this.attr('data-Xposition'));
			$this.data('Yposition', $this.attr('data-Yposition'));
			$this.data('speed', $this.attr('data-speed'));
			$this.data('z-index', $this.attr('data-Zindex'));
		});
		
		// For each element that has a data-type="static" attribute
		this.$itemsStatic.each(function(){
			
			var $self = $(this);
			var offset = $(this).offset();
			
			$self.css('left', $self.data('Xposition') + 'px');
			$self.css('top', $self.data('Yposition') + 'px');
			$self.css('z-index', $self.data('Zindex'));
			
		});	// each data-type
		
		this.splash.animate({'opacity':'0'},2000, function(){
			ss.splash.remove();
			ss.triggerScene1(); 
		});
	},
	
	triggerScene1: function(){
		
		var sq = this;
		var lastID = this.$itemsActive.length - 1;
		
		// For each element that has a data-type="animation" attribute
		this.$itemsActive.each(function(index){
			
			var $self = $(this);
			var offset = $(this).offset();
			
			$self.css('top', $self.data('Yposition') + 'px');
			$self.css('z-index', $self.data('Zindex'));
			
			$self.animate({left: $self.data('Xposition') + 'px'}, 1000, function(){
				//updateStatus('Animation 1 Complete');
				
				if (index == lastID) {
					//alert('triggerScene1 complete');
					sq.triggerScene2();
				}
			});
			
		});	// each data-type
		
	},
	
	triggerScene2 :function(){
		var sc =  this;
		this.modal.animate({'opacity':'1'},2000, function(){
		   //sc.triggerScene3(); 
		});
		
	}        
};