var isiOS = false;
var viewportSize;

var lastSlide = 1;
var slides = 3;
var run = 0;
var speed = 5000;

jQuery(document).ready(function($) {
	var viewport = $('meta[name="viewport"]');
	var nua = navigator.userAgent;
		
		if (nua.match(/iPad/i)) {
			viewport.attr('content', 'width=988');
			isiOS = true;
			viewportSize = 988;
		}
	
		if ((nua.match(/iPhone/i)) || (nua.match(/iPod/i))) {
			viewport.attr('content', 'width=494, minimum-scale=0.6, maximum-scale=1.0, user-scalable=no');
			isiOS = true;
			viewportSize = 494;
		}
		
		//Iniciamos el slider del home
		//Si el PAGER existe, es porque hay slider
		if ($("#pager").length > 0){
			$('#c1').click(function(){ setSlider(1);});
			$('#c2').click(function(){ setSlider(2); });
			$('#c3').click(function(){ setSlider(3); });
			$('#c' + lastSlide).css({'background-color': "#5da9dd"});
			run = setInterval("nextSlide()", speed);
		}
		
		//Si existen los thumbs del portfolio
		//iniciamos las acciones de estos thumbs
		if ($("#wrapper .thumbs").length > 0){
			bindHovers();
		}
	});
	
	function pageWidth() {
		if(isiOS){
			return viewportSize;
		} else {
			return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;
		}
	}
	
	function resizeWrapper() {
		
		var viewport = $('meta[name="viewport"]');
		var nua = navigator.userAgent;
	
		//oneColumn = 476;
		twoColumns = 980;
		threeColumns = 1472;
		
		screenWidth = pageWidth();
		wrapperDIV = document.getElementById('wrapper');
		moduleTopDIV = document.getElementById('moduleTOP');
		
		if(screenWidth > threeColumns){
			wrapperDIV.style.width = (threeColumns + 4) +'px';
			moduleTopDIV.style.width = threeColumns +'px';
			
		} else if (screenWidth < threeColumns && screenWidth >= twoColumns ){
			wrapperDIV.style.width = (twoColumns + 4) +'px';
			moduleTopDIV.style.width = twoColumns +'px';
			
		} else {
			//wrapperDIV.style.width = oneColumn +'px';
		}
	}
	
	function bindHovers() {
		
		var options = {},
			step,
			interval;
		$("#wrapper .thumbs a").hover(function(e){
			/* rollover */
			step = 2;
			element = $(this);	
			element.css("left","-490px"); /* firt rollover screen */
			interval = setInterval(function(){
				element.css("left", "-980px");
				if(step === 3){
					clearTimeout(interval);
				}
				step++;
			}, 500);
		}, function(){
			/* rollout */
			clearTimeout(interval);
			$(this).css("left","0px");
			step = 2;
		});
	};
	
	function setSlider(goto){
		//rotation speed and timer
		clearInterval(run);
		run = setInterval("nextSlide()", speed);   
		 
		//grab the width and calculate left value
		var item_height = 345; 
		var top_value = item_height * (-1); 
		
		for (x = 1; x <= slides; x++){
			if(x != lastSlide && x != goto){
				var imageOther = '#images #s' + x;
				var bulletOther = '#pager #c' + x;
			}
		}
		
		//image that moves out of slider
		var imageOut = '#images #s' + lastSlide;
		var imageIn = '#images #s' + goto;
		
		var bulletInactive = '#pager #c' + lastSlide;
		var bulletActive = '#pager #c' + goto;
		
		lastSlide = goto;
		
		//
		$(imageIn).css({'z-index': 998});
		$(imageOut).css({'z-index': 997});
		$(imageOther).css({'z-index': 996});
		$(imageIn).css({'top': item_height});
		$(imageOut).css({'top': 0});
		$(imageOther).css({'top': item_height});
		
		$(bulletOther).css({'background-color': "#333"});
		$(bulletInactive).css({'background-color': "#333"});
		$(bulletActive).css({'background-color': "#5da9dd"});
		
		//Slide animation
		//Movemos hacia arriba el nuevo slide"
		$(imageIn).animate({'top': 0}, 500, 'easeInOutExpo');
		
		//Sacamos el slide anterior
		$(imageOut).animate({'top': top_value}, 500, 'easeInOutExpo');
	}
	
	function nextSlide(){
		clearInterval(run);
		
		if(lastSlide < slides){
			var nextImg = lastSlide + 1;
		} else {
			var nextImg = 1;
		}
		
		setSlider(nextImg);
	}