var ProductBubble = {
	init:function() {
		// bind events
		$("#products #products-list li").hover(
			this.show,
			this.hide
		);
		$("#product-bubble").hover(
			function() {
				$("#product-bubble").show();
			},
			function() {
				$("#product-bubble").hide();
			}
		);
	},
	show:function() {
		var pb = $("#product-bubble");
		var attribs = $(this).find(".attributes");

		// generate content before displaying
		var title = attribs.find(".title").html();
		var desc = attribs.find(".desc").html();
		var ingredients = attribs.find(".ingredients").html().split(",");
		var icons = "";
		for (i in ingredients) {
			icons += "<li class=\"ico "+ingredients[i]+"\" title=\""+ingredients[i]+"\"></li>";
		}
		
		// put new content in bubble
		pb.find(".title").html(title);
		pb.find(".desc").html(desc);
		pb.find(".icons").html(icons);
		
		// position bubble to product being hovered over
		var x = $(this).position().left - 168 + ($(this).width() / 2);
		var y = $(this).position().top - pb.height() + 60;
		pb.css("left",x).css("top",y);
		
		// display
		pb.show();
	},
	hide:function() {
		// hide
		$("#product-bubble").hide();
	}
};
ProductBubble.init();


var StoreLocator = {
	request:false,
	init:function() {
		// display list of cities
		$("#store-locator .el.city").show();
		
		// disable submit button
		if ($("#store-locator select[name=\"city\"]").val() == "") {
			$("#store-locator input[type=\"submit\"]").attr("disabled",true);
		}
		
		// bind events
		$("#store-locator select[name=\"province\"]").change(function() {
			// terminate any identical, concurrent ajax requests
			if (StoreLocator.request) {
				StoreLocator.request.abort()
			}
			
			// disable submit button
			$("#store-locator input[type=\"submit\"]").attr("disabled",true);
			
			// get list of cities in selected province
			var province = $(this).val();
			StoreLocator.request = $.get("/store-locator/ajax/",{"province":province},StoreLocator.updateCities);
		});
		
		$("#store-locator select[name=\"city\"]").change(function() {
			// if selection has value, enable submit button
			if ($(this).val() == "") {
				$("#store-locator input[type=\"submit\"]").attr("disabled",true);
			} else {
				$("#store-locator input[type=\"submit\"]").attr("disabled",false);
			}
		});
	},
	updateCities:function(xml) {
		// flag the ajax request as completed
		StoreLocator.request = false;

		// put the list of cities in the dropdown
		var html = "<option value=\"\"></option>";
		$(xml).find("city").each(function() {
			html += "<option value=\""+$(this).attr("key")+"\">"+$(this).text()+"</option>";
		});
		$("#store-locator select[name=\"city\"]").html(html);
	}
};
StoreLocator.init();


var ProductDetailTabs = {
	init:function() {
		var tabContent = $("#product-detail .tabbed-content");
		if (!tabContent.length) {
			return false;
		}
		
		// rearrange HTML
		this.createTabs();
		
		// bind events
		$("#product-detail .tabs li a").click(this.swap);
	},
	createTabs:function() {
		var tabContent = $("#product-detail .tabbed-content");
		
		var tabs = [];
		var i = 0;
		tabContent.find(".tab").each(function() {
			var title = $(this).text();
			
			var cssClass = "";
			if (i == 0) {
				cssClass = " class=\"active\"";
			}
			tabs.push("<li"+cssClass+"><a href=\"#product-detail\">"+title+"</a><input type=\"hidden\" name=\"tab-content\" value=\""+i+"\" /></li>\n");
			i ++;
		});
		
		var contents = [];
		var first = true;
		tabContent.find(".content").each(function() {
			var html = $(this).html();
			
			var cssClass = "";
			if (first) {
				cssClass = " class=\"active\"";
				first = false;
			}
			contents.push("<li"+cssClass+">"+html+"</li>");
		});

		var tabHTML = "<ul class=\"tabs\">"+
			tabs.join("")+
			"</ul>";
			
		var contentHTML = "<ul class=\"contents\">"+
			contents.join("")+
			"</ul>";
		
		var html = tabHTML + contentHTML;
		
		tabContent.replaceWith(html);
	},
	swap:function() {
		// highlight the selected tab
		var tabs = $("#product-detail .tabs li");
		tabs.removeClass("active");
		$(this).parent().addClass("active");
		
		// show the content that goes with the selected tab
		var contents = $("#product-detail .contents li");
		contents.removeClass("active");
		contents.eq($(this).siblings("[name='tab-content']").val()).addClass("active");

		return false;
	}
};
ProductDetailTabs.init();