var isIE = false;

$(document).ready(function(){

	isIE = $.browser.msie;
	$(document).pngFix(); 

	// cargamos el primer proyecto a mostrar
	loadFirstProject();
});


$(window).resize(function(){
	// gestión del resize de la ventana
	resizeImageSCut();
});
		
// resize y galería de imágenes
var imgCenter = "#image_center";
var imgLeft = "#image_left";
var imgRight = "#image_right";
var imgUp = "#image_up";
var imgDown = "#image_down";

function resizeImageSCut() {
	// resize de las imágenes de fondo para encajar en pantalla
	
	// ratio proporcional de la ventana del navegador
	var navWidth = $(window).width();
	var navHeight = $(window).height();
	var navRatio = navWidth / navHeight;

	// ratio proporcional de la imagen
	if ($('#main_image').width() > 1) picWidth = $('#main_image').width();
	if ($('#main_image').height() > 1) picHeight = $('#main_image').height();
	picRatio = picWidth / picHeight;
	
	// escala resultante
	if (navRatio > picRatio) {
		// escalamos la imagen para ajustarse al ancho del navegador
		var newHeight = (navWidth / picWidth) * picHeight;
		var newWidth = navWidth;
	} else {
		// escalamos la imagen para ajustarse a la altura del navegador
		var newHeight = navHeight;
		var newWidth = (navHeight / picHeight) * picWidth;
	}
	
	// centramos la imagen
	newTop = 0 - ((newHeight - navHeight) / 2);
	newLeft =  0 - ((newWidth - navWidth) / 2);

	// colocamos todas
	$('#image_holder').css({height: navHeight, width: navWidth});
	$('#image_holder').css({visibility:"visible", display:"block"});
	
	$('.main_image').css({height: newHeight, width: newWidth});
	
	// centro y aledañas...
	$(imgCenter).css({top: newTop, left: newLeft});
	$(imgLeft).css({top: newTop, left: newLeft-newWidth});
	$(imgRight).css({top: newTop, left: newLeft+newWidth});
	$(imgUp).css({top: newTop-newHeight, left: newLeft});
	$(imgDown).css({top: newTop+newHeight, left: newLeft});
	
	resizeElementsSCut();
}

function resizeElementsSCut() {
	var navWidth = $(window).width();
	var navHeight = $(window).height();
	
	// también colocamos los anterior/siguiente centrados
	var navProjectTop = (navHeight-$('#project_navigation .project_previous').height())/2;
	$('#project_navigation .project_previous').css("marginTop", navProjectTop+"px");
	$('#project_navigation .project_next').css("marginTop", navProjectTop+"px");
	
	var navProjectWidth = navWidth/2-100;
	$('#project_navigation_previous').width(navProjectWidth);
	$('#project_navigation_next').width(navProjectWidth);
	
	// también centramos la precarga
	var preloadTop = (navHeight-40)/2;
	var preloadLeft = (navWidth-40)/2;
	$('#project_preload').css({top: preloadTop, left: preloadLeft});
	
	// y porque no.. centremos el vídeo
	var videoTop = (navHeight-496)/2;
	var videoLeft = (navWidth-640)/2;
	$('#video').css({top: videoTop, left: videoLeft});
}


function blancoButton(element, bckPos, bckPosBack) {
	element.css("backgroundPosition", bckPos);
	element.animate({opacity: 1}, "normal", function(){
		$(this).css("backgroundPosition", bckPosBack);
	});
}


function preloadImage(source, nextEvent) {
   	// tapamos y precargamos una imagen
  // 	if (isIE) $(this).oneTime(50, "preload", nextEvent);
  // 	else {
		$('#project_tapa').show();
		if (imageActual!=1 || !projects[projectActual][1]){
		    $('<img />').attr('src', source).load(function(){
				// ocultamos la precarga y mostramos
				if (imageActual==1) projects[projectActual][1] = true;
				//$('#project_tapa').stop().fadeOut('slow');
				$(this).oneTime(500, "preload", nextEvent);
			});
		} else {
			//$('#project_tapa').stop().fadeOut('slow');
			$(this).oneTime(250, "preload", nextEvent);
		}
	//}
}

function preloadNext() {
	// precargamos una imagen
	preloadActual++;
	if (preloadActual==projects.length) preloadActual = 1;
	preloadActual = getNextToPreload();
	if (preloadActual != -1){
	var source = getPreloadImageSourceActual();
		$('<img />').attr('src', source).load(function(){
			projects[preloadActual][1] = true;
			//alert("precargado el..."+preloadActual)
			preloadNext();
		});
	}
}

function getNextToPreload() {
	if (!projects[preloadActual][1]) return preloadActual;
	else {
		var someToPreload = -1;
		for (var i=preloadActual; i<projects.length; i++){
			if (!projects[i][1]){
				someToPreload = i;
				break;
			}
		}
		if (someToPreload == -1){
			for (var i=1; i<preloadActual; i++){
				if (!projects[i][1]){
					someToPreload = i;
					break;
				}
			}
		}
		return someToPreload;
	}
}

function hideVideo() {
	var waitTime = 10;
	if (isVideo){
		waitTime = 1000;
		$('#video').stop().animate({top:"-500px"}, 1000, function(){
			$('#video').html('').hide();
		});
	}
	
	return waitTime;
}

function showVideo() {
	if (isVideo){
		// cargamos el vídeo actual
		var idVideo = projects[projectActual][0].split('|')[imageActual-1];
			idVideo = idVideo.split("VIDEO")[0];
		var videoSource = imagePath+idVideo+".mov";
		
		$('#video').html('<object width="640" height="496" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" align="top"><param name="bgcolor" value="#000000"><param name="cache" value="true"><param name="src" value="'+videoSource+'"><param name="autoplay" value="true"><param name="controller" value="true"><embed width="640" height="496" src="'+videoSource+'" align="top" pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" controller="true" autoplay="true" cache="true" bgcolor="#000000"></object>').show();
		
		// lo mostramos
		var navHeight = $(window).height();
		var videoTop = (navHeight-496)/2;
		$('#video').stop().css("top", "-500px").show();
		
		$(this).oneTime(100, function() {
			$('#video').animate({top:videoTop+"px"}, 1000);
		});
	}
}

function hideProjectData() {
	if (isIE){
		$('#image_data').hide();
	} else {
		$('#image_data').stop().fadeTo('fast', 0);
	}
	$('#image_data_navigation').stop().fadeTo('fast', 0);
}

function showProjectData() {
	// cargamos los datos buenos
	//var imageDataSource = imagePath+"proyecto_titulo_"+projectActual+".png";
	var idImage = "";
	var imageDataSource = "";
	
	var title = ""
	var desc = (isIE)? "<img src='"+imageDataSource+"' /><br /><br />" : "";
		desc += "";
	var link = "";
	var numImages =1;
	
	$('#image_data h1').html(title);
	$('#image_data h1').css("backgroundImage", "url('"+imageDataSource+"')");
	$('#image_data p:eq(0)').html(desc);
	$('#image_data p:eq(1)').html(link);
	
	$('#image_data_navigation .image_number').html("Image 1 of "+numImages);
	
	if (link=="") $('#image_data p:eq(1)').hide();
	else $('#image_data p:eq(1)').show();
	if (isIE){
		$('#image_data').show();
	} else {
		$('#image_data').show();
		$('#image_data').stop().css("opacity", 0).fadeTo('slow', 1);
	}
	
	if (numImages > 1){
		$('#image_data_navigation').show();
		$('#image_data_navigation').stop().css("opacity", 0).fadeTo('slow', 1);
	}
	
	// aprovechamos aquí y mostramos/ocultamos los +/-
//	toggleProjectPrevious(projectActual==1);
//	toggleProjectNext((projectActual==(projects.length-1)));
	
	toggleImagePrevious(true);
	toggleImageNext((numImages==1));
	
	if (isIE) resizeImageSCut();
}



function toggleImagePrevious(hideOrShow) {
	if (hideOrShow){
		$('.image_previous').css({cursor:"default", opacity:0.5, backgroundPosition:"0px 0px"});
		$('.image_previous').unbind("click").click(function() { return false; });
	} else {
		$('.image_previous').css({cursor:"pointer", opacity:1, backgroundPosition:""});
		$('.image_previous').unbind("click").click(function(e) {
			showPreviousImage();
			blancoButton($(this), "0px -28px", "");
			e.preventDefault();
		});
	}
}

function toggleImageNext(hideOrShow) {
	if (hideOrShow){
		$('.image_next').css({backgroundPosition:"0px 0px", cursor:"default", opacity:0.5});
		$('.image_next').unbind("click").click(function() { return false; });
	} else {
		$('.image_next').css({backgroundPosition:"", cursor:"pointer", opacity:1});
		$('.image_next').unbind("click").click(function(e) {
			showNextImage();
			blancoButton($(this), "0px -28px", "");
			e.preventDefault();
		});
	}
}


function getImageSourceActual(){

	var idImage = projects[projectActual][0].split('|')[imageActual-1];
	var imageSource = imagePath+idImage;
	
	// comprobamos si es un vídeo o no
	if (idImage.indexOf("VIDEO")!=-1){
		//imageSource = imagePath+"video_background.jpg";
		imageSource = imageSource.split("VIDEO")[0];
		isVideo = true;
	} else {
		isVideo = false;
	}
	
	return imageSource;
}

function getPreloadImageSourceActual(){

	var idImage = projects[preloadActual][0].split('|')[0];
	var imageSource = imagePath+idImage+".jpg";
	//if (idImage.indexOf("VIDEO")!=-1) imageSource = imagePath+"video_background.jpg";
	if (idImage.indexOf("VIDEO")!=-1) imageSource = imageSource.split("VIDEO")[0];
	
	return imageSource;
}

function loadFirstProject() {
	// cargamos la imagen del proyecto actual y sus datos
	hideVideo();
	resizeElementsSCut();
	
	// conseguimos el imageSource del array:
	var imageSource = getImageSourceActual();
	
	preloadImage(imageSource, loadFirstProjectEnd);
}

function loadFirstProjectEnd() {
	var imageSource = getImageSourceActual();
	
	$(imgCenter)[0].src = imageSource;
	resizeImageSCut();
	showProjectData();
	showVideo();
	$('#image_holder').css({opacity:0}).fadeTo(1000, 1);
	
	if (!isIE) {
		projects[projectActual][1] = true;
		preloadNext();
	}
	
	$('#project_tapa').stop().fadeOut('slow');
}

function showDirectProject(n) {
	// ir directo al proyecto n
	// se busca en el array el ID con quién coincide en el array
	var nP = 0;
	for (var i=1; i<projects.length; i++){
		if (projects[i][0]==n) nP = i;
	}
	
	if (nP>projectActual){
		projectActual = nP-1;
		showNextProject();
	} else {
		projectActual = nP+1;
		showPreviousProject();
	}
}