/*
	REQUIREMENTS: JQuery, link to this file from source page, link to photo_widget.css from source page

	- All double-quotes within the caption property must be escaped.
	- There should be no carriage returns in the caption property.
	- Tested with HTML 4.01 Transitional and JQuery 1.3.2 in Safari 4, Firefox 3.5, Opera 10, and Chrome 3 on Mac and Internet Explorer 6, 7, and 8 on Windows. IE 6 is functional but not pixel perfect.
	- Image paths defined in photos.json

*/

/* initialize variables */
var photos = new Object();
var options = new Object();
var data_ready = false;
var images_ready = [];
var timeout = 1;
var position = 0;



/*jquery plugin to center elements on the screen*/
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}



/* start your engines */
function doPhotoWidget(json_file, json_path) {
	getData(json_file, json_path);
	isDataReady();
}
function isDataReady() {
	if (data_ready) {
		setClick();
		timeout = 1;
	}
	else {
		setTimeout("isDataReady();", timeout);
		timeout = 2 * timeout;
	}
}

function getData(json_file, json_path) {
	$.ajax({
	  type: "GET",
	  url: json_path + "/" + json_file,
	  dataType: "json",
	  success: function(data, status) {
		  photos = data.elements;
		  options = data.options;
		  data_ready = true;
	  }
	});
}

function setClick() {
	$(".doPhotoWidget").click(function(event) {
		doSlideshow();
		event.preventDefault();
	});
}

function doSlideshow() {
	if (exists("#fs_ltbox")) {
		$("#fs_ltbox").fadeIn("slow");
	}
	else {
		var fs_ltbox = makeLightbox();
		var preloader = makePreloader();
		$("body").append(fs_ltbox);
		$("#fs_ltbox").append(preloader);
		var slideshow = makeSlideshowEls();
		$("#fs_ltbox").append(slideshow);
		$("#fs_ltbox").fadeIn("slow");
		centerElements();
	}
}

function centerElements() {
	var images = $("#fs_slideshow_els li img");
	for (i=0;i<images.length;i++) {
		images_ready.push($(images[i]).attr("complete"));
	}
	for (i=0;i<images_ready.length;i++) {
		var ready = true;
		if (images_ready[i] == false) {
			var ready = false;
			images_ready = [];
		}
	}
	if (ready) {
		centerNavButtonsVertically();
		centerSlideshowVertically();
		centerElementsHorizontallyAndVertically();
		revealSlideshow();
		timeout = 1;
	}
	else {
		setTimeout("centerElements();", timeout);
		timeout = 2 * timeout;
	}
}

function revealSlideshow() {
	$("#fs_preloader").remove();
	$("#fs_ltbox_liner").css({
		"visibility": "visible",
		"opacity": 0
	}).fadeTo("slow", 1);
}





function makePreloader() {
	var img = document.createElement("img");
	img.id = "fs_preloader";
	img.src = options[0].layout_img_path + "/ajax-loader.gif";
	img_w = $(img).attr("width");
	img_h = $(img).attr("height");
	img.alt = "loader";
	var window_w = $(window).width();
	var window_h = $(window).height();
	var margin_left = (window_w - img_w) / 2;
	var margin_top = (window_h - img_h) / 2;
	$(img).css({
		"left": margin_left,
		"position": "absolute",
		"width": 220,
		"height": 19,
		"top": margin_top,
		"zIndex": 100
	}).center();
	return img;
}

function makeLightbox() {
	var WinHeight = $(document).height();
	var fs_ltbox = "<!--[if lt IE 8]><div id=\"ltIE8\"><![endif]--><div id=\"fs_ltbox\" style=\"height: " + WinHeight + "px\"></div><!--[if lt IE 8]></div><![endif]-->";
	return fs_ltbox;
}
function makeSlideshowEls() {
	var fs_ltbox_liner = document.createElement("div");
	var fs_slideshow_container = document.createElement("div");
	var fs_slideshow_content = document.createElement("div");
	var fs_slideshow_liner = document.createElement("div");
	var fs_slideshow_els = document.createElement("div");
	fs_ltbox_liner.id = "fs_ltbox_liner";
	fs_slideshow_els.id = "fs_slideshow_els";
	fs_slideshow_container.id = "fs_slideshow_container";
	fs_slideshow_liner.id = "fs_slideshow_liner";
	fs_slideshow_content.id ="fs_slideshow_content";
	$(fs_ltbox_liner).css({
		"visibility": "hidden"
	});

	var fs_slideshow_previous = makeNavButton("previous");
	var fs_slideshow_next = makeNavButton("next");

	var ul = document.createElement("ul");

	for (i=0; i<photos.length; i++) {
		var li = document.createElement("li");
		if (i != 0) {
			$(li).css({
				"opacity": "0.33"
			});
		}
		var wrapper = document.createElement("div");
		wrapper.className = "element_wrapper";
		var img = document.createElement("img");
		img.src = options[0].slideshow_img_path + "/" + photos[i].file;
		img.alt = photos[i].alt;
		img.title = photos[i].title;
		var div = document.createElement("div");
		var title = document.createElement("h2");
		$(title).append(photos[i].title);
		$(div).addClass("caption");
		$(div).append(title);
		$(div).append(photos[i].caption);
		$(wrapper).append(img);
		$(wrapper).append(div);
		$(li).append(wrapper);
		$(ul).append(li);
	}

	var ul_width = photos.length * 810;
	$(ul).css({"width":ul_width});

	var nav = makeNav();
	var close_btn = makeCloseButton();

	$(fs_slideshow_els).append(ul);
	$(fs_slideshow_liner).append(fs_slideshow_previous);
	$(fs_slideshow_liner).append(fs_slideshow_els);
	$(fs_slideshow_liner).append(fs_slideshow_next);
	$(fs_slideshow_content).append(fs_slideshow_liner);
	$(fs_slideshow_container).append(nav);
	$(fs_slideshow_container).append(fs_slideshow_content);
	$(fs_ltbox_liner).append(close_btn);
	$(fs_ltbox_liner).append(fs_slideshow_container);
	var html = fs_ltbox_liner;

	return html;
}

function makeNavButton(name) {
	var div = document.createElement("div");
	var a = document.createElement("a");
	div.id = "fs_slideshow_" + name;
	div.className = "nav_button";
	a.href = "#";
	a.className = name;
	if ( name == "previous" && position == 0) {
		a.className += " hide";
	}
	$(a).click(function(event) {
		if ( name == "previous" ) {
			var direction = -1;
		}
		else if ( name == "next" ) {
			var direction = 1;
		}
		moveSlideshow(direction);
		event.preventDefault();
	});
	$(a).append(name);
	$(div).append(a);
	return div;
}

function makeCloseButton() {
	var div = document.createElement("div");
	var a = document.createElement("a");
	div.id = "fs_ltbox_close_btn";
	a.href = "#";
	$(a).click(function(event) {
		$("#fs_ltbox").fadeOut("slow");
		event.preventDefault();
	});
	$(a).append("Close");
	$(div).append(a);
	return div;
}

function makeNav() {
	var ul = document.createElement("ul");
	ul.id = "fs_slideshow_nav";

	for (i=0; i<photos.length; i++) {
		var li = document.createElement("li");
		var a = document.createElement("a");
		a.href = "#";
		$(a).click(function(event) {
			var menu_items = $("#fs_slideshow_nav a");
			position = getPosition(menu_items, this);
			moveSlideshow();
			event.preventDefault();
		});
		if (i==0) {
			li.className = "active";
		}
		$(a).append(photos[i].title);
		$(li).append(a);
		$(ul).append(li);
	}

	return ul;
}

function centerNavButtonsVertically() {
	var liner_h = $("#fs_slideshow_liner").height();
	var padding = 50;
	var liner_h_adj = liner_h - padding;
	var margin_top = liner_h_adj / 2;
	$("#fs_slideshow_liner .nav_button a").css({"marginTop": margin_top});
}

function centerSlideshowVertically() {
	// center in window
	var WinHeight = $(window).height(); // height of window

	var LinerHeight = $("#fs_ltbox_liner").height(); // height of slideshow + close button
	var ContainerHeight = $("#fs_slideshow_container").outerHeight(); // height of JUST slideshow
	var buttonHeight = LinerHeight - ContainerHeight

	// actual number of pixels slideshow should be from top
	var offsetTop = (WinHeight - ContainerHeight) / 2;

	// number of px necessary to reach offsetTop
	var marginTop = offsetTop - buttonHeight;

	// if the window is not at the top, add the offset to the margin
	var offset = $(document).scrollTop();
	marginTop += offset;

	// if marginTop is a negative number, set it to a reasonable positive number instead
	if (marginTop < 0) {
		marginTop = 20;
	}

	if (WinHeight <= (LinerHeight + buttonHeight)) {
		marginTop = offset + 20;
	}

	$("#fs_ltbox_liner").css({
		"marginTop": marginTop
	});
}

function centerElementsHorizontallyAndVertically() {
	var ul_h = $("#fs_slideshow_els ul").height();
	var el = $("#fs_slideshow_els li");

	for (i=0;i<el.length;i++) {
		// get inside elements
		var element_wrapper = $(el[i]).find(".element_wrapper");
		var caption = $(el[i]).find(".caption");
		var img = $(el[i]).find("img");

		// center horizontally
		var li_w = $(el[i]).width();
		var element_wrapper_w = $(element_wrapper).width();
		var margin_left = (li_w - element_wrapper_w) / 2;
		$(element_wrapper).css({"marginLeft": margin_left});

		// center image vertically
		var img_h = $(img).height();
		var img_margin_top = (ul_h - img_h) / 2;
		$(img).css({"marginTop": img_margin_top, "marginBottom": img_margin_top});

		// center text vertically
		var element_wrapper_h = element_wrapper.height();
		var caption_h = $(caption).height();
		var caption_margin_top = (element_wrapper_h - caption_h) / 2;
		$(caption).css({"marginTop": caption_margin_top, "marginBottom": caption_margin_top});
	}
}

function moveSlideshow(direction) {
		if ( (direction == -1 && position > 0) || (direction == 1 && position < photos.length - 1)) {
			position = position + direction;
		}
		var offset = position * -810;
		$("#fs_slideshow_els ul").animate({
			"marginLeft": offset
		}, 1500);
		toggleElementVisibility();
		updateMenu();
		updateButtons();
}

function toggleElementVisibility() {
	var targeted_el = "#fs_slideshow_els li:eq(" + position + ")";
	$("#fs_slideshow_els li").fadeTo("fast", 0.33);
	$(targeted_el).fadeTo(1500, 1, function() {
		if(jQuery.browser.msie) {
			$(this).get(0).style.removeAttribute('filter');
		}
	});
}

function updateMenu() {
	var targeted_el = "#fs_slideshow_nav li:eq(" + position + ")";
	$("#fs_slideshow_nav li").removeClass("active");
	$(targeted_el).addClass("active");
}

function updateButtons() {
	$("#fs_slideshow_liner .nav_button a").removeClass("hide");
	if (position == 0) {
		$("#fs_slideshow_liner .nav_button .previous").addClass("hide");
	}
	else if (position == photos.length -1) {
		$("#fs_slideshow_liner .nav_button .next").addClass("hide");
	}
}

function getPosition(arrayName,arrayItem)
{
    for(var i=0;i<arrayName.length;i++){
       if(arrayName[i]==arrayItem)
            return i;
    }
}

function exists(el) {
	if ($(el).length > 0) {
		return true;
	}
	else {
		return false;
	}
}