// JavaScript Document
/*
	Developed by:   www.elespacio.net
	Author:			Leonardo Arrata Donadel
	Date:			14 December 2010
	Techonology:	Jquery, Javascript, HTML4 and HTML5, CSS
*/
/* --------------------------------- */
		// PRELOAD IMAGES
		/* --------------------------------- */
		// INIT GENERAL VARIABLES
		// -> you can change this variables
		nImgs = 40;
		exLoadImages = 5;
		sURL = "http://www.jordisarra.com/";
		maxVolume = 0.5;
		rollerVel = 20;
		paramVelocity = 2;
		screenWidth = 1000;
		screenHeight = 600;
		// don't change the variables below
		rollerHeight = 0;
		rollerWidth = 0;		
		rollerX = 0;
		velocity = 0;
		conHeight = 0;
		passImage = 0;
		countImg = 1;
		maxRight = 0;
		moving = false;
		playLeft = false;
		playRight = false;
		aImgsWidth = new Array();
		sumImages = 0;
		audioLoaded = false;
		/* --------------------------------- */
		// MOBILE VARS
		/* --------------------------------- */
		function set_MobileVars(){
			exLoadImages = nImgs;
			screenWidth = 960;
			screenHeight = 440;
		}		
		/* --------------------------------- */
		// SCREEN
		/* --------------------------------- */
		function set_Screen(){
			if (isMobile==true){set_MobileVars();}	
			
			$('#rollerTape').css({'opacity':0.2});
			$('#loader').show();
			// screen variables
			
			// set container height
			conHeight = screenHeight;
			// center the display (rollerTape) on screen
			centerYcont = (screenHeight-conHeight)/2;
			$('#container').css({'top':centerYcont,'height':conHeight});
			// center loader on screen
			loaderY = (screenHeight-$('#loader').height())/2;
			loaderX = (screenWidth-$('#loader').width())/2;
			$('#loader').css({'top':loaderY, 'left':loaderX});
			// set the height of Roller Tape depending of the height of the header
			rollerHeight = (conHeight - $('#header').height() - $('#footer').height());
			$('#rollerTape').css({'height':rollerHeight});
			// Sombras
			somWidth= 200*screenWidth/1680;
			$('.som-left').css({'height':rollerHeight,'width':somWidth});
			$('.som-left img').css({'height':rollerHeight,'width':somWidth});
			$('.som-right').css({'height':rollerHeight,'width':somWidth});
			$('.som-right img').css({'height':rollerHeight,'width':somWidth}); 
			$('#sombras').css({'top':$('#header').height()});
			// Controls
			controlsHeight = parseInt($('#rollerTape').height()/3);
			Ycontrols = screenHeight-$('#footer').height()-controlsHeight-15;
			$('#nav-controls').css({'height':controlsHeight,'top':Ycontrols});
			XcontrolsBT = ($('#nav-controls').width() - $('#controls-box').width())/2;
			YcontrolsBT = ($('#nav-controls').height() - $('#controls-box').height());
			$('#controls-box').css({'left':XcontrolsBT,'top':YcontrolsBT});
			// MESSAGE BOX
			if(screenHeight > screenWidth){
				$('#message-box').css({'width':290,'height':283,'top':$('#header').height()+10,'left':15});
			} else {
				$('#message-box').css({'width':450,'height':125,'top':$('#header').height()+10,'left':15});
			}
			if(screenHeight > screenWidth){
				$('#message-box-2').css({'width':290,'height':283,'top':$('#header').height()+10,'left':15});
			} else {
				$('#message-box-2').css({'width':450,'height':125,'top':$('#header').height()+10,'left':15});
			}
			// Running Functions
			set_Width_rollTape();
			set_Images();
			set_Controls();
			set_Nav();
		}
		/* --------------------------------- */
		// WIDTH ROLLER TAPE
		/* --------------------------------- */
		// get the Width of the RollerTape depending of the height of the screen.
		function set_Width_rollTape(){
			$.ajax({
			  url: 'countImages.php',
			  type: "GET",
			  data: "rollerHeight="+rollerHeight,
			  success: function(data) {
				rollerWidth = parseInt(data);		
				$('#rollerTape').css({'width':rollerWidth});
				maxRight = rollerWidth*-1;
			  }
			});
		}
		/* --------------------------------- */
		// PRELOAD IMAGES
		/* --------------------------------- */
		function preload_Image(source){
			var img = new Image();
			$(img).load(function () {
				$(this).hide();
				$('#rollerTape').append(this);
				$(this).fadeIn(function(){
					nImgWidth = $(this).width();
					aImgsWidth.push(nImgWidth);
					// when finished load
					if(countImg <= nImgs){
						set_Images();
					}
				});
			}).error(function () {
			  // notify the user that the image could not be loaded
			})
			// *finally*, set the src attribute of the new image to our image
			.attr('src', source);
		}
		/* --------------------------------- */
		// SET IMAGES
		/* --------------------------------- */
		function set_Images(){
			preload_Image('_content/images/IMG_thumbnail.class.php?photo='+countImg+'.jpg&modo=miniatura&maxHeight='+rollerHeight);
			countImg++;
			percen = Math.round( (countImg*100)/nImgs );
			$('#loader').children('div').html(percen + "%");
			if(countImg==exLoadImages){
				$('#rollerTape').animate({
				 	opacity: 1
				}, 800, function() {
					// Animation complete.
					$('#loader').hide();
					moving = true;
					playLeft = true;
					set_Move();
				});
			}
			
		}
		/* --------------------------------- */
		// SET MOVEMENT
		/* --------------------------------- */		
		function set_Move(){
			velocity = paramVelocity;
			if(moving == true){
				rollerInterval  = setInterval(move_RollerTape, rollerVel);								
			} else {
				stopInterval  = setInterval(stop_RollerTape, rollerVel);
			}
			sumImages = aImgsWidth[0];
		}
		/* --------------------------------- */
		// MOVE ROLLER TAPE
		/* --------------------------------- */
		
		function move_RollerTape(){
			if(playLeft == true){
				rollerX -= velocity;
				$('#rollerTape').css({'left':rollerX});
				// makes the loop
				if(rollerX <= maxRight){
					rollerX = screenWidth;
				}
			}
			if(playRight == true){
				rollerX += velocity;
				$('#rollerTape').css({'left':rollerX});
				// makes the loop
				if(rollerX >= screenWidth){
					rollerX = (maxRight);
				}
			}	
		}
		// STOP ROLLER TAPE
		function stop_RollerTape(){
			if(velocity > 0){
				velocity = velocity*0.95;
				if(velocity <0.1){velocity = 0;}				
			} else {
				playLeft = false;
				playRight = false;
				clearInterval(rollerInterval);
				clearInterval(stopInterval);
			}
		}
		/* --------------------------------- */
		// CONTROLS
		/* --------------------------------- */
		function set_Controls(){
			$('.button-control').hide();
			$('#nav-controls').hover(function(){
					$('.button-control').fadeIn('slow');
			}, function(e){
				$('.button-control').fadeOut('slow');
			});	
			$('.stopBT').click(function(){
				if(moving == true){
				  moving = false;
				  set_Move();
				}
			});
			$('.stopBT').hover(function(){
				$(this).css('cursor','pointer');	
			},function(e){
				$(this).css('cursor','');	
			});
			// play to left
			$('.play-2-BT').click(function(){
				if(playLeft == false){					
					moving = false;
					clearInterval(rollerInterval);
					playLeft = true;
					playRight = false;
					moving = true;
					set_Move();
				}
			});
			$('.play-2-BT').hover(function(){
				$(this).css('cursor','pointer');	
			},function(e){
				$(this).css('cursor','');	
			});
			// play to right
			$('.play-1-BT').click(function(){		
				if(playRight == false){					
					moving = false;
					clearInterval(rollerInterval);
					playLeft = false;
					playRight = true;
					moving = true;
					set_Move();
				}
			});
			$('.play-1-BT').hover(function(){
				$(this).css('cursor','pointer');	
			},function(e){
				$(this).css('cursor','');	
			});
		}
		/* --------------------------------- */
		// NAVIGATION
		/* --------------------------------- */
		function set_Nav(){
			// Logotipo
			$('#message-box').hide();
			$('#logo').hover(function(){$(this).css('cursor','pointer');},function(e){$(this).css('cursor','');});
			$('#logo').click(function(){
				$('#message-box').animate({
				  opacity: 'toggle'
				}, 300);
				$('#message-box-2').hide();
			});
			$('.closeBT').click(function(){
				$('#message-box').animate({
				  opacity: 'toggle'
				}, 300);	
			});
			// Contact
			$('#message-box-2').hide();
			$('#nav-1').hover(function(){$(this).css('cursor','pointer');},function(e){$(this).css('cursor','');});
			$('#nav-1').click(function(){
				$('#message-box-2').animate({
				  opacity: 'toggle'
				}, 300);
				$('#message-box').hide();
			});
			$('.closeBT-2').click(function(){
				$('#message-box-2').animate({
				  opacity: 'toggle'
				}, 300);
			});
		}