// shim layer with setTimeout fallback

// Apple detection object  
var Apple = {};
Apple.UA = navigator.userAgent;
Apple.Device = false;
Apple.Types = ["iPhone", "iPod", "iPad"];
for (var d = 0; d < Apple.Types.length; d++) {
    var t = Apple.Types[d];
    Apple[t] = !!Apple.UA.match(new RegExp(t, "i"));
    Apple.Device = Apple.Device || Apple[t];
}
        


window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
          };
})();



YELL.Comentarios = function(config){
	
	var _that,
		_theLi,
		_actual=0,
		_maximo,
		_theInterval;
			
	
	this.init = function(){
		_that = this;
		_theLi = $(config.selector);
		_theLi.css("display","none");
		_theLi.eq(0).css("display","block");
		
		_maximo =_theLi.length;
		
		_theInterval = setInterval(function(){_that.nextElement()},4000);
		
		
	}
	
	
	this.nextElement = function(){
		
		
		_theLi.fadeOut("fast",function(){});

		var selectedOBJ = _theLi.eq(_actual);
		$("#feed").removeAttr("class").addClass(selectedOBJ.attr("data-class"));
		
		selectedOBJ.fadeIn("fast",function(){
			_actual++;
			if(_actual>=_maximo){_actual=0;}
		})
		
		
	}
	

	this.init();
}

YELL.Visor = function(){
	
	var _that,
		_sizeX,
	 	_sizeY,
	 	_Apple,
	 	_theVisorDiv,
	 	_that=this,
	 	_windowHalfX,
	 	_maximumX,
	 	_offsets,
	 	_divIphone,
	 	_divVisorOn,
	 	_mouseX,
	 	_xPosicionIphone,
		_yPosicionIphone,
		_actualCoordX,
		_claim,
		_actualCoordY,
	 	_iphoneWidth=553,
	 	_iphoneHeight=290,
	 	_bckX=0,
	 	_preloadIMG=0;

	
	
	this.init=function(){
		
		_that=this;
		
		
		if(Apple.iPhone || Apple.iPad || Apple.iPod){
    		_Apple = true;
	    }else{
	    	_Apple=false;    	
	    }
		
		_theVisorDiv = $("#visor-reality");//div visor global
		_divIphone = $("#iphone-visor");//div iphone
		_divVisorOn = $("#visor-on");//div iphone
		_offsets = _theVisorDiv.offset();//offset DIV visor
		_windowHalfX = parseInt($(window).innerWidth()/2);
		
		
		_claim=$("#visor-claim");//div iphone
		
		this.preload();
		
		//listener	
		if(!_Apple){
			$(document).mousemove(function(e){_that.update(e);});
		}else{
			_theVisorDiv.bind("touchmove",function(e){
				e.preventDefault();				
				_that.update(e);
			});
		}
		
	}
	
	
	
	
	this.checkPreloadComplete=function(){
		if(_preloadIMG>=3){
			_that.showVisor();
			
		}
		
	}
	
	this.showVisor = function(){		
		_theVisorDiv.fadeIn("fast",function(){
			//al estar dentro de un div/scroll/carrusel los offsets deben calcularse desde el clipper
			//_offsets = _theVisorDiv.offset();			
			_offsets = $("#carrousel").offset();

		});
	}
	
	
	this.preload = function(){
		
		
		$("<img />").load(function(){
			_preloadIMG++;
			_that.checkPreloadComplete();
		}).attr("src","visor/visor-escenario.jpg");
		
		$("<img />").load(function(){
			_preloadIMG++;
			_that.checkPreloadComplete();
		}).attr("src","visor/visor-on.png");
		
		$("<img />").load(function(){
			_preloadIMG++;
			_that.checkPreloadComplete();
		}).attr("src","visor/iphone.png");
		
	}
	
	
	this.update = function(e){
		//posicion cursor
		
		//console.log($(window).scrollTop())
		var auxScroll = $(window).scrollTop();
		
		if(!_Apple){
			_mouseX=parseInt(e.clientX-_offsets.left);
			_mouseY=parseInt(e.clientY-_offsets.top)+auxScroll;
		}else{
			var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			
			
			_mouseX=parseInt(touch.pageX-_offsets.left);
			_mouseY=parseInt(touch.pageY-_offsets.top);
			
		}
		
		_xPosicionIphone= parseInt(_mouseX-(_iphoneWidth/2));
		_yPosicionIphone= parseInt(_mouseY-(_iphoneHeight/2));

		if(_xPosicionIphone<=0){
			_xPosicionIphone=0;
		}
		if(_xPosicionIphone>=393){
			_xPosicionIphone=393;
		}
		if(_yPosicionIphone<=0){
			_yPosicionIphone=0;
		}
		if(_yPosicionIphone>=54){
			_yPosicionIphone=54;
		}
		this.render();
	}
	
	

	this.resetVisor = function(){
		_that.showClaim();
		
		_divIphone.css({
			marginLeft:"350px",
			marginTop:"20px"
		});
		
		
		var newPosX = _bckX
		
		_actualCoordX = _divIphone.css("marginLeft").replace("px","");			
		_actualCoordX = parseInt(_bckX-_actualCoordX);

		_divVisorOn.css({
			marginLeft:"445px",
			marginTop:"50px",
			backgroundPosition:(_actualCoordX+50)+"px -50px"
		});
		
		
	}
	
	this.showClaim=function(){
		_claim.stop(true,true).fadeIn("fast");
	}
	this.hideClaim=function(){
		//console.log("hideClaim");
		_claim.stop(true,true).fadeOut("fast");
	}
	
		
	this.render = function(){
		
		
		
		if(_mouseY>0 && _mouseY<346 && _mouseX>0 && _mouseX<950){
			
			//console.log("_mouseX >> " + _mouseX);
			
			
				//movimiento derecha
				if(_mouseX>480 && _mouseX<950){
					var coordAceleracion = _mouseX-480;
					_bckX = _bckX-(coordAceleracion*.03);
					
					_actualCoordY = _divVisorOn.css("marginTop").replace("px","");
					
					
					if(-1450>_bckX){
						_bckX = -1450;
					}
					
					
					_actualCoordX = _divVisorOn.css("marginLeft").replace("px","");			
					_actualCoordX = parseInt(_bckX-_actualCoordX-95);
					
					
					_divVisorOn.css("backgroundPosition",(_actualCoordX+50)+"px -"+(parseFloat(_yPosicionIphone))+"px");
					_theVisorDiv.css("backgroundPosition",_bckX+"px 0");
				
					
					
					
				}else if(_mouseX<480 && _mouseX>0){
					
					
					//movimiento izquierda
					var coordAceleracion = 480-_mouseX;
					
					_bckX=_bckX+((coordAceleracion*.03));
					
					
					if(_bckX>=-3){
						_bckX=0;
					}
					
					
					_actualCoordX = _divVisorOn.css("marginLeft").replace("px","");
					_actualCoordX = parseInt(_bckX-_actualCoordX-95);
					_divVisorOn.css("backgroundPosition",(_actualCoordX+50)+"px -"+(parseFloat(_yPosicionIphone))+"px");
					_theVisorDiv.css("backgroundPosition",_bckX+"px 0");

				}
				
		
		
						
				//coord X iphone
				_divIphone.css({
					"marginLeft":_xPosicionIphone,
					"marginTop":_yPosicionIphone
				});
		
		
				_divVisorOn.css({
					"marginLeft":_xPosicionIphone+95,
					"marginTop":_yPosicionIphone+20
				});
		
		}
		
		
	}
	
	

	//constructor
	this.init();
	
	
}