// Global holds reference to selected element
var selectedFrame = false;

var initX;
var initY;
var initType;

// Various flags
var dontShowNav = false;
var dragging = false;
var justReleased = false;

var closedBarWidth = 50;

// Globals hold location of click relative to element
var offsetX;

// Global holds stacking order of dragged elements
var zIndex = 100;

var oldCover = false;

function inFront(project) {
	// Show previous cover, if any
	if (oldCover) {
		oldCover.style.display = "block";
	}
	// Hide new cover
	newCover = document.getElementById(project+"cover");
	if (newCover==oldCover || project=="") {
		// Same project clicked the second time => close all projects
		project = "";
		oldCover = false;
		// Disable selected objects
		selectedObj = null;
		$("#imgBframe")
			.width("50%")
			.css("left", ($(window).width()-330)/2-4);
	} else {
		newCover.style.display = "none";
		oldCover = newCover;
		var l = project.charCodeAt(3)-64==1 ? $(window).width()-330-closedBarWidth-8 : closedBarWidth;
		$("#imgBframe")
			.addClass("clicked")
			.width($(window).width()-l-8)
			.css("left", l);
	}
	// Show project
	var evt = new Object();
	evt.target = new Object();
	evt.target.name = project;
	evt.target.src = true;
}

function showProject(project) {
	dontShowNav = true;
	inFront(project);
}

var oldDescription = false;

function showDescription(desc) {
	if (oldDescription) {
		oldDescription.css("display", "none");
	}
	var newDescription = $("#"+desc)
	$("a").removeClass();
	if (oldDescription && newDescription.attr("id")==oldDescription.attr("id")) {
		oldDescription = false;
	} else {
		newDescription.css("display", "block");
		oldDescription = newDescription;
		$("#"+desc+"-link").addClass("selected");
	}
}

// Resize the images to the browser window height
function resizeImages() {
	var newHeight = Math.min($(window).height()-30, Math.max(400, Math.ceil(($(window).width()-330)/1.4)));
	$(".frame")
		.height(newHeight)
		.width($(window).width()-330-closedBarWidth);
	$("#imgBframe").css("left", ($(window).width()-330)/2-4);
	
	for (i=1; i<=barCount; i++) {
		var id = "img"+String.fromCharCode(64+i);
		var imgs = $("#"+id+"wrap img");
		imgs.css("height", newHeight);
		imgs.css("visibility", "visible");
		var totalWidth = 0;
		for (var j=0; j<imageRatios[i-1].length; j++) {
			var img = imgs.eq(j);
			img.css("width", Math.ceil(imageRatios[i-1][j]*newHeight));
			totalWidth += img.width();
		}
		var dragOffset = i==1 ? 0 : closedBarWidth;
		$("#"+id+"wrap")
			.width(totalWidth)
			.draggable('option', 'containment', [$(window).width()-330-closedBarWidth-totalWidth+dragOffset, 0, dragOffset, 0]);
	}
}

function next(el, id) {
	el.blur();
	var wrap = $("#"+id);
	var img = false;
	var left = Math.abs(wrap.position().left)
	var animated = false;
	wrap.find("img").each(function() {
		if ($(this).position().left>left) {
			wrap.animate({left: -$(this).position().left}, 250);
			animated = true;
			return false;
		}
	});
	if (!animated) {
		wrap.animate({left: 0}, wrap.find("img").length/2*250);
	}
}

function prev(el, id) {
	el.blur();
	var wrap = $("#"+id);
	var img = false;
	var left = Math.abs(wrap.position().left)
	var imgs = wrap.find("img");
	var animated = false;
	for (var i=imgs.length-1; i>=0; i--) {
		if (imgs.eq(i).position().left<left) {
			wrap.animate({left: -imgs.eq(i).position().left}, 250);
			animated = true;
			return false;
		}
	}
	if (!animated) {
		wrap.animate({left: -imgs.eq(imgs.length-1).position().left}, wrap.find("img").length/2*250);
	}
}

$(function() {
	$(".draggable")
		.draggable({
			axis: 'x'
		})
		.click(function() {
			next(this, $(this).attr("id"));
		});

	resizeImages();
	$(window).resize(resizeImages);
});