$(document).ready(function(){
	// Setup the Quick Look 
	$("#shop_jewelry .row img, #createCollection .row img").each(function(){
		// Create the Quick Look link and pull the ID's from the original link
		var origLink = $(this).parent().attr("href").toLowerCase();
		//var designerID = origLink.substring(origLink.indexOf("designerid=")+11,origLink.indexOf("&itemid"));
		var itemID = origLink.substring(origLink.indexOf("itemid=")+7);
		//var quickLookLink = $('<a href="#" class="quickLookLink designerID_'+designerID+' itemID_'+itemID+'">Quick Look</a>');
		var quickLookLink = $('<a href="#" class="quickLookLink itemID_'+itemID+'">Quick Look</a>');
		// Place the Quick Look link on the page
		quickLookLink.insertAfter($(this).parent());
		// Add mouseover/out handler to jewelry photos
		$(this).parent().parent().mouseenter(function(){
			$(this).find("a[class^='quickLookLink']").show();
		}).mouseleave(function(){
			$(this).find("a[class^='quickLookLink']").hide();
		});
	});
	
	
	// Handle the click event of the Quick Look link
	$("a.quickLookLink").live("click",function(e){
		e.preventDefault();
		// Get the Designer and Item ID's to pass along to Overlay
		//var designerID = $(this).attr("class").split(" ").splice(1,1).toString();
		var itemID = $(this).attr("class").split(" ").splice(1,1).toString();
		//designerID = designerID.substring(designerID.indexOf("_")+1);
		itemID = itemID.substring(itemID.indexOf("_")+1);
		// Create overlay and background coverup
		var coverup = $("<div/>").attr("id","coverup");
		//var overlay = $("<div/>").attr("id","overlay").attr("class","DesignerID_"+designerID+" ItemID_"+itemID);
		var overlay = $("<div/>").attr("id","overlay").attr("class","ItemID_"+itemID);
		// Populate overlay with loading animation
		var loading = $('<div class="quickLookLoading"></div>');
		overlay.html(loading);
		// Attach close event to coverup
		$("#coverup").live("click",function(){
			$("#coverup, #overlay").remove();
		});
		// Place coverup and overlay in DOM
		$("body").append(coverup).append(overlay);
		// Position and Show coverup and overlay
        positionDiv("#overlay");
		$("#coverup").fadeIn(300);
		$("#overlay").fadeIn(300, function(){
			//var designerID = $(this).attr("class").split(" ").splice(0,1).toString();
			var itemID = $(this).attr("class").split(" ").splice(0,1).toString();
			//designerID = designerID.substring(designerID.indexOf("_")+1);
			itemID = itemID.substring(itemID.indexOf("_")+1);
			//showQuickLookAJAX(designerID,itemID);
			showQuickLookAJAX(itemID);
		});
	});
});


//function showQuickLookAJAX(d,i){ // (designerID,itemID)
function showQuickLookAJAX(i){ // (itemID)
	$.ajax({
		type: "GET",
		url: "shop_prodDetail.cfm",
		//data: "QuickLook=true&DesignerID="+d+"&ItemID="+i,
		data: "QuickLook=true&ItemID="+i,
		cache: false,
		dataType: "html",
		success: function(html){
			// SUCCESS POSTING DATA
			$("#overlay .quickLookLoading").fadeOut("slow", function(){
				// Remove loading animation
				$("#overlay .quickLookLoading").remove();
				// Add close button
				var closeButton = $('<div class="quickLookClose"><a href="#" class="closeQuickLook"><img src="images/quickLook_close.gif" alt="Close Window" title="Close Window" width="52" height="17" border="0" /></a></div>');
				$("a.closeQuickLook").live("click",function(e){
					e.preventDefault();
					$("#coverup, #overlay").remove();
				});
				$("#overlay").append(closeButton);
				// Add content
				$("#overlay").append(html);
			});
		}, error: function(){
			// ERROR POSTING DATA
			$("#overlay .quickLookLoading").fadeOut("slow", function(){
				// Remove loading animation
				$("#overlay .quickLookLoading").remove();
				// Add close button
				var closeButton = $('<div class="quickLookClose"><a href="#" class="closeQuickLook"><img src="images/quickLook_close.gif" alt="Close Window" title="Close Window" width="52" height="17" border="0" /></a></div>');
				$("a.closeQuickLook").live("click",function(e){
					e.preventDefault();
					$("#coverup, #overlay").remove();
				});
				$("#overlay").append(closeButton);
				// Add content
				var errorMsg = '<div class="quickLookError"> \
							<h3>We\'re sorry. There was a slight problem.</h3> \
							<p> \
							Please <a href="#" class="closeQuickLook">close this window</a> and try again. \
							</p> \
							</div>';
				$("#overlay").append(errorMsg);
			});
		}
	});
}


function postToShoppingBag(i){
	var overlayCoverup = $('<div class="overlayCoverup"></div>');
	var overlayCoverupLoading = $('<div class="overlayCoverupLoading"></div>');
	$("#productDetail").append(overlayCoverup)
	$("#productDetail").append(overlayCoverupLoading)
	$.ajax({
		type: "POST",
		url: "shop_shoppingBag1.cfm",
		data: "QuickLook=true&AddToCart=Yes&ItemID="+i,
		cache: false,
		dataType: "html",
		success: function(html){
			// SUCCESS POSTING DATA
			var newHTML = '<div class="quickLookSuccess"> \
							<h3>Your item has been added to your shopping bag.</h3> \
							<p> \
							<a href="#" class="closeQuickLook">Continue Shopping</a> <a href="shop_shoppingBag1.cfm">View Shopping Bag</a> \
							</p> \
							</div>';
			$("#overlay #productDetail").remove();
			$("#overlay").append(newHTML);
		}, error: function(){
			// ERROR POSTING DATA
			var errorMsg = '<div class="quickLookError"> \
							<h3>We\'re sorry. There was a slight problem.</h3> \
							<p> \
							Please <a href="#" class="closeQuickLook">close this window</a> and try again. \
							</p> \
							</div>';
			$("#overlay #productDetail").remove();
			$("#overlay").append(errorMsg);
		}
	});
}




// Position element centered on the screen
//========================================
function positionDiv(id){
	var l = ($(window).width()-$(id).width())/2;
	var t = ($(window).height()-$(id).height())/2;
	$(id).css("left",l);
	$(id).css("top",t);	
	
	//If the User resizes the window, adjust the #container height
	$(window).bind("resize", function(){
		updatePosition(id)
	});
	
}
function updatePosition(id,w) {
	var l = ($(window).width()-$(id).width())/2;
	var t = ($(window).height()-$(id).height())/2;
	if(w!=1){
		$(id).css("left",l);
		$(id).css("top",t);	
	} else {
		$(id).css("left",l);
	}
}