var intImgIndex = 0;
var intAntal = 0;

var mouseX = 0;
var leftMargin = 0;
var scrollWidth = 0;
var winWidth = 0;
var winHeight = 0;

var posHome = 0;
var posPortfolio = 485;
var posContact = 975;
var posPlupp = 0;

var Layer0MaxLeft = 304;
var Layer1MaxLeft = 1000;
var Layer2MaxLeft = 2100;
var Layer3MaxLeft = 2100;
var Layer4MaxLeft = 2100;
var Layer5MaxLeft = 2100;
var Layer6MaxLeft = 2100;
var Layer7MaxLeft = 2100;
var Layer8MaxLeft = 1300;
var Layer9MaxLeft = 1300;
var Layer10MaxLeft = 1300;

var Flare1MaxLeft = 3300;
var Flare2MaxLeft = 3300;
var Flare3MaxLeft = 3300;
var Flare4MaxLeft = 3300;
var Flare5MaxLeft = 3300;
var Flare6MaxLeft = 3300;
var Flare7MaxLeft = 3300;

var startPos = 0;
var endPos = 0;
var newPos = 0;

var PortfTop = 0;
var PortfBottom = 0;

$(document).ready(function(){ 
	CalculateWindow();
	GetCaseOverview('1');
	$("#dragBtn").draggable({ axis: "x", containment: "parent", drag: function(e){ MoveContainer(e) }});
	$("#ahome").click(function(){MoveContainerClick('home');});
	$("#aportfolio").click(function(){MoveContainerClick('portfolio');});
	$("#acontact").click(function(){MoveContainerClick('contact');});
	$("#abird1").click(function(){alert("I don't twitter. I blog")});
	
});

$(window).bind("resize",function() {
	CalculateWindow();
});

function GetCaseOverview(getPage) {
	$("#portfoliocontent").fadeOut(function(){
		$.ajax({
		type: "GET",
		url: "case_overview.asp?page="+getPage,
		dataType: "html",
		success: function(html) {
			$("#portfoliocontent").html(html);
			$("#portfoliocontent").fadeIn();
		}
		});
	});
}

function ShowCase(caseNr,frPage) {
	$("#portfoliocontent").fadeOut(function(){
		$.ajax({
		type: "GET",
		url: "cases.asp?case="+caseNr+"&frpage="+frPage,
		dataType: "html",
		success: function(html) {
			$("#portfoliocontent").html(html);
			imgNext();
			$("#portfoliocontent").fadeIn();
		}
		});
	});
}

function CalculateWindow() {
	$("#portfoliofilm").draggable("destroy");
	winWidth = $("#todo").width();

	
	// prende solo la proprietā width, con altre proprietā css non funziona
	scrollWidth = $("#scrollbar").width();
	// calcola la percentuale, deve essere uguale a "left" di #scrollbar
	startPos = (winWidth / 100) * 50;
	endPos = startPos + scrollWidth;
	
	
	
	PortfTop = winHeight - 786;
	PortfBottom = winHeight - 466;

	portfCont = [0,PortfTop,0,PortfBottom];
	$("#portfoliofilm").draggable({ axis: "y", containment: portfCont });
	
}


function MoveContainerClick(toWhat) {
	$("#logo").css("z-index","18");
	
/* per andare dritto a home
	if(toWhat == "home") {
		var L0 = "0px"
		var L1 = "0px"
		var L2 = "0px"
		var L4 = "0px"
		var L5 = "0px"

		var F1 = "0px"
		var F2 = "0px"
		var F3 = "0px"
		var F4 = "0px"
		var F5 = "0px"
		var F6 = "0px"
		var F7 = "0px"
		
		var P = "0px"
		
		var newPoss = 0;
	}
*/

	currPos = $("#dragBtn").css("left");
	currPosPx = parseInt(currPos.replace("px",""));
	
	if(newPoss > currPosPx) {
		diffPos = newPoss-currPosPx;
	} else {
		diffPos = currPosPx-newPoss;
	}

	
	anSpeed = diffPos * 10
	if(anSpeed < 1000) {anSpeed = 1000}
	
	if(currPos != P) {
	
		$("#layer0").animate({left: L0},anSpeed);
		$("#layer1").animate({left: L1},anSpeed);
		$("#layer2").animate({left: L2},anSpeed);
		$("#layer3").animate({left: L3},anSpeed);
		$("#layer4").animate({left: L4},anSpeed);
		$("#layer5").animate({left: L5},anSpeed);
		$("#layer6").animate({left: L6},anSpeed);
		$("#layer7").animate({left: L7},anSpeed);
		$("#layer8").animate({left: L8},anSpeed);
		$("#layer9").animate({left: L9},anSpeed);
		$("#layer10").animate({left: L10},anSpeed);
		
		$("#Flare1").animate({left: F1},anSpeed);
		$("#Flare2").animate({left: F2},anSpeed);
		$("#Flare3").animate({left: F3},anSpeed);
		$("#Flare4").animate({left: F4},anSpeed);
		$("#Flare5").animate({left: F5},anSpeed);
		$("#Flare6").animate({left: F6},anSpeed);
		$("#Flare7").animate({left: F7},anSpeed);
		
		$("#dragBtn").animate({left: P},anSpeed);
		
		
	
	}
	
}

function MoveContainer(e) {
	$("#logo").css("z-index","18");
	if(e.pageX > startPos && e.pageX < endPos) {


		Layer0NewPos = Math.round((Layer0MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#layer0").css("left","-" + Layer0NewPos + "px");

		Layer1NewPos = Math.round((Layer1MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#layer1").css("left","-" + Layer1NewPos + "px");
		
		Layer2NewPos = Math.round((Layer2MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#layer2").css("left","-" + Layer2NewPos + "px");		
		
		Layer3NewPos = Math.round((Layer3MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#layer3").css("left","-" + Layer3NewPos + "px");	
		
		Layer4NewPos = Math.round((Layer4MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#layer4").css("left","-" + Layer4NewPos + "px");		
		
		Layer5NewPos = Math.round((Layer5MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#layer5").css("left","-" + Layer5NewPos + "px");
		
		Layer6NewPos = Math.round((Layer6MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#layer6").css("left","-" + Layer6NewPos + "px");
		
		Layer7NewPos = Math.round((Layer7MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#layer7").css("left","-" + Layer6NewPos + "px");
		
		Layer8NewPos = Math.round((Layer8MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#layer8").css("left","-" + Layer8NewPos + "px");
		
		Layer9NewPos = Math.round((Layer9MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#layer9").css("left","-" + Layer9NewPos + "px");
		
		Layer10NewPos = Math.round((Layer10MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#layer10").css("left","-" + Layer10NewPos + "px");
		
		Flare1NewPos = Math.round((Flare1MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#Flare1").css("left","-"+Flare1NewPos + "px");
		
		Flare2NewPos = Math.round((Flare2MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#Flare2").css("left","-"+Flare2NewPos + "px");
		
		Flare3NewPos = Math.round((Flare3MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#Flare3").css("left","-"+Flare3NewPos + "px");	
		
		Flare4NewPos = Math.round((Flare4MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#Flare4").css("left","-"+Flare4NewPos + "px");

		Flare5NewPos = Math.round((Flare5MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#Flare5").css("left","-"+Flare5NewPos + "px");
		
		Flare6NewPos = Math.round((Flare6MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#Flare6").css("left","-"+Flare6NewPos + "px");
		
		Flare7NewPos = Math.round((Flare7MaxLeft/(endPos-startPos)) * (e.pageX-startPos));
		$("#Flare7").css("left","-"+Flare7NewPos + "px");
		
		
	}
}



	// Räknar bilderna och skriver ut nummer för varje bild. 1, 2, 3, 4 osv.
	function imgCount() {
		intAntal = 0;
		$("#imgnums").html("");
		$("#imgcontainer img").each(function() {
			intAntal++;
			var currImgids = $("#imgnums").html();
			if (intAntal == (intImgIndex)) {
				$("#imgnums").html(currImgids + "<span onclick='imgChosen(" + intAntal + ");' class='selected'>" + intAntal + "</span>")
			}
			else
			{
				$("#imgnums").html(currImgids + "<span onclick='imgChosen(" + intAntal + ");'>" + intAntal + "</span>")
			}
			
		});
	}


	// Visar önskad bild när man klickar på dess siffra / nummer
	function imgChosen(thisImgId) {
		var imgId = thisImgId;
		intImgIndex = imgId;	
		imgCount();	
		thisId = "#imgcontainer";
		$(thisId+' img').css('display', 'none'); 
		$(thisId+' img:nth-child('+intImgIndex+')').fadeIn();
	}
	
	// Visar nästa bild när man klickar på Nästa-knappen
	function imgNext() {			
		intImgIndex++;	
		imgCount();	
		thisId = "#imgcontainer";
		if (intImgIndex > intAntal) {
			intImgIndex = 1;
			imgCount();
		}
		$(thisId+' img').css('display', 'none'); 
		$(thisId+' img:nth-child('+intImgIndex+')').fadeIn();
	}