// APARTADO OVERVIEW

$(document).ready(function() {

	// precarga de imágenes del CSS
	$.preloadCssImages();

	// precarga de tira de imágenes secuencial
    var preload = new Array();
    var contPreload = 0;
    
    function preloadImage() {
    	// cargamos una imagen    	
    	$('<img />')
	    .attr('src', preload[contPreload][0])
	    .attr('alt', preload[contPreload][1])
    	.load(function(){
    		// cuando se ha cargado la mostramos
			$('#'+this.alt).fadeIn('slow');
			preloadNextImage();
    	});
    }
    
    function preloadNextImage(){
    	contPreload++;
    	if (contPreload < preload.length) preloadImage(contPreload);
    }
    
    // arrancamos la precarga
    if (!$.browser.msie) {
	    $("#overview_down img").each(function() {
			// ocultamos cada imagen
	       	$(this).hide();
	       	// y guardamos sus datos en el array de precarga
	        preload.push([this.src, this.id]);
	    });
	    
	    if (preload.length > 0) preloadImage(contPreload);
	    else $('#overview_no_results').fadeIn('slow');
	} else {
		$("#overview_down img").each(function() {
	       	// y guardamos sus datos en el array de precarga
	        preload.push([this.src, this.id]);
	    });
	    if (preload.length > 0) {
			$("#overview_down img").each(function() {
				$(this).fadeIn('slow');
			});
		} else $('#overview_no_results').fadeIn('slow');
	}

/*
	// precarga directa, sin ser secuencial
	
	$("#overview_down img").each(function() {
		// ocultamos cada imagen
       	$(this).hide();
       	// y la precargamos
        $('<img />')
	    .attr('src', this.src)
	    .attr('alt', this.id)
    	.load(function(){
    		// cuando se ha cargado la mostramos
			$('#'+this.alt).fadeIn();
    	});
    });
*/
    
	
	function blancoButton(element, bckPos, bckPosBack) {
		element.css("backgroundPosition", bckPos);
		element.animate({opacity: 1}, "normal", function(){
			$(this).css("backgroundPosition", bckPosBack);
		});
	}
	
	$('#search').click(function() {
		if ($(this).val()=="SEARCH PROJECT") $(this).val("");
	});
	
	// de entrada marcamos "all"
	var tagSelected = "all";
	$('#tag-'+tagSelected).css("backgroundPosition","0px -14px");
	
	
	$('#tags li').click(function() {
		var idTag = this.id.split("tag-")[1];
		
		// desmarcamos el anterior
		$('#tag-'+tagSelected).css("backgroundPosition","");
		$('#overview_no_results').hide();
		
		// marcamos el nuevo
		tagSelected = idTag;
		blancoButton($(this), "0px -28px", "0px -14px");
		
		// cargamos las suyas
		var anyProject = false;
		
		if (tagSelected == "all"){
			$("#overview_down img").each(function() {
				$(this).fadeIn('slow');
			});
			 if (preload.length > 0) anyProject = true;
		} else {
			// obtenemos los ids de este tag porque están almacenados en la clase
			var ids = $(this).attr('class').split(" ")[0].split("|");
			
			// recorremos todos y vemos cuáles ocultar y cuales mostrar
			$("#overview_down img").each(function() {
				var idThumb = this.id.split("thumb-")[1];
				
				var ocultar = true;
				for (var i=0; i<ids.length; i++) if (idThumb==ids[i]) ocultar = false;
				if (!ocultar) anyProject = true;
				
				$(this).hide();
				if (!ocultar) $(this).fadeIn('slow');
			});
		}
		
		if (!anyProject) $('#overview_no_results').fadeIn('slow');
		
		// recolocamos la caja de búsqueda
		if (resizeTimer) clearTimeout(resizeTimer);
		resizeTimer = setTimeout(searchResize, 300);
		
	});
	
	// buscador
	
	$('#overview_search .search_overview').click(function() {
		blancoButton($(this), "0px -28px", "");
		searchProject();
		return false;
	});
	
	function searchProject() {
		var projectValue = $('#search').val();
		
		document.location.href = (projectValue=='')? "overview.php" : "overview.php?search="+projectValue;
	}
	
	
	
	// over proyectos
	var projectSelected = 0;
	$('#overview_ficha').css("opacity", 0).show();

	// el rollover es sobre la imagen
	$('#overview_down img').mouseover(function() {
		projectSelected = this.id.split("thumb-")[1];
		showFicha(this);
		return false;
	});
	
	function showFicha(obj) {
	
		var dataAlt = obj.alt.split("|");
		var projectName = dataAlt[0];
		var projectImages = dataAlt[1]+" image";
			if (dataAlt[1]!=1 && dataAlt[1]!="1") projectImages += "s";
		var projectVideos = "<br />"+dataAlt[3]+" video";
			if (dataAlt[3]!=1 && dataAlt[3]!="1") projectVideos += "s";
			if (dataAlt[3]==0 || dataAlt[3]=="0") projectVideos = "";
		var projectDate = "+ Added <strong>"+dataAlt[2]+"</strong>";
		
		$("#overview_ficha .ficha_cliente").html(projectName);
		$("#overview_ficha .ficha_imgs").html(projectImages+projectVideos);
		$("#overview_ficha .ficha_fecha").html(projectDate);
		
		var objLeft = objTop = 0;
		var objWidth = $(obj).width();
		var objHeight = $(obj).height();
		
		if (obj.offsetParent) {
			do {
				objLeft += obj.offsetLeft;
				objTop += obj.offsetTop;
			} while (obj = obj.offsetParent);
		
		}
	
		$('#overview_ficha').css("left", (objLeft)+"px").css("top", (objTop)+"px").css("width", (objWidth-22-2)+"px").css("height", (objHeight-22-2)+"px");
		$('#overview_ficha').stop().css("opacity", 0).fadeTo('fast', 1);
		
		$('#overview_ficha_tapa').css("left", objLeft+"px").css("top", objTop+"px").css("width", objWidth+"px").css("height", objHeight+"px");
		$('#overview_ficha_tapa').show();
	}

	// el rollout es sobre la tapa
	$('#overview_ficha_tapa').mouseout(function() {
		projectSelected = 0;
		$('#overview_ficha').stop().fadeTo('fast', 0, moveFichaOut);
		$('#overview_ficha_tapa').hide();
		return false;
	});

	function moveFichaOut() {
		$('#overview_ficha').css("left", "200px").css("top", "0px").css("width", "10px").css("height", "10px");
	
	}
	
	// el click es en la tapa también
	
	$('#overview_ficha_tapa').click(function() {
		var isFFox = $.browser.mozilla;
		var isSafari = $.browser.safari;
		var browserDetection = (isFFox || isSafari)? "" : "bd=false&";
		document.location.href = "http://www.serialcut.com/?"+browserDetection+"project="+projectSelected;
		return false;
	});
	
	
});

$(window).load(function() {
	
	// posicionamiento de la caja de búsqueda
	$('#overview_search').css("top", $('#tags').position().top).css("left", $('#tags').position().left + $('#tags').width()).css('opacity', 0);
	$('#overview_search').show();
	
	searchResize();
	
	$(window).bind('resize', function() {
		if (resizeTimer) clearTimeout(resizeTimer);
		resizeTimer = setTimeout(searchResize, 100);
	});
	
});

var resizeTimer = null;

function searchResize() {
	var posMaxX = 0;
	var posTempX = 0;
	var imgs = $('#overview_down img:visible');
	var i = 0;
	while (i<imgs.length && posTempX >= posMaxX){
		var image = $(imgs.get(i));
		//alert(i+">>"+image);
		posTempX = image.position().left + image.width();
		if (posTempX >= posMaxX) posMaxX = posTempX;
		i++;
	}
	
	var posSearch = posMaxX - $('#overview_search').width();
	var posMinX = $('#tags').position().left + $('#tags').width();
	
	if (posSearch<posMinX) posSearch = posMinX;
	
	$('#overview_search').animate({opacity: 1}, "normal");
	$('#overview_search').animate({left: posSearch+"px"}, "normal");
}