/* Background Images
================================================= */

var CoBackground = {
		images: [],
		currentIndex: 0,
		alignH: "left",
		alignV: "top"
};

CoBackground.init = function()
{
	$(window).resize(function() { CoBackground.resize(); });

	this.coLoadingImage = null;
	this.coLoadingImageButton = null;

	this.plus = $('#plus');

	this.imageContainer = $('#background-image');

	this.clickedElement = null;
}

CoBackground.resize = function()
{

	var imageElem = $('#background-image img');

	var width = $(window).width();
	var height = $(window).height();

	var widthRatio = width / $(imageElem).width();
	var heightRatio = height / $(imageElem).height();

	var r = Math.max(widthRatio, heightRatio);
	var imageWidth = Math.round($(imageElem).width() * r);
	var imageHeight = Math.round($(imageElem).height() * r);

	imageElem.width(imageWidth);
	imageElem.height(imageHeight);

	this.setMargins(imageElem, width, height, imageWidth, imageHeight);

	 $('#background-image').css("visibility", "visible");

}

CoBackground.setMargins = function(imageElem, width, height, imageWidth, imageHeight)
{
	if (this.alignH == "right") {
		imageElem.css('margin-left', Math.round(width-imageWidth) +'px');
	} else if (this.alignH == "center") {
		imageElem.css('margin-left', Math.round((width/2) - (imageWidth/2)) +'px');
	}

	if (this.alignV == "bottom") {
		imageElem.css('margin-top', Math.round(height-imageHeight) +'px');
	} else if (this.alignV == "center") {
		imageElem.css('margin-top', Math.round((height/2) - (imageHeight/2)) +'px');
	}
}

CoBackground.addImage = function()
{
	for (var i = 0; i < arguments.length; i++)
	{
		var img = $("<img>");

		img.load(function() {
			$(this).attr("loaded",true);
		});

		img.attr("src", arguments[i]['href']);
		img.attr("story", arguments[i]['story']);
		img.attr("alignH", arguments[i]['left']);
		img.attr("alignV", arguments[i]['top']);
		this.images.push(img);
	}
}

CoBackground.changeImage = function(index, elem)
{
	if (this.fading) {
		return;
	}

	if (index > this.images.length || index < 0) {
		//console.log("invalid image");
		return;
	}

	this.oldWidth = this.imageContainer.find("img").width();
	this.oldHeight = this.imageContainer.find("img").height();

	this.clickedElement = $(elem);
	this.currentIndex = index;

	this.switchImage();
}


CoBackground.switchImage = function()
{
	if (this.images.length > 1) {
		this.imageContainer.fadeOut(0, function() {

			CoBackground.alignH = CoBackground.images[CoBackground.currentIndex].attr("alignH");
			CoBackground.alignV = CoBackground.images[CoBackground.currentIndex].attr("alignV");

			CoBackground.fading = true;
			CoBackground.fadeIn();
			});
	}
}

CoBackground.fadeIn = function()
{
	if (this.fading == true) {

		if (this.images[this.currentIndex].attr("loaded")) {

			if (this.images[this.currentIndex].attr('story') == '') {
				CoStory.populate('');
				CoStory.hide();
			} else {
				CoStory.hide();
				CoStory.populate(this.images[this.currentIndex].attr('story'));
			}

			// clear css classes
			$('#photos a').removeClass("current");
			$('#photos a').removeClass("loading");
			this.clickedElement.addClass("loading");

			this.images[this.currentIndex].width(CoBackground.oldWidth);
			this.images[this.currentIndex].height(CoBackground.oldHeight);

			CoBackground.setMargins(this.images[this.currentIndex], $(window).width(), $(window).height(), CoBackground.oldWidth, CoBackground.oldHeight);

			// remove existing image
			this.imageContainer.find("img").remove();

			// add new image
			this.imageContainer.append(this.images[this.currentIndex]);

			// fade the container in
			this.imageContainer.fadeIn(0, function() {

				CoBackground.fading = false;
				CoBackground.clickedElement.removeClass("loading");
				CoBackground.clickedElement.addClass("current");

				});

		} else {
			// try again in 100ms
			setTimeout(function() { CoBackground.fadeIn(); }, 100);
		}
	}
}
















/* Menu
   ================================================= */

CoMenu = {};

CoMenu.init = function()
{
	CoMenu.content = $('#content');
	CoMenu.content.originalWidth = CoMenu.content.width();

	CoMenu.menu = $('#menu');
	CoMenu.menu.originalWidth = "380";
}

CoMenu.toggle = function(toToggle)
{

	if (toToggle == "menu") {
		toToggle = this.menu;
		var toHide = this.content;
	} else {
		toToggle = this.content;
		var toHide = this.menu;
	}

	if (toToggle.width() == 0) {
		this.slide(toToggle, "show");
		this.slide(toHide, "hide");
	} else {
		this.slide(toToggle, "hide");
	}

}

CoMenu.slide = function(toToggle, action)
{

	if (action == "show") {

		$('#' + toToggle.attr("id") + '-toggle').addClass("on");

		// expand
		$(toToggle).animate(
					{ width: toToggle.originalWidth},
					1000,
					function() {
						$(this).show();
					});

	} else if (action == "hide") {

		$('#' + toToggle.attr("id") + '-toggle').removeClass("on");

		$(toToggle).animate(
				{ width: "0"},
				1000,
				function() {
					$(this).hide();
				});
	}
}


/* Pre-load Images
================================================= */
var ImagePreload = {};
ImagePreload.preloadImages = function()
{
	for (var i = 0; i < arguments.length; i++)
	{
		if (arguments[i] != "") {
			jQuery("<img>").attr("src", arguments[i]);
		}
	}
}


/* Swap in subcontent
================================================= */

var CoSubContent = {};

CoSubContent.init = function()
{
	this.faded = false;
	this.loaded = false;
	this.content = $('#sub-content');
	this.htmlData = null;
}

CoSubContent.switchHtml = function(elem, url, guid)
{
	if (this.faded || this.loaded) {
		return false;
	}

	$('#subnav a').removeClass("current");
	$(elem).addClass("current");

	this.content.fadeOut(500, function() {
		CoSubContent.faded = true;
		CoSubContent.fadeIn();
		});

	$.get(url, { guid: guid }, function (data) {
		CoSubContent.htmlData = data;
		CoSubContent.loaded = true;
		CoSubContent.fadeIn();
		});
}

CoSubContent.fadeIn = function()
{
	if (this.faded && this.loaded) {
		this.content.html(this.htmlData);
		this.htmlData = false;
		this.content.fadeIn(500, function() {
			$('#sub-content').jScrollPane();
			CoSubContent.faded = false;
			CoSubContent.loaded = false;
			});
	}
}


/* Stories
================================================= */

var CoStory = {};

CoStory.init = function()
{
	this.story = $('#story');
	this.storyContent = $('#story-content');
	this.plus = $('#plus');
	this.storyHeight = this.story.height();
	this.state = "hidden";
	this.oldColour = CoStory.plus.css("color");
	this.pulseOut();
}

CoStory.toggle = function()
{
	if (this.state == "hidden") {
		this.show();
	} else {
		this.hide();
	}
}

CoStory.hide = function()
{

	if (this.story.width() == 0) {
		//CoStory.checkPlus();
	} else {

		this.storyContent.hide();

		// expand
		this.story.animate(
					{ width: 0, height: 0},
					500,
					function() {
						CoStory.state = "hidden";
						CoStory.story.hide();
					});
	}
}

CoStory.checkPlus = function()
{
	if (CoStory.storyContent.html() == '') {
		CoStory.plus.css('vibility', 'hidden');
	}
}

CoStory.show = function()
{
	// get the content length
	CoStory.story.show();
	this.story.width(300);
	this.storyContent.show();

	// get the height of the content
	var height = this.storyContent.height() + 20;
	this.storyContent.hide();

	// rest the width before we show it
	this.story.width(0);

	// show the story again
	this.story.css('visibility', 'visible');

	// expand
	this.story.animate(
				{ width: 300, height: height },
				500,
				function() {
					// show the story content
					CoStory.storyContent.show();
					CoStory.state = "visible";
				});
}

CoStory.populate = function(storyHtml)
{
	if (storyHtml != '') {
		CoStory.plus.css('visibility', 'visible');
	} else {
		CoStory.plus.css('visibility', 'hidden');
	}
	this.storyContent.html(storyHtml);
}

CoStory.pulseOut = function()
{
	// expand
	CoStory.plus.animate(
				{ opacity: 0.1 },
				2000,
				"",
				function() {
					CoStory.pulseIn();
				});
}

CoStory.pulseIn = function()
{

	// expand
	CoStory.plus.animate(
				{ opacity: 1, color: "#fff" },
				2000,
				"",
				function() {
					CoStory.plus.animate(
					{ color: CoStory.oldColour},
					2000,
					"",
					function() {
						setTimeout(function() { CoStory.pulseOut() }, 3000);
					});
				});
}



//load the initial background image
$(document).ready(function() {

	CoBackground.init();
	CoMenu.init();
	CoSubContent.init();
	CoStory.init();

	$('#scrolling').jScrollPane();
	$('#sub-content').jScrollPane();

});