Luckow = {};
/**
 * All functions needed for the portfolio page
 * are defined here.
 *
 * @author RavCode <ravi@ravcode.com>
 * @version 1 July 5, 2010
 */
 
/**
 * @description Finds and returns all the portfolio items that match
 * the passed in tags. Items are read from the Data store.
 *
 * @param Array tags Tags to be matched
 * @return Array All matched portfolio items are returned in
 * an array.
 */
var getPortfolioDataByTags = function(tags) {
	return $.grep(Portfolio.Data.portfolio, function(item){ 
		if(item == undefined) {
			return false;
		} else {
			var match = false;
			for(var i = 0; i < tags.length; i++) {
				if(item.tags != undefined && item.tags.indexOf(tags[i]) != -1) {
					match = true;
					break;
				}
			}
			return match;
		}
	});
};

/**
 * @description Function loads the Portfolio on the 
 * page. This sets up all the required HTML and the mouseover
 * handlers. Each page is set to show a max of 8 Portfolio Items.
 * This can be changed by changing the constant MAX_ITEMS.
 * 
 * @param Array portfolio_items Portfolio Items with their data
 * which have to loaded on the page.
 *
 * @return Boolean True if the operation was successful
 */
var loadPortfolioItems = function(portfolio_items) {
	$("#portfolio_thumbnails").html("");
	var count = 1;
	var MAX_ITEMS = 12;
	var appCont = document.createElement("div");
	$(appCont).addClass("appCont");
	$("#portfolio_thumbnails").append(appCont);
	$.each(portfolio_items,function(index){
		if(this == undefined) {
			return;
		}
		var portfolio_item = document.createElement("div");
		$(portfolio_item).attr("name", this.tags);
		$(portfolio_item).addClass("thumbnail");
		var pimg = "<div class=\"product_img\">";
		pimg += "<a rel=\"prettyPhoto[mixed]\" href=\"" + Luckow.__base_url + "/portfolio/" + (this.src != undefined ? this.src : (this.img.replace("_TH","") + ".jpg")) + "\" title=\"Category: " + this.title + " Client: " + this.sub_title + "\">";
		pimg += "<img width=\"175px\" height=\"80px\" src=\"" + Luckow.__base_url + "/portfolio/" + this.img + ".jpg\" />";
		pimg += "</a></div>";
		$(portfolio_item).append(pimg);
		$(portfolio_item).append("<div class=\"product_title\">" + this.title + "</div>");
		$(portfolio_item).append("<div class=\"product_subtitle\">" + this.sub_title + "</div>");
		$(appCont).append(portfolio_item);
		
		if(count >= MAX_ITEMS) {
			count = 0;
			appCont = document.createElement("div");
			$(appCont).addClass("appCont");
			$(appCont).hide();
			$("#portfolio_thumbnails").append(appCont);
		}
		count++;
	});
	$(".pp_pic_holder, .ppt, .pp_overlay").remove();
	$("a[rel^='prettyPhoto']").prettyPhoto({
		theme: 'light_square',
		markup: '<div class="pp_pic_holder"> \
					<div class="pp_top"> \
						<div class="pp_left"></div> \
						<div class="pp_middle"></div> \
						<div class="pp_right"></div> \
					</div> \
					<div class="pp_content_container"> \
						<div class="pp_left"> \
						<div class="pp_right"> \
							<div id="lightbox-content" class="pp_content"> \
								<div class="pp_fade"> \
									<div id="lightbox-details" class="pp_details clearfix"> \
										<a class="pp_close" href="#">Close</a> \
										<p class="pp_description"></p> \
										<div class="pp_nav"> \
											<p class="currentTextHolder">0of0</p> \
										</div> \
										<a class="pp_next" href="#">next</a> \
										<a class="pp_previous" href="#">previous</a> \
									</div> \
									<div class="pp_loaderIcon"></div> \
									<div class="pp_hoverContainer"> \
									</div> \
									<div id="pp_full_res"></div> \
								</div> \
							</div> \
						</div> \
						</div> \
					</div> \
					<div class="pp_bottom"> \
						<div class="pp_left"></div> \
						<div class="pp_middle"></div> \
						<div class="pp_right"></div> \
					</div> \
				</div> \
				<div class="pp_overlay"></div> \
				<div class="ppt"></div>'
	});	
	hideShowArrows();
	return true;
};

/**
 * @description This function checks the portfolio 
 * containers and makes a decision of whether to show 
 * the left and the right arrow. For e.g., only if there is
 * another container of portfolio items, compared to the current
 * one, the right arrow is shown.
 */
var hideShowArrows = function() {
	var curr_app_cont = $(".appCont:visible");
	if(!curr_app_cont.next().length) {
		$("#right_arrow").css("visibility","hidden");
	} else {
		$("#right_arrow").css("visibility","visible");
	}

	if(!curr_app_cont.prev().length) {
		$("#left_arrow").css("visibility","hidden");
	} else {
		$("#left_arrow").css("visibility","visible");
	}
};

Luckow.init = function() {
	$("button, input:submit, input[type='reset'], input[type='button']").button();
	var login = document.getElementById("login");
	if(login != null) {
		//Login seed
		$('#client_login_form').submit(function() {
			$.ajax({
				type:"GET",
				url: Luckow.__base_url + "/user-auth/seed", 
				success: function(s) {
					var pass = document.getElementById("client_password");
					var form = document.getElementById("client_login_form");
					pass.value = $.secure(s + pass.value);
					form.submit();
				}
			});
			return false;
		});
	}
	if($("#main_page_slides").length){
		$("#main_page_slides").nivoSlider({
			effect: 'fade', 
			slices: 10, 
			animSpeed:500, 
			pauseTime:10000, 
			directionNav: false, 
			directionNavHide: false,
			controlNav: false,
			pauseOnHover: false
		});
	}
	$("#admin_tabs").addClass("ui-tabs ui-widget ui-widget-content ui-corner-all");
	$(".delete-action").click(function() {
		var ele = this;
		$("#delete_confirm").dialog({
			resizable: false,
			dialogClass: "delete-confirm",
			height:150,
			modal: true,
			buttons: {
				Delete: function() {
					window.location.href = $(ele).attr("href");
					$(this).dialog('close');
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			}
		});
		return false;
	});
	if($("#admin_tabs").length) {
		$("input[name='asset_type']").click(function() {
			if(this.value === "1") {
				$("#asset_link_container").hide();
				$("#asset_link_input").hide();				
				$("#asset_file_container").show();
				$("#asset_file_input").show();
				$("#asset_link_input")[0].value = '';
			} else if(this.value == "2") {
				$("#asset_link_container").show();
				$("#asset_link_input").show();		
				$("#asset_file_container").hide();
				$("#asset_file_input").hide();
				$("#asset_file_input")[0].value = '';
			}
		});
	}

};

Luckow.initPortfolio = function() {
	var nav_list = $("#sort_panel");
	/*
		Load the side navigation. Each Navigation item corresponds to a tag, which
		is then used to filter the portfolio to be loaded.
		By default, select the All nav item.
	*/
	var list = "";
	$.each(Portfolio.Data.navigation,function(index) {
		if(this != undefined) {
			list = "<ul>";
			$.each(this, function(){
				
				list += "<li><input type='checkbox' name=\""+this[1]+"\" />"+this[0]+"</li>";
			});
			list += "</ul>";
			nav_list.append(list);
		}
	});
	$("input[name='all']")[0].checked = true;
	
	$("#sort_panel input").click(function(){
		if(this.name == "all" && this.checked) {
			$("#sort_panel input").removeAttr('checked');
			this.checked = true;
			loadPortfolioItems(Portfolio.Data.portfolio);
			window.location.hash = '';
		} else {
			$("input[name='all']").removeAttr('checked');
			var all_checks = $("#sort_panel input");
			var tags = [];
			var tag_titles = [];
			for(var i = 0; i < all_checks.length; i++) {
				if(all_checks[i].checked) {
					tags.push(all_checks[i].name);
					tag_titles.push((all_checks[i].parentNode.innerHTML).replace(/<\/?[^>]+>/gi, ''));				
				}
			}
			if(tags.length) {
				$("#portfolio_panel .panel_title").html(tag_titles.join(", ") + " Design Examples");
				loadPortfolioItems(getPortfolioDataByTags(tags));
				window.location.hash = "#" + tags.join("/");
			} else { //Nothing checked. Load All
				$("#portfolio_panel .panel_title").html("All Design Examples");
				loadPortfolioItems(Portfolio.Data.portfolio);
				window.location.hash = '';
				$("input[name='all']").attr('checked', 'checked');
			}
		}
	});
	
	//Initial load..check if specific ones have to be loaded or load all
	if(window.location.hash) {
		var items_to_load = window.location.hash.replace("#","").split("/");
		var tag_titles = [];
		loadPortfolioItems(getPortfolioDataByTags(items_to_load));
		$.each($("#sort_panel input"), function() {
			if(items_to_load.indexOf(this.name) != -1) {
				this.checked = true;
				tag_titles.push((this.parentNode.innerHTML).replace(/<\/?[^>]+>/gi, ''));					
			} else {
				$(this).removeAttr("checked");
			}
		});
		if(tag_titles.length) {
			$("#portfolio_panel .panel_title").html(tag_titles.join(", ") + " Design Examples");
		} else {
			$("#portfolio_panel .panel_title").html("All Design Examples");
		}
	} else {
		loadPortfolioItems(Portfolio.Data.portfolio);
	}
	/*
		Define handlers for left and right arrows.
	*/	
	$("#right_arrow").click(function(){
		var curr_app_cont = $(".appCont:visible");
		if(curr_app_cont.next()) {
			curr_app_cont.hide();
			curr_app_cont.next().show("slide", {direction: 'right'}, 200, hideShowArrows);
			hideShowArrows();
		}
	});
	
	$("#left_arrow").click(function(){
		var curr_app_cont = $(".appCont:visible");
		if(curr_app_cont.prev()) {
			curr_app_cont.hide();
			curr_app_cont.prev().show("slide", {direction: 'left'}, 200, hideShowArrows);
			hideShowArrows();
		}
	});
};