var t;
var Nelements;
var Welements;
var cwidth;
var mov;

var viewHorizontalIsVisible = true;
var active_content = '';


function getSizeElm(elm,type)
{
	var curleftPX = $(elm).css(type);
	
	if(curleftPX == undefined) return 0;
	if(curleftPX.indexOf("px") < 0 ) return 0;
	
	var curleft = curleftPX.split('px');
	var cleft = curleft[0];
	return cleft;
}


function calculeNMov(Welements)
{
	var remainder =  ($(document).width()) % Welements;
	return ( ($(document).width()) - remainder ) / Welements;
}


function calculeMov(Welements)
{
	return calculeNMov(Welements)*Welements;
}


function setupHorizontalViewContent(tag_id, elemWidth)
{
	t = "off";
    Nelements = $(tag_id+" .element").size();
	//Welements = parseInt(parseInt(getSizeElm(".element:first","width")) + parseInt(getSizeElm(".element:first","margin-left")) + parseInt(getSizeElm(".element:first","margin-right")));	
	Welements = parseInt(elemWidth + parseInt(getSizeElm(".element:first","margin-left")) + parseInt(getSizeElm(".element:first","margin-right")));		
	cwidth = (Nelements*Welements) + 70;
	
	//alert(cwidth + ' ' + Nelements + ' ' + Welements + ' ' + $('.element:first').width());	

	$(tag_id).css("width", cwidth+"px");
    $(tag_id).css("margin-left", "0px");
	mov = calculeMov(Welements);
	
	$(".element").css("width", '');
	
	$("#wrapper").css("width",($(document).width() - 75)+"px").css("margin-left","30px");		
}



function setupHorizontalViewWindowResizeEvent()
{

	$(window).resize(function()
	{
		var dw = $(document).width();
        $("#wrapper").css("width",(dw - 75)+"px").css("margin-left","30px");
	    mov = calculeMov(Welements);
	});

	$(window).resize();
}



function setupHorizontalViewButtons()
{
	$("#moveBackgroundB").click(function()
    {
        if(t == "off"){
            t= "on";
            var ofs = $("#content").offset();
            var maxLeft = cwidth - $(document).width();
            var cleft = getSizeElm("#content","left");
            //alert("CLEFT-MOV: "+(cleft-mov)+" MAXLEFT: "+(-maxLeft));
            //if((cleft-mov)  < -maxLeft){
                //$("#content").animate({left : -maxLeft},function(){
                  //  t = "off";
                  //  m($("#content").css("left"),"TOMAX");
                //});
            if(cleft  < -maxLeft){
                //DO NOTH
                t="off";
            
            }
            else
            {
                $("#content").animate({left : '-='+mov} ,function(){
                    t = "off";
                });
            }
        }
    });
    
    
    $("#moveBackgroundF").click(function(){
        if(t=="off"){
            t = "on";
            var ofs = $("#content").offset();
            if(ofs.left  > -mov){
                $("#content").animate({left : '0'},function(){
                    t = "off";
                });
            }else{
                $("#content").animate({left : '+='+mov},function(){
                    t="off";
                });
           
            }
        }
    });
    
/*
	$(window).keypress(function(e)
	{
		if(e.keyCode == 115)
		{
			$("#moveBackgroundB").trigger('click');
		} else if(e.keyCode == 97)
		{
        	$("#moveBackgroundF").trigger('click');
		}
	});
*/
}



function hideContentAndShow(content_to_hide, content_to_show, elem_width)
{
	$("#content_"+content_to_show).children().detach().appendTo("#content_aux");
	setupHorizontalViewContent("#content_aux", elem_width);

	if(content_to_show == "newsletter") $("#wrapper").animate({'margin-top': 20});
	else $("#wrapper").animate({'margin-top': 50});	

//	if(content_to_show == "newsletter") $("#wrapper").css('margin-top', '20px');
//	else $("#wrapper").css('margin-top', '50px');

	
	$("#content").fadeOut();
	$("#content_aux").hide()
		.css('z-index','20')
		.fadeIn(function()
		{
			$("#content").attr("id", "content_");
			$("#content_aux").attr("id", "content").css('z-index','11');
			$("#content_").attr("id", "content_aux").css({ 'z-index': '10', 'left': '0' });
			$("#content_aux").children().detach().appendTo(content_to_hide);
		});	
	active_content = content_to_show;
}

function hideHorizontalView()
{
	var a = active_content;
	$("#wrapper").fadeOut(function()
	{
		$("#content").children().detach().appendTo("#content_"+a);
	});
	
    $("#moveFowardCtl").fadeOut();
	$("#moveBackCtl").fadeOut();
	
	viewHorizontalIsVisible = false;
	active_content = "";
}

function showHorizontalView()
// Pre: some content is prepared and ready to be shown
{
	if(active_content == "newsletter") $("#wrapper").css('margin-top',20);
	else $("#wrapper").css('margin-top','');
	
	$("#wrapper").fadeIn();
    $("#moveFowardCtl").fadeIn();
	$("#moveBackCtl").fadeIn();	
	viewHorizontalIsVisible = true;
}


function horizontalViewSwapTo(content_to_show, elem_width)
// Pre: horizontalView is displaying something, we must find out what
{
	if(active_content == content_to_show) return;	
	else if(active_content == "projects") hideContentAndShow("#content_projects", content_to_show, elem_width);
	else if(active_content == "especials") hideContentAndShow("#content_especials", content_to_show, elem_width);
	else if(active_content == "newsletter") hideContentAndShow("#content_newsletter", content_to_show, elem_width);
	else if(active_content == "studio") hideContentAndShow("#content_studio", content_to_show, elem_width);	
}



function prepareHorizontalViewContent(content_to_prepare, elem_width)
{
	$("#content_"+content_to_prepare).children().detach().appendTo("#content");
	setupHorizontalViewContent("#content", elem_width, elem_width);
	active_content = content_to_prepare;
}


$(document).ready(function()
{
	prepareHorizontalViewContent("projects", 300);
	
	setupHorizontalViewWindowResizeEvent();
	setupHorizontalViewButtons();
});