/** view vars */
var tabHover = "url(/images/tab.jpg) 0px -42px no-repeat";
var tabOff = "url(/images/tab.jpg) 0px -21px no-repeat";
var tabOn = "url(/images/tab.jpg) 0px 0px no-repeat";
var currentView = "currentView";

/** color and border vars */
var currentColor = "currentColor";
var inactiveColor = "inactiveColor";

/** size vars */
var currentSize = "currentSize";
var inactiveSize = "inactiveSize";

/** alignment vars */
var currentTextAlignment = "currentTextAlignment";
var inactiveTextAlignment = "inactiveTextAlignment";

$(document).ready(function(){	
	/***************************************
	Interface Functions
	***************************************/	
	
	$('#colorSelector').click(function() {
		$('#sizeList:visible').slideUp();
		$('#colorList').slideToggle();
	});
	$('#sizeSelector').click(function() {
		$('#colorList:visible').slideUp();
		$('#sizeList').slideToggle();
	});
	$('body').click(function(event) {
		if (!$(event.target).closest('#colorSelector').length) {
			$('#colorList:visible').slideUp();
		} 
		if (!$(event.target).closest('#sizeSelector').length) {
			$('#sizeList:visible').slideUp();
			$(this).dequeue();
		}
	});
		
	// zoom
	$('#zoom a').addClass('disabled');
	$('#zoom').click(function() {
		if (zoom) {
			$('#zoom a').removeClass("zoomOut").addClass("zoomIn");
			$('#zoom a').html("Zoom In");
			$('#artwork').removeClass("zoomedIn").addClass("zoomedOut");
			zoom = false;
			$('#artwork').unbind('mousemove');
			$('#artwork img').remove();
			updatePreviewText();
			updateProductBackground();
		} else if (!zoom && $('#productText').val().length > 0) {
			$('#zoom a').removeClass("zoomIn").addClass("zoomOut");
			$('#zoom a').html("Zoom Out");
			$('#artwork').removeClass("zoomedOut").addClass("zoomedIn");
			zoom = true;
			updatePreviewText();
			zoomPan();
		}
		return false;
	});

	$('#editTitle').click(function() {
		$('span.customTitle').hide();
		$('input.customTitle').show().focus();
		$(this).html("Done");
		return false;
	});
	$('.customTitle').click(function() {
		$('span.customTitle').hide();
		$('input.customTitle').show().focus();
		$('#editTitle').html("Done");
		return false;
	});	
	$('#customTitle').blur(function() {
		valNameForm(document.forms[0]);
		$('#editTitle').html("Edit Title");
	});
	$('#customTitle').keydown(function(event) {
		if (event.keyCode == '13') {
			$('#editTitle').html("Edit Title");
		}
	});
	
	$('.close').click(function() {
		$('#helpText').slideUp();
	});
	
	
	// *** Product choice functions *** //
	var currentProduct = "currentProduct";
	var inactiveProduct = "inactiveProduct";
	var inactiveProductBorder = "1px solid #ffffff";
	
	// Product choice click function
	$("#productList li").click(function() {
		if ($(this).attr("class") != "productCaption") {
			zoomOut();
			changedViews = true; // change this flag to true so that the updatePreviewText function knows to change the background as well
			$(this).attr("class", currentProduct); // Change to be a current product
			$(this).siblings(".currentProduct").attr("class", inactiveProduct); // Change all siblings to inactive
			$("#update_pid").val($(this).attr("id")); // update hidden product field
		
			// Clear artwork and then regenerate preview image
			$("#artwork").html("");
			
			updatePreviewText();
		}
		
		return false;
	});		
	
	// *** Text color options *** //
	$("#colorTool").click(function() {
		$("#colorDropDown").toggle();
		return false;
	});	
	
	$("#colorDropDown span").click(function() {	
		$("#colorDropDown").toggle();
		$("#colorTool").css("background","#" + $(this).attr("id"));
	});	
	
	// *** Text Nudge Tools *** //
	//  Text Nudge  hover function
	$("#nudgeTools td img").hover(function() {
		$(this).fadeTo(5, 100);
	},function() {
		$(this).fadeTo(5, 0.50);
	});	
	
	//  Text Nudge click function
			
});

function fixViewList() {
	$("#viewList li").click(function(){	
		
		if ($(this).hasClass("inactiveView")) {
		
			zoomOut();

			// XXX: Don't update if the view wasn't switched?
			if (t != $(this).prevAll().size()) {
				designDetails[v].text = previousText;

				t = $(this).prevAll().size(); // Get the current tab index. This determines which view we are on.	
				v = viewDetails[t].designDetail;
				changedViews = true; // change this flag to true so that the updatePreviewText function knows to change the background as well
				previousText = designDetails[v].text; // Update previousText var which is used in the updatePreviewText function

				$(this).attr("class", currentView); // Change to be a "currentView"
				$(this).siblings().attr("class", "inactiveView"); // Change all siblings to inactive

				$(".blockContainer").removeClass('onProduct').addClass('notOnProduct'); // reset all lyric block arrows to default state
				//$(".blockContainer").parent().next().children().removeClass("onProduct").addClass('notOnProduct');
				for (var x = 0; x < designDetails[v].lyricBlocksOnLocation.length; x++) { // for any lyric blocks on view, switch arrow back to the remove image
					$("#" + designDetails[v].lyricBlocksOnLocation[x]).removeClass('notOnProduct').addClass('onProduct');
					//$("#" + designDetails[v].lyricBlocksOnLocation[x]).removeClass(notOnProduct).parent().next().children().addClass("onProduct");
				}
				if ($("#songTitle").hasClass(onProduct)) {
					$("#songTitle").removeClass(onProduct).addClass(notOnProduct); // reset to default state
				}
				if ($(".blockContainer p span.line").hasClass('onProduct')){
					$(".blockContainer p span.line").removeClass('onProduct').addClass('notOnProduct'); // reset all lines to default state
				}
				// for any selected lines on view, switch classes back to onProduct
				for (var x = 0; x < designDetails[v].lyricLinesOnLocation.length; x++) { // for any lyric blocks on view, switch arrow back to the remove image
					$("#" + designDetails[v].lyricLinesOnLocation[x]).removeClass('notOnProduct').addClass('onProduct');
				}		

				// Update form properties with current view details properties
				$("#productText").val(designDetails[v].text);
				tinyMCE.get("productText").setContent(designDetails[v].text);

				$("#productText").val(designDetails[v].text);
				$("#update_lyricProduct_alignment").val(designDetails[v].textAlign);
				$("#update_lyricProduct_xPosition").val(designDetails[v].xPosition);
				$("#update_lyricProduct_yPosition").val(designDetails[v].yPosition);
				$("#update_lyricProduct_lineSpacing").val(designDetails[v].lineSpacing);
				$("#update_tcid").val(designDetails[v].tcid);
				$('.mce_textcolor').css('background-color', designDetails[v].fontColor);

				// Update graphic controls
				$("#textAlignmentList li img#" + designDetails[v].textAlign).attr("class",currentTextAlignment).fadeTo(5, 100).parent().siblings().children().attr("class",inactiveTextAlignment).fadeTo(5, 0.50); // Update text align display

				// Clear artwork and then regenerate preview image
				$("#artwork").html("");

				// Only update the preview text if there is text to update or if we removed the last bit of text from a view
				if ($("#productText").val().length < 1 && previousText.length < 1) {
					updateProductBackground();	
				changedViews = false; // toggle this flag to false so that the background is not updated every time text is updated
			    } else {		
					updatePreviewText();
					if (changedViews) {
					updateProductBackground();	
					changedViews = false; // toggle this flag to false so that the background is not updated every time text is updated		
				}	
				}
			}

			if (tinyMCE.get('productText').getContent().length == 0) {
				$('#zoom a').addClass('disabled');
			} else {
				$('#zoom a').removeClass('disabled');
			}
		
		}
		
		return false;
	});
}

function fixColorList() {
	$("ul#colorList li").click(function() {
		$('#colorList').slideUp();
		$('#color').css('background', $(this).css('background'));
		if ($(this).attr("class") != "colorCaption") {
			$(this).attr("class",currentColor); // Change to be a current color
			$(this).siblings(".currentColor").attr("class", inactiveColor); // Change all siblings to inactive
			$("#update_pcid").val($(this).attr("id")); // update hidden color field
		
			// Clear artwork and then regenerate preview image
			$("#artwork").html("");
			
			updateProductBackground();	
			updatePreviewText();
		}
		
		return false;
	});
};

function fixSizeList() {
	$("#sizeList li").click(function() {	
		$('#sizeList').slideUp();
		$("#size").html($(this).html());
		$(this).attr("class", currentSize); // Change to be a "currentSize"
		$(this).siblings().attr("class", inactiveSize); // Change all siblings to inactive
	
		$("#sizeList li").attr("class", inactiveSize); // Change all to inactive
		$(this).attr("class", currentSize); // Change active to be a "currentSize"
		$("#update_psid").val($(this).attr("id")); // update hidden color field
		
		updatePrice();
		
		return false;
	});
}

$(document).ready(function() {
	fixViewList();
	fixColorList();
	fixSizeList();
});

function zoomOut() {
	$('#zoom a').removeClass("zoomOut").addClass("zoomIn");
	$('#zoom a').html("Zoom In");
	$('#artwork').removeClass("zoomedIn").addClass("zoomedOut");
	$('#artwork').unbind('mousemove');
	zoom = false;
}

function zoomPan() {
			$('#artwork').children().addClass("zoomed");

	$('#artwork').mousemove(function(e) {
		var divWidth = $(this).width();
		var divHeight = $(this).height();
		var imgWidth = $(this).children().width();
		var imgHeight = $(this).children().height();
		var divOffset = $(this).offset();
		var leftPan = (e.pageX - divOffset.left) * (divWidth - (imgWidth+60)) / (divWidth+1*2);
		
		if(imgHeight > divHeight){
			var topPan = (e.pageY - divOffset.top) * (divHeight - (imgHeight+60)) / (divHeight+1*2);
		}else{
			var topPan = -(e.pageY - divOffset.top) * (divHeight - (imgHeight+60)) / (divHeight+1*2);
		}
		
		$(this).children().css({position: "relative", left: leftPan, top: topPan, padding: "30px"});
	});
}

function valNameForm(form) {
	$('input.customTitle').hide();
	$('span.customTitle').html(form.productDesignName.value).show();
	updateName();
	return false;
}