var defaultError = "Sorry, an unexpected error occurred.<br />Please refresh the page and start over.";
var active = false;
	
$(document).ready(function() {			
	/***************************************
	AJAX Functions
	***************************************/		
	var updatePreviewTextUrl = "/product/update.action";
	var updatePriceUrl = "/product/updatePrice.action";
	var updateNameUrl = "/product/updateName.action";
	
	updatePreviewText = function() {
		$("#loadingGif").css("visibility", "visible"); // Show the loading gif
		
		var previewData = {
			"viewid": viewDetails[t].viewid,
			"ln": viewDetails[t].locationName,
			"lid": $("#update_lid").val(),
			"pid": $("#update_pid").val(),
			"psid": $("#update_psid").val(),
			"pcid": $("#update_pcid").val(), 
			"pdid": $("#update_pdid").val(), 
			"tcid": $("#update_tcid").val(),
			"productImage.xPosition": $("#update_lyricProduct_xPosition").val(),
			"productImage.yPosition": $("#update_lyricProduct_yPosition").val(),
			"productImage.text": $("#productText").val(),
			"productImage.textAlignment": $("#update_lyricProduct_alignment").val(), 
			"productImage.lineSpacing": $("#update_lyricProduct_lineSpacing").val(),
			"productImage.defaultPosition": designDetails[v].defaultPosition,
			"zoom": zoom
		};
		
		if (!active) {
			active = true;
			$.ajax({
				type: "POST",
				url: updatePreviewTextUrl,
				data: previewData,
				dataType: "json",
				success: function(data){
					if (data != null) {
						var width = parseInt(data.viewX);
						var height = parseInt(data.viewY);
						var offsetX = parseInt(data.offsetX);
						var offsetY = parseInt(data.offsetY);
						var responseViewList = "";
						var responseColorList = "";
						var responseTextColorList = "";
						var responseSizeList = "";
						
						$("#artwork").html(data.image);
						$("#update_lyricProduct_xPosition").val(data.xPos);
						$("#update_productImage_yPosition").val(data.yPos);
						$("#update_productImage_lineSpacing").val(data.lineSpacing);
						$("#price").html(data.price);
						$("#update_tcid").val(data.tcid);
													
						if (designDetails[v].text.length == 0) {
							$('#zoom a').addClass('disabled');
						}
						else {
							$('#zoom a').removeClass('disabled');
						}
							
						if (zoom) {
							if ( $('#colorSelector').is(':visible') ) {
								$('#product').css('background', $('#color').css('background-color'));
							} else {
								$('#product').css('background', '#FFFFFF');
							}

							$('#productOverlay').removeClass();
							
							$('#artwork').css('margin', '0 auto');
							$('#artwork').width(395);
							$('#artwork').height(376);
						
							$('#artwork img').load(function() {
								var imgWidth = $(this).width();
								var rightOffset = (imgWidth - 395)/2;
								$(this).css({position: "relative", top: "30px", right: rightOffset});
							});
						}
						else {
							var backgroundImage = '/images/productImages/' + $('#productList li.currentProduct a').attr('rel');
							if (data.colors.length > 0) {
								backgroundImage = backgroundImage + $('#colorList li.currentColor a').attr('rel');
							}
							backgroundImage = backgroundImage + $('#viewList li.currentView a').attr('rel') + '.jpg';
							$("#product").css("background", "url(" + backgroundImage + ") no-repeat top center");
							
							var productId = $("#update_pid").val();
							
							if (productId == 198 || productId == 199) {
								$("#artwork").addClass("mug");
							} else if ($("#artwork").hasClass("mug")) {
								$("#artwork").removeClass("mug");
							}
							
							$("#artwork").css("margin-left", offsetX);
							$("#artwork").css("margin-top", offsetY);
							$("#artwork").width(width);
							$("#artwork").height(height);
						}
						
						
						designDetails[v].fontColor = '#' + data.textColorValue;
						designDetails[v].tcid = data.tcid;
						
						for (var i = 0; i < data.views.length; i++) {
							responseViewList += data.views[i];
						}
						$("#viewList").html(responseViewList);
						
						while (designDetails.length < data.designs.length) {
							var newDesign = {
								text: '',
								fontColor: '#ffffff',
								tcid: 0,
								textAlign: 'center',
								xPosition: 0,
								yPosition: 0,
								defaultPosition: true,
								lyricBlocksOnLocation: [],
								lyricLinesOnLocation: [],
								printTemplateId: data.designs[designDetails.length].id,
								lineSpacing: 1
							};
							designDetails.push(newDesign);
						}
						
						var viewIndex = 0;
//						while (viewDetails.length < data.views.length) {
//							var newView = data.viewList[viewIndex];
//							var found = false;
//							for (var i = 0; i < viewDetails.length; i++) {
//								if (newView.viewid == viewDetails[i].viewid) {
//									found = true;
//								}
//							}
//							if (!found) {
//								viewDetails.push(newView);
//							} else {
//								viewDetails.pull();
//							}
//							viewIndex++;
//						}
						viewDetails = data.viewList;
						
						for (var i = 0; i < data.colors.length; i++) {
							responseColorList += data.colors[i];
						}
						$("#colorList").html(responseColorList);
						
						for (var i = 0; i < data.sizes.length; i++) {
							responseSizeList += data.sizes[i];
						}
						$("#sizeList").html(responseSizeList);
						
						textColors = data.textcolorsold;
						
						var textColor = tinyMCE.get('productText').controlManager.get('textcolor');
						if (textColor.menu == null) {
							textColor.renderMenu();
						}
						if (textColor.menu != null) {
						
							if (textColors.length > 0) {
								textColor.menu.removeAll();
								// text colors have been loaded in, so reset the array
								textColorArr = new Array();
								
								var tc_elem = $(textColors);
								var tc_span = $('*', tc_elem).andSelf();
								
								var counter = 0;
								for (var i = 0; i < tc_span.length; i++) {
									var id = $(tc_span[i]).attr('id');
									var rel = $(tc_span[i]).attr('rel');
									if (id != undefined && id.length > 0) {
										textColorArr[counter] = {
											tcid: id,
											hexVal: rel
										}
										if ($.browser.msie) {
											document.styleSheets[3].addRule('.mce_' + rel, 'background-color: #' + rel + ' !important;', 0);
										}
										else {
											document.styleSheets[3].insertRule('.mce_' + rel + ' { background-color: #' + rel + ' !important; }', 0);
										}
										counter++;
									}
								}
								for (var i = 0; i < textColorArr.length; i++) {
									textColor.menu.add({
										title: '',
										icon: textColorArr[i].hexVal,
										tcid: textColorArr[i].tcid,
										onclick: function(){
											$('.mce_textcolor').css('background-color', $('ul#colorList li.currentColor').css('background-color'));
											$('.mce_textcolor').css('color', '#' + this.icon);
											
											$('#update_tcid').val(this.tcid);
											updatePreviewText();
											designDetails[v].fontColor = this.icon;
											designDetails[v].tcid = this.tcid;
										}
									});
								}
								$('.mce_textcolor').css('color', designDetails[v].fontColor);
								if ($('ul#colorList li.currentColor').length > 0) {
									$('.mce_textcolor').css('background-color', $('ul#colorList li.currentColor').css('background-color'));
								} else {
									$('.mce_textcolor').css('background-color', '#fff');
								}
							}
						}
						
						if (t >= viewDetails.length || viewDetails[t].viewid != data.viewId) {
							// TODO: Refactor with viewList.click function
							changedViews = true;
							t = 0;
							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
							$('.blockContainer').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");
							}
							
							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);
							
							if (designDetails[v].text.length == 0) {
								$('#zoom a').addClass('disabled');
							}
							else {
								$('#zoom a').removeClass('disabled');
							}
							
							$("#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 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
						}
						
						if (changedViews) {
							updateProductBackground();
							changedViews = false; // toggle this flag to false so that the background is not updated every time text is updated		
						}
						
						previousText = $("#productText").val(); // Get updated text value for use in the if block that begins this method	
						fixViewList();
						fixColorList();
						fixSizeList();
					}
					else {
						$("#errorPopupContent").html(data);
						displayPopUp('errorPopup', 150, 200, false);
					}
					$("#loadingGif").css("visibility", "hidden");
					active = false;
				},
				error: function(xhr, ajaxOptions, thrownError){
					$("#errorPopupContent").html(defaultError);
					displayPopUp('errorPopup', 150, 200, false);
					$("#loadingGif").css("visibility", "hidden");
					active = false;
				}
			});
		}
	}
	
	updatePrice = function() {
		$("#loadingGif").css("visibility", "visible"); // Show the loading gif
		
		var previewData = {
			"viewid": viewDetails[t].viewid,
			"ln": viewDetails[t].locationName,
			"lid": $("#update_lid").val(),
			"pid": $("#update_pid").val(),
			"psid": $("#update_psid").val(),
			"pcid": $("#update_pcid").val(), 
			"pdid": $("#update_pdid").val(), 
			"tcid": $("#update_tcid").val(),
			"productImage.xPosition": $("#update_lyricProduct_xPosition").val(),
			"productImage.yPosition": $("#update_lyricProduct_yPosition").val(),
			"productImage.text": $("#productText").val(),
			"productImage.textAlignment": $("#update_lyricProduct_alignment").val(), 
			"productImage.lineSpacing": $("#update_lyricProduct_lineSpacing").val(),
			"productImage.defaultPosition": designDetails[v].defaultPosition
		};
		
		if (!active) {
			active = true;
			$.ajax({
				type: "POST",
				url: updatePriceUrl,
				data: previewData,
				dataType: "json",
				success: function(data){
					$("#loadingGif").css("visibility", "hidden");
					if (data != null) {
						$("#price").html(data.price);
					}
					else {
						$("#errorPopupContent").html(defaultError);
						displayPopUp('errorPopup', 150, 200, false);
					}
					active = false;
				},
				error: function(xhr, ajaxOptions, thrownError){
					$("#errorPopupContent").html(defaultError);
					displayPopUp('errorPopup', 150, 200, false);
					$("#loadingGif").css("visibility", "hidden");
					active = false;
				}
			});
		}
	}
	
	
	updateName = function() {
		$("#loadingGif").css("visibility", "visible"); // Show the loading gif
		
		var previewData = {
			"viewid": viewDetails[t].viewid,
			"ln": viewDetails[t].locationName,
			"lid": $("#update_lid").val(),
			"pid": $("#update_pid").val(),
			"psid": $("#update_psid").val(),
			"pcid": $("#update_pcid").val(), 
			"pdid": $("#update_pdid").val(), 
			"tcid": $("#update_tcid").val(),
			"productImage.xPosition": $("#update_lyricProduct_xPosition").val(),
			"productImage.yPosition": $("#update_lyricProduct_yPosition").val(),
			"productImage.text": $("#productText").val(),
			"productImage.textAlignment": $("#update_lyricProduct_alignment").val(), 
			"productImage.lineSpacing": $("#update_lyricProduct_lineSpacing").val(),
			"productImage.defaultPosition": designDetails[v].defaultPosition,
			"designName": $("#customTitle").val().replace(/\"/g, "")
		};
		
		if (!active) {
			active = true;
			$.ajax({
				type: "POST",
				url: updateNameUrl,
				data: previewData,
				dataType: "json",
				success: function(data){
					$("#loadingGif").css("visibility", "hidden");
					if (data == null) {
						$("#errorPopupContent").html(defaultError);
						displayPopUp('errorPopup', 150, 200, false);
					}
					active = false;
				},
				error: function(xhr, ajaxOptions, thrownError){
					$("#errorPopupContent").html(defaultError);
					displayPopUp('errorPopup', 150, 200, false);
					$("#loadingGif").css("visibility", "hidden");
					active = false;
				}
			});
		}
	}
	
});

function clearDesign(lid) {
	var clearDesignUrl = "/product/clear.action";
	$("#loadingGif").css("visibility", "visible"); // Show the loading gif
	
	if (lid != 0) {
		var updateLyricsUrl = "/search/lyrics.action?"
		$("#searchForm input").addClass("loading");
		$.post(updateLyricsUrl, { "itemId" : lid }, function(data){ 
       		$("#result").html(data);
		
			if ($("#update_lid").val() != 0) {
				setLyricClasses();
			}

			$("#searchForm input").removeClass("loading");

     		$("#searchTabs li a").removeClass("active");

			$("#searchPanel").hide();
			$("#artistPanel").hide();
			$("#genrePanel").hide();
			$("#result").show();

       		$("#searchForm input").removeClass("loading");

			$("div.blockControl").vAlign();
			$("span.lineControl").vAlign();
       		
		});
		
		if (!productLoaded) {
			loadProductAction();
		}
	}

	if (!active) {
		active = true;
		$.ajax({
			type: "POST",
			url: clearDesignUrl,
			data: {
				"pdid": $("#update_pdid").val(),
				"viewid": viewDetails[t].viewid
			},
			dataType: "json",
			success: function(data){
				$("#loadingGif").css("visibility", "hidden");
				if (data != null) {
					$("#productText").val("");
					tinyMCE.get("productText").setContent("");
					$("#update_lyricProduct_xPosition").val("0");
					$("#update_lyricProduct_yPosition").val("0");
					$("#update_lyricProduct_alignment").val("center");
					$("#update_lyricProduct_lineSpacing").val("1");
					previousText = "";
					$("#price").html(data.price);
					$("#update_tcid").val(data.tcid);
					$("#update_lid").val(0);
					$("#artwork").html("");
					$('.mce_textcolor').css('color', data.textColorValue);
					for (var i = 0; i < designDetails.length; i++) {
						designDetails[i].text = "";
						designDetails[i].xPosition = 0;
						designDetails[i].yPosition = 0;
						designDetails[i].defaultPosition = true;
						designDetails[i].lineSpacing = 1;
						designDetails[i].lyricBlocksOnLocation = [];
						designDetails[i].lyricLinesOnLocation = [];
						designDetails[i].fontColor = "#ffffff";
						designDetails[i].tcid = 0;
						designDetails[i].textAlign = "center";
					}
					// clear selected lyric lines and blocks
					$('p.lyricBlock span').removeClass('onProduct').addClass('notOnProduct');
					$('.blockContainer').removeClass('onProduct').addClass('notOnProduct');
					$('p.lyricBlock').removeClass('onProduct').addClass('notOnProduct');
					$("#songTitle").removeClass('onProduct').addClass('notOnProduct');
					$('#zoom a').addClass('disabled');
					zoomOut();
					var width = parseInt(data.width);
					var height = parseInt(data.height);
					var offsetX = parseInt(data.offsetX);
					var offsetY = parseInt(data.offsetY);
					
					var backgroundImage = '/images/productImages/' +
					$('#productList li.currentProduct a').attr('rel');
					if ($('#colorList li.currentColor a').attr('rel') != undefined) {
						backgroundImage = backgroundImage + $('#colorList li.currentColor a').attr('rel');
					}
					backgroundImage = backgroundImage + $('#viewList li.currentView a').attr('rel') + '.jpg';
					$("#product").css("background", "url(" + backgroundImage + ") no-repeat top center");
					$("#artwork").css("margin-left", offsetX);
					$("#artwork").css("margin-top", offsetY);
					$("#artwork").width(width);
					$("#artwork").height(height);
					$("#customTitle").val("");
					$('span.customTitle').html("My Design");
					$('p.returnToLyric').hide();
				}
				else {
					$("#errorPopupContent").html(defaultError);
					displayPopUp('errorPopup', 150, 200, false);
				}
				active = false;
			},
			error: function(xhr, ajaxOptions, thrownError){
				$("#errorPopupContent").html(defaultError);
				displayPopUp('errorPopup', 150, 200, false);
				$("#loadingGif").css("visibility", "hidden");
				active = false;
			}
		});
	}
}