jQuery.ajaxSetup({cache:true});

var hover_desplaza=0;
var offset=0;
var num_elementos_pag=10;

function loading_on()
{
	if( !$('#loader').length )
		$('body').append('<div id="loader"><div class="tras"></div><div class="lod">CARGANDO</div></div>');
	$('#loader .tras').css('opacity','0.5');
	$('#loader').css('z-index','1000000');
}

function loading_off()
{
	$('#loader').remove();
}

//Recibe un identificador del elemento canvas y carga el canvas
//Devueve el contexto del canvas o FALSE si no ha podido conseguise
function cargaContextoCanvas(idCanvas){
   var elemento = document.getElementById(idCanvas);
   if(elemento && elemento.getContext){
      var contexto = elemento.getContext('2d');
      if(contexto){
         return contexto;
      }
   }
   return false;
}

//Limpia completamente el canvas para redibujar, no se si es estrictamente necesario.
function limpiaCanvas() {
	var contexto = cargaContextoCanvas('micanvas');
	contexto.clearRect ( 0 , 0 , contexto.canvas.width , contexto.canvas.height );
}

//Redibujamos los circulos y la banda negra de fondo del menu.
function dibujaFondo() {	
	var anchoVisor = $(window).width();
	var altoVisor = $(window).height();

	//Recibimos el elemento canvas
	if(contexto = cargaContextoCanvas('micanvas')){
		contexto.canvas.width = anchoVisor;
		contexto.canvas.height = altoVisor;
		//el origen de los circulos será el 12% del ancho de pantalla
		var centro = anchoVisor * 0.12;
		//calculo el tamaño de los circulos
		radioInterior = anchoVisor * 0.40;
		radioExterior = radioInterior + 41;
		//dibujo el circulo exterior
		contexto.fillStyle="#80BCD8";
		contexto.beginPath();
		contexto.arc(centro,centro,radioExterior,0,Math.PI * 2, true);
		contexto.closePath();
		contexto.fill();
		
		contexto.fillStyle="#FFFFFF";
		contexto.beginPath();
		contexto.arc(centro,centro,radioExterior-1,0,Math.PI * 2, true);
		contexto.closePath();
		contexto.fill();
		
		//dibujo la banda negra
		contexto.fillStyle = "#FFF";
		contexto.fillRect(0,0,anchoVisor,35);
		contexto.fillStyle = "#999";
		contexto.fillRect(0,35,anchoVisor,1);
		
		//dibujo el circulo interior
		contexto.fillStyle="#0079B1";
		contexto.beginPath();
		contexto.arc(centro,centro,radioInterior,0,Math.PI*2,true);
		contexto.closePath();
		contexto.fill();
		
		contexto.fillStyle="#FFFFFF";
		contexto.beginPath();
		contexto.arc(centro,centro,radioInterior-1,0,Math.PI*2,true);
		contexto.closePath();
		contexto.fill();
	}else{
		//Habrá que pensar algo para navegadores que no soportan canvas, supongo que simplemente una imagen de fondo para el body
		alert("Tu navegador no soporta Canvas");
	}
}
function reposicionaElementos() {
	
	var anchoVentana = $(window).width();	
	var porcentaje = ( posicionX * 120 ) / anchoVentana;		//Sobredimensionamos a 120% para luego quitar el 10% en cada lado obteniendo un margen.
	porcentaje=porcentaje-10;		//Quitamos el 10%
	
	var anchoMargen=(120/anchoVentana)-10;
	
	if(porcentaje>100)		//Dentro del margen derecho (100% 110%)
	{
		porcentaje=100;
	}
	if(porcentaje<0)		//Dentro del margen izquierdo (-10% 0%)
	{
		porcentaje=0;
	}	
	 		
	if(hover_desplaza)
	{
		if( $('#noticias').length )
		{
			var ultimoNoticias = $('#noticias .noticia:last');
			var anchoNoticias = $('#noticias').outerWidth() /*+ ultimoNoticias.outerWidth()*/ ;
			var destino = (porcentaje * (anchoNoticias - anchoVentana)) / 100;
			var posActual = $("#contnoticias").scrollLeft();
			var incremento = (destino - posActual) / 5;
			var npos = posActual + incremento;
			$('#contnoticias').scrollLeft(npos);
		}
		
		if( $("#trabajos").length )
		{
			//var constante = $('#trabajos').outerWidth() / anchoVentana - 1;
			//$('#trabajos').css('margin-left', -1 * constante * posicionX );
			//var ultimoTrabajos = $("#trabajos .ampliartrabajo:last");
			var anchoTrabajos = $('#trabajos .trabajo:first').outerWidth()*num_elementos_pag /*+ ultimoTrabajos.outerWidth()*/;
			var destino = ( porcentaje * ( anchoTrabajos - anchoVentana ) ) / 100;			
			var posActual = $('#conttrabajos').scrollLeft();
			var incremento = ( destino - posActual ) / 5;
			var desplazamiento=((anchoTrabajos)*offset)/5;			
			var npos = posActual + incremento + desplazamiento;
			
			
			$('#conttrabajos').scrollLeft(npos);			
		}
	}
}

window.onresize = function() {
	limpiaCanvas();
	dibujaFondo();
}

//abre la cortinilla con los detalles del trabajo
function abreCortinilla(t) {
	$("#ampliartrabajo").animate({width: "100%"},500);
	var ajax_load = "<progress><img src='imagenes/cargando.gif' style='margin: 120px 0 0 70px;' /></progress>";
	//jQuery(window).unbind('hashchange');
	//document.location.hash = t;
	EventChangeUrl();
	$("#contenidoTrabajo").html(ajax_load).load(t+'ajax_1/',function(){
		$('#descripcionTrabajo .cajatexto').jScrollPane({
			showArrows: true,
			clickOnTrack: false
		});
	});
}

//cierra la cortinilla con los detalles del trabajo
function cierraCortinilla() {
	$("#ampliartrabajo").animate({width: "0"},500,function() {
		$("#multimediaTrabajo").html("");
	});
}

//ampliar el detalle de premios
function ampliarPremios() {
	$("#ampliarpremios").show();
	$("#ampliarpremios").animate({
		width: "950px",
		height: "330px",
		top: "2px",
		left: "30px",
		padding: "10px"
	},500);
}

//cerrar el detalle de premios
function cerrarPremios() {
	$("#ampliarpremios").animate({
		width: "0px",
		height: "0px",
		top: "175px",
		left: "500px",
		padding: "0px"
	},500,function() {
		$("#ampliarpremios").hide();
	});
}

//cambiar la imagen por alpha
function ampliarImagen(i) {

	$("#multimediaTrabajo *").fadeOut(500,null,function() {
		$("#multimediaTrabajo").html('<img src="'+i+'" alt="Briks Magicos" class="imgtrabajo" />');
		$("#multimediaTrabajo *").hide();
		$("#multimediaTrabajo img").load(function() {
			$("#multimediaTrabajo img").fadeIn(500);
		});
	});

}

//mostrar video
function ampliarVideo(v) {
	$("#multimediaTrabajo *").fadeOut(500,null,function() {
		$("#multimediaTrabajo").html("<div id='multimediaVideo'>\
		<!-- Begin VideoJS -->\
		<div class=\"video-js-box vim-css\">\
		  <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->\
		  <video id=\"videotrabajo\" class=\"video-js\" width=\"550\" height=\"277\" poster=\"" + v + ".jpg\" controls preload>\
			<source src=\"" + v + ".mp4\" type=\'video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"\' />\
			<source src=\"" + v + ".webm\" type=\'video/webm; codecs=\"vp8, vorbis\"\' />\
			<source src=\"" + v + ".ogv\" type=\'video/ogg; codecs=\"theora, vorbis\"\' />\
			<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->\
			<object id=\"flash_fallback_1\" class=\"vjs-flash-fallback\" width=\"550\" height=\"277\" type=\"application/x-shockwave-flash\"\
			  data=\"swf/flowplayer-3.2.6.swf\">\
			  <param name=\"movie\" value=\"swf/flowplayer-3.2.6.swf\" />\
			  <param name=\"allowfullscreen\" value=\"true\" />\
			  <param name=\"flashvars\" value=\'config={\"playlist\":[\"" + v + ".jpg\", {\"url\": \"" + v + ".mp4\",\"autoPlay\":false,\"autoBuffering\":true}]}\' />\
			  <!-- Image Fallback. Typically the same as the poster image. -->\
			  <img src=\"" + v + ".jpg\" width=\"550\" height=\"277\" alt=\"Poster Image\"\
				title=\"No video playback capabilities.\" />\
			</object>\
		  </video>\
		  <!-- Download links provided for devices that can\'t play video in the browser. -->\
		  <p class=\"vjs-no-video\"><strong>Download Video:</strong>\
			<a href=\"" + v + ".mp4\">MP4</a>,\
			<a href=\"" + v + ".webm\">WebM</a>,\
			<a href=\"" + v + ".ogv\">Ogg</a><br>\
			<!-- Support VideoJS by keeping this link. -->\
			<a href=\"http://videojs.com\">HTML5 Video Player</a> by VideoJS\
		  </p>\
		</div>\
		<!-- End VideoJS -->\
	</div>");

	VideoJS.setupAllWhenReady();
	var myPlayer = VideoJS.setup("videotrabajo");
	});
}

function restaurarSizes()
{
	$('#trabajos').css('width', $('.ampliartrabajo').length * $('.ampliartrabajo').outerWidth() + 'px' );
	$('#noticias').css('width', $('.noticia').length * $('.noticia').outerWidth() + 'px' );
}

	var trabajos = Array();

	function recargar_trabajos()
	{
		trabajos = Array();
		$('.trabajo').each(function(){
			trabajos.push( { 'obj' : this, 'child' : $('.faldon',this), 'state' : false } );
		});
	}

function EventChangeUrl(check)
{
	var url = '';
	$(window).hashchange( function(){
		if( url != document.location.hash && document.location.hash != '' )
		{
			loading_on();
			var url = document.location.hash;
			var arr = url.split('#');
			$.get(arr[1]+'ajax_1/',function(data){
				$('#contenedor').html(data);
				restaurarSizes();
				recargar_trabajos();
				$("#noticias").haccordion({
				   headerclass: "noticia",
				   contentclass: "contnoticia"
				});
				$('.int_contnoticia .cajatexto').jScrollPane({
					showArrows: true,
					clickOnTrack: true
				});
				$('.int_contnoticia .cajatexto').css("margin-left","-9999px");
				$(".ampliaimg").fancybox({
					onStart : function() { window.clearInterval(INTVAL); },
					onClosed : function() { INTVAL = window.setInterval(reposicionaElementos,30); }
				});
				loading_off();
			}).error( function() {
				alert('Error 404, página no existe.');
				var url = location.href;
				var arr = url.split('#');
				location.href = arr[0];
			});
		}
	});
}

$(function(){
	
	restaurarSizes();

	posicionX = 0; //inicializo el scroller horizontal a 0

	/*$('body').live('mousemove',function(e){
		posicionX = e.pageX;
	});*/
	$('.ampliarinfo').click(function(e){e.preventDefault();});	
	$('body').mousemove(function(e){
		posicionX = e.pageX;
	});

	//reposicionamiento noticias y trabajos
	var INTVAL = window.setInterval(reposicionaElementos,30);
	
	reposicionaElementos();

	//acordeon noticias
	$("#noticias").haccordion({
	   headerclass: "noticia",
	   contentclass: "contnoticia"
	});
	
	/*
	//rollover trabajos, no vale con live para ajax
	$(".trabajo").hover(
		function(){
			$(this).find(".faldon").animate({top: "-" + ($(this).find(".faldon").outerHeight() + 5)},300);
		},function() {
			$(this).find(".faldon").animate({top: "0"},300);
		}
	);
	*/	
	$("#contenidos").mouseover(function()
		{
			hover_desplaza=1;    	
    	}).mouseleave(function()
    	{
    		hover_desplaza=0;    		
  		}
	);
	
	
	if( $("#trabajos").length )
	{
		var num_pags=parseInt($('#trabajos a').size()/num_elementos_pag,10);		
		if(!num_pags)
		{
			$(".mas").css("display","none");			
		}
		else
		{
			$(".mas").css("display","block");
		}
		$(".menos").css("display","none");
	}
	
	$(".mas").click(function()
	{		
		var num_pags=parseInt($('#trabajos a').size()/num_elementos_pag,10);
		if(offset<num_pags )
		{
			offset++;			
			var npos = $('#trabajos .trabajo:first').outerWidth()*num_elementos_pag*offset;
			$('#conttrabajos').scrollLeft(npos);
			$(".menos").css("display","block");
		}
				
		if(offset>=num_pags )
		{
			offset=num_pags;
			$(".mas").css("display","none");
		}
		
	});
	$(".menos").click(function()
	{
		if(offset)
		{
			offset--;
			var npos = $('#trabajos .trabajo:first').outerWidth()*num_elementos_pag*offset;
			$('#conttrabajos').scrollLeft(npos);
			$(".mas").css("display","block");
		}

		if(!offset)
		{
			offset=0;
			$(".menos").css("display","none");
		}
	});

	
	recargar_trabajos();

	$('.trabajo').live('mouseover',function(event){
		for( var obj in trabajos )
		{
			if( trabajos[obj]['obj'] == this )
			{
				if( !trabajos[obj]['state'] )
				{
					trabajos[obj]['child'].animate({top:"-"+(trabajos[obj]['child'].outerHeight()+5)},300);
					trabajos[obj]['state'] = true;
				}
			}
			else
			{
				if( trabajos[obj]['state'] )
				{
					trabajos[obj]['child'].animate({top:"0"},300);
					trabajos[obj]['state'] = false;
				}
			}
		}
	});

	$(".ampliartrabajo").live('click',
		function(event) {
			event.preventDefault();
			direccion = $(this).attr("href");
			abreCortinilla(direccion);
			return false;
		}
	);

	$("#volver").live('click',
		function(event) {
			event.preventDefault();
			cierraCortinilla();
			return false;
		}
	);
	
	//scrolls en los textos de las noticias
	$('.int_contnoticia .cajatexto').jScrollPane({
		showArrows: true,
		clickOnTrack: true
	});

	$('.int_contnoticia .cajatexto').css("margin-left","-9999px");

	//imagenes ampliables en las noticias
	$(".ampliaimg").fancybox({
		onStart : function() { window.clearInterval(INTVAL); },
		onClosed : function() { INTVAL = window.setInterval(reposicionaElementos,30); }
	});
	
	//---------------------------------------------------------------------------------
	
	/*
	$('#menuppal a').live('click',function(event){
		event.preventDefault();
		var url = $(this).attr('href');
		document.location.hash = url;
	});
	$('#submenu a').live('click',function(event){
		event.preventDefault();
		var url = $(this).attr('href');
		document.location.hash = url;
	});
	EventChangeUrl();
	if( document.location.hash != '' ) $(window).hashchange();
	*/
	
	//---------------------------------------------------------------------------------
	
	$('#miniaturas a').live('click',function(event){
		event.preventDefault();
		$('#multimediaTrabajo').html('<progress><img src="/bittia/imagenes/cargando.gif" style="margin:139px 0 0 193px;" /></progress>');
		$.get($(this).attr('href')+'ajax_1/',function(data){
			$('#multimediaTrabajo').html(data);
		});
	});

});

window.onload = function(){
	dibujaFondo();
}