/// <reference path="jquery-1.4.1-vsdoc.js"/>

// PUBLIC PROPERTIES FOR HTML BUFFER
var HTMLContainer = new Array();
var HTMLPhotosInfo = new Array();

// Projects ( Campaign )
var campaignNames = Array();
var campaignCount = 0;
var campaignCurrent = 0;

// PICTURES MULTIDIMENSIONAL ARRAY (campaign,image)
var pictures = Array();
var pictureCount = new Array();
var pictureCurrent = 0;
var pictureWidth = 930;
var pictureHeight = 500;
var pictureLoadCount = Array();

// Animation parameters
var animationSpeedH = 1000;
var animationSpeedV = 800;
var animationSpeedBack = 500;
var maxColumsForLookBookMenu = 7;

// EVENT HANDLERS

$(document).ready(function () {

	// Inside of renderMenuHTML is calling to another loadCampaing, to enhance need to separe sycro and buffering preloadings...
	//temporay patch to ensure that the first image to load in the loading one..."
	img = new Image();
	img.src = "images/loading.gif";
	// preloading two images that are not in the HTML... temporary lines
	img1 = new Image(); img2 = new Image(); img1.src = "images/arrow_down.png"; img2.src = "images/arrow_left.png";

	$(img).load(function () {

		$("div#loader").addClass("loading");
		loadMenuXML(renderMenuHTML);
	});

	$("#header").click(function () { window.location='/'; });
});

// AJAX LOAD XML FILES METHODS

function loadMenuXML(afterLoadThisRenderHTML) {

	$.get("xml/site.xml", afterLoadThisRenderHTML, "xml");

}

function loadCampaignPhotosXML(file) {

	$.get("xml/" + file, renderCampaignHTML, "xml");

}

// RENDER HTML METHODS

// Render Menu
renderMenuHTML = function (data) {

	$("#menu_content").prepend("<ul></ul>");
	$(data).find('item').each
												(
													function (i) {
														$("div#menu_content ul").append("<li><a id='" + i + "'>" + $(this).attr('name') + "</a></li>");
														HTMLContainer[i] = $(this).text();
													}
												)

	// Attach event to handle menu

	$("span#main_item").bind("mouseenter click", function (e) { $("div#menu_content ul li a").each(function () { $(this).css("color", "white"); }); $("div#menu_text").slideUp("slow"); $("div#menu_text").html = ""; $("div#menu_content").slideDown(); e.stopPropagation(); });
	$("body").bind("click", function (e) { $("div#menu_content").slideUp("slow"); e.stopPropagation(); });
	$("div#menu_content ul li a").click(
	function (e) {
		$("div#menu_content ul li a").each(function () { $(this).css("color", "white"); });
		$(this).css("color", "#FF8C00");
		renderContainerHTML(parseInt($(this).attr("id")));
		e.stopPropagation();
	});

	$("div#menu_text").html("");
	$("div#menu_text").hide();
	$("div#menu_content").hide();

	loadCampaignPhotosXML("campaigns.xml");
}

// Render pictures campaign ( projects )

renderCampaignHTML = function (data) {

	showLoadingImageAnimation();
	$("div#wrapper").hide();
	img = $(data).find("photo").get(0)
	var firstImage = new Image();
	firstImage.src = $(img).attr('imageurl');
	$(firstImage).attr("campaign", 0);
	$(firstImage).attr("picture", 0);
	$(firstImage).attr("visibility", "hidden");
	$(firstImage).hide();
	pictureLoadCount[0] = pictureLoadCount[0] + 1;
	$(firstImage).load(

	function () {

		$(data).find("campaign").each(
	function (j) {
		campaignNames[j] = $(this).attr('name');
		HTMLPhotosInfo[j] = new Array();
		pictures[j] = new Array();
		pictureLoadCount[j] = 0;
		imgHtmlAux = "";
		$(this).find('photo').each
			(
				function (i) {
					HTMLPhotosInfo[j][i] = $(this).text();
					imageURL = $(this).attr('imageurl');
					if (j == 0 && i == 0) pictures[0][0] = firstImage
					else {
						pictures[j][i] = new Image();
						pictures[j][i].src = imageURL;
					}
					auxImg = pictures[j][i];

					if (i == 0) $(auxImg).addClass("first");
					$(auxImg).attr("campaign", j);
					$(auxImg).attr("picture", i);
					$(auxImg).css("visibility", "hidden");
					$(auxImg).load(function () {

						if (pictures[campaignCurrent][pictureCurrent] == this) $("div#loader").removeClass("loading");
						$(this).css("visibility", "visible");
						$(this).hide();
						$(this).fadeIn();
						pictureLoadCount[parseInt($(this).attr("campaign"))] = pictureLoadCount[parseInt($(this).attr("campaign"))] + 1;

					});
				}
		);
		pictureCount[j] = HTMLPhotosInfo[j].length;
	});



		campaignCount = HTMLPhotosInfo.length;

		setCampaignControls();
		setPictureControls();

		var maxPicture = Math.max.apply(Math, pictureCount)

		$('#wrapper').css('width', pictureWidth * maxPicture);
		$('#wrapper').css('height', pictureHeight * campaignCount);
		$('#wrapper').css('marginTop', -pictureHeight * (campaignCount - 1));

		pictures.reverse();
		$(pictures).each(function (i, picture) {
			$(picture).each(function (j, img) {

				$("div#wrapper").append(img);
			});
		});
		pictures.reverse();
		//showing the first image first ( already has been loaded )

		// CLICK NEXT/PREV PHOTOS ATTACH EVENT HANDLER

		$("img#arrow_right").click(clickOnRigthArrow);
		$("img#arrow_left").click(clickOnLeftArrow);
		$("img#arrow_down").click(clickOnDownArrow);
		$("img#arrow_up").click(clickOnUpArrow);
		$("img#arrow_up,img#arrow_down,img#arrow_left,img#arrow_right").mouseover(function () { });
		$("img#arrow_up,img#arrow_down,img#arrow_left,img#arrow_right").click(showLoadingImageAnimation);

		$("div#wrapper").fadeIn(function () {
			$(firstImage).css("visibility", "visible");
			$(firstImage).hide();
			$(firstImage).fadeIn();
			$("div#photo_info").html("<p></p>");
			$("div#photo_info").fadeIn("slow");

			renderPhotoInfoHTML(0, 0);
			$("div#loader").removeClass("loading");
			$("div#container img").show();

		});

	});

}

function renderContainerHTML(id) {

	$("div#menu_text").slideUp("fast",
	function () {
		if (HTMLContainer[id] !== "projects") {
			$("div#menu_text").html(HTMLContainer[id]);
			$("div#menu_text").slideDown("slow");
		}
		else {
			// first time for the project stuff
			$("div#menu_text").html('<ul id="pcolumn_0"></ul>');
			var j = 1;
			var m = 0;
			$(campaignNames).each(function (i, data) {

				$("div#menu_text ul#pcolumn_" + m.toString()).append('<li><a id="' + i + '">' + data + '</a></li>');

				if (j == maxColumsForLookBookMenu) {
					m++;
					$("div#menu_text").append('<ul id=pcolumn_' + m.toString() + '></ul>');
					j=0
				}
				j++;
			});
			$("div#menu_text ul li a").click(
			function () { moveToCampaignAnimation(parseInt($(this).attr('id'))); }
			);
			$("div#menu_text ul li a").click(showLoadingImageAnimation);
			$("div#menu_text").slideDown();
		}
	});
	
}

function renderPhotoInfoHTML(j, i) {

	 $("div#photo_info p").hide();
	 $("div#photo_info p").html(HTMLPhotosInfo[j][i]);
	 $("div#photo_info p").fadeIn("slow");	

}

function renderPhotoHTML(imageURL,i) {
	if (i !== 0) {
		$("div#wrapper").append('<img src="' + imageURL + '" />');
	} else {
		$("div#wrapper").append('<img src="' + imageURL + '" class="first" />');
	
	}

}

// EVENT HANDLERS ARROWS CLICK

clickOnRigthArrow = function () {

	if (pictureCurrent < (pictureCount[campaignCurrent] - 1)) moveToPictureAnimation(pictureCurrent + 1);
	else moveToPictureAnimation(0);
}

clickOnLeftArrow = function () {

	if (pictureCurrent > 0) moveToPictureAnimation(pictureCurrent - 1);

}

clickOnUpArrow = function () {

	if (campaignCurrent > 0) moveToCampaignAnimation(campaignCurrent - 1);

}

clickOnDownArrow = function () {

	if (campaignCurrent < (campaignCount - 1)) moveToCampaignAnimation(campaignCurrent + 1);

}

// ANIMATIONS BEHAVIORS

function moveToCampaignAnimation(moveTo) {

	campaignCurrent = moveTo
	pictureCurrent = 0

	if (campaignCurrent >= 0 && campaignCurrent <= (campaignCount - 1)) {
		setCampaignControls();
		$("#wrapper").animate(
														{ marginLeft: 0 },
														animationSpeedBack,
														function () {
															$("#wrapper").animate(
														{ marginTop: -pictureHeight * ((campaignCount - 1) - campaignCurrent), marginLeft: 0 },
														animationSpeedV
												 );
														}
												 );

		renderPhotoInfoHTML(campaignCurrent, pictureCurrent);
	}
}

function moveToPictureAnimation(moveTo) {

	pictureCurrent = moveTo;
	setPictureControls();
	$("#wrapper").animate(
														{ marginLeft: -pictureWidth * pictureCurrent },
														animationSpeedH
												 );
	renderPhotoInfoHTML(campaignCurrent, pictureCurrent);

}

setPictureControls = function setPictureControls() {

	if (pictureCurrent == pictureCount[campaignCurrent] - 1) $("img#arrow_right").attr("src", "images/cross.png");
	else $("img#arrow_right").attr("src", "images/arrow_right.png");
	if (pictureCurrent == 0) $("img#arrow_left").attr("src", "images/cross.png");
	else $("img#arrow_left").attr("src", "images/arrow_left.png");

}

setCampaignControls = function setCampaignControls() {

	//Always when move a new campaign is going to the first picture in the right then no more.. then cross
	$("img#arrow_left").attr("src", "images/cross.png");

	// if the campaign has more than one picture be able to click on right
	if (pictureCount[campaignCurrent] > 1) $("img#arrow_right").attr("src", "images/arrow_right.png");
	else $("img#arrow_right").attr("src", "images/cross.png");

	// if there is not more campaings to show from down
	if (campaignCurrent == (campaignCount - 1)) $("img#arrow_down").attr("src", "images/cross.png");
	else $("img#arrow_down").attr("src", "images/arrow_up.png");

	if (campaignCurrent == 0) $("img#arrow_up").attr("src", "images/cross.png");
	else $("img#arrow_up").attr("src", "images/arrow_down.png");

}

// Progress loader Gif Animation

showLoadingImageAnimation = function showLoadingImageAnimation() {
	$("div#menu_content").slideUp("fast");
	if (pictures.length == 0) $("div#loader").addClass("loading");
	else {
		img = pictures[campaignCurrent][pictureCurrent];
		if ($(img).css("visibility") == "visible") $("div#loader").removeClass("loading");
		else $("div#loader").addClass("loading");
	}
}