/**********************************************************************
Constants and global variables
**********************************************************************/
var CURRENT_COLOR_ID_PREFIX = "DynamicColorsCurrent";
var AVAILABLE_COLOR_ID_PREFIX = "DynamicColorsAvailable";
var AVAILABLE_COLOR_BUCKET_TEMPLATE_ID = "DynamicColorsAvailableBucketTemplate";
var AVAILABLE_FONTS_ID_PREFIX = "DynamicFontsAvailable";

var g_objDynamicAvailableColors;
var g_objDynamicTemplate;


/****************************************************************
Ajax functions to get/set dynamic data
****************************************************************/
function dynamicGetSettings() {
	// Construct request url
	var strRequestUrl = g_strCallbackUrl + "/Dynamic_GetData?Template=true&Colors=true";

	$.ajax({
		type: "GET",
		url: strRequestUrl,
		data: {},
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		dataFilter: function(responseData) {
			// This boils the response string down into a proper JavaScript Object()
			var temp = eval('(' + responseData + ')');

			// If the response has a ".d" top-level property, return what's below that instead.
			if (temp.hasOwnProperty('d'))
				return temp.d;
			else
				return temp;
		},
		success: function(responseData) {
			// Call succeeded, now check operation success
			if(!responseData.success){
				// Display message, redirect if instructed by server
				if (responseData.message.length > 0) {
					alert(responseData.message);
				}
				else {
					alert("We weren't able to load your current template settings. Please try refreshing this page. Contact support if problem persists.");
				}

				if (responseData.data.redirect.length > 0) {
					window.location = responseData.data.redirect;
				}

				return;
			}

			// Store available colors and template data
			g_objDynamicAvailableColors = responseData.data.colors;
			g_objDynamicTemplate = responseData.data.template;

			dynamicWidgetsInit();
		},
		error: function(responseData) {
			alert("We weren't able to load your current template settings. Please try refreshing this page. Contact support if problem persists.");
		}
	});
}

function dynamicUpdateSettings() {
	var strData = JSON.stringify(g_objDynamicTemplate);
	// Before enclosing JSON in single quotes, make sure all other single quotes are
	//	escaped. The regex below converts all occurences of:  '    to:  \'
	strData = strData.replace(new RegExp("'", "g"), "\\'");
	strData = "'" + strData + "'";
	strData = escape(strData);

	// Construct request url
	var strRequestUrl = g_strCallbackUrl + "/Dynamic_SetData?Template=" + strData;

	$.ajax({
		type: "GET",
		url: strRequestUrl,
		data: {},
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		dataFilter: function(responseData) {
			// This boils the response string down into a proper JavaScript Object()
			var temp = eval('(' + responseData + ')');

			// If the response has a ".d" top-level property, return what's below that instead.
			if (temp.hasOwnProperty('d'))
				return temp.d;
			else
				return temp;
		},
		success: function(responseData) {
			// Call succeeded, now check operation success
			if(!responseData.success) {
				// Display message, redirect if instructed by server
				if (responseData.message.length > 0) {
					alert(responseData.message);
				}
				else {
					alert("We weren't able to update your current template settings. Please try refreshing this page. Contact support if problem persists.");
				}

				if (responseData.data.redirect.length > 0) {
					window.location = responseData.data.redirect;
				}

				return;
			}

			dynamicUpdateStyleSheetLink(responseData.data.esn, responseData.data.ver);
		},
		error: function(responseData) {
			alert("We weren't able to update your template settings. Please try again. Contact support if problem persists.");
		}
	});
}

function dynamicUpdateStyleSheetLink(in_intEsn, in_intVersion) {
	var aryCssLinks = document.getElementsByTagName("link");

	NukeAdminNav_SetCustomizing();
	var objLink;
	var intCurrentEsn = -1;
	var intCurrentVersion = -1;
	var i = 0;
	for(i=0;i<aryCssLinks.length;i++) {
		objLink = aryCssLinks[i];
		intCurrentEsn = getUrlParam(objLink.href, "esn");
		intCurrentVersion = getUrlParam(objLink.href, "ver");

		if(intCurrentEsn == in_intEsn) {
			objLink.href = objLink.href.replace("ver=" + intCurrentVersion, "ver=" + in_intVersion);
		}
	}
}


/*********************************************************************
Widget functions
*********************************************************************/
// Init
function dynamicWidgetsPanel() {
		dynamicGetSettings();

		// Show panels as accordion
		showAccordion(".DynamicWidget", ".WidgetName");
}

function showAccordion(in_strContainerSelector, in_strHeaderSelector) {
	// Make accordion effect
	$(in_strContainerSelector).accordion({
		header: in_strHeaderSelector,
		collapsible: true
	});
}

// Parse data and initialize widgets
function dynamicWidgetsInit() {
	// Initialize colors
	dynamicColorsInit(g_objDynamicAvailableColors, g_objDynamicTemplate.color1, g_objDynamicTemplate.color2, g_objDynamicTemplate.color3, g_objDynamicTemplate.color4, g_objDynamicTemplate.color5);

	// Initialize fonts
	var aryAvailableFontFamilies = new Array();
	aryAvailableFontFamilies[0] = "Arial, Helvetica Neue, Helvetica, sans-serif";
	aryAvailableFontFamilies[1] = "Arial Black, Gadget, sans-serif";
	aryAvailableFontFamilies[2] = "Cambria, Georgia, Times, Times New Roman, serif";
	aryAvailableFontFamilies[3] = "Century Gothic, Apple Gothic, sans-serif";
	aryAvailableFontFamilies[4] = "Comic Sans MS, cursive, sans-serif";
	aryAvailableFontFamilies[5] = "Consolas, Lucida Console, Monaco, monospace";
	aryAvailableFontFamilies[6] = "Copperplate Light, Copperplate Gothic Light, serif";
	aryAvailableFontFamilies[7] = "Courier New, Courier, monospace";
	aryAvailableFontFamilies[8] = "Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif";
	aryAvailableFontFamilies[9] = "Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif";
	aryAvailableFontFamilies[10] = "Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif";
	aryAvailableFontFamilies[11] = "Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, sans-serif";
	aryAvailableFontFamilies[12] = "Impact, Charcoal, Futura, sans-serif";
	aryAvailableFontFamilies[13] = "Lucida Console, Monaco, monospace";
	aryAvailableFontFamilies[14] = "Lucida Sans Unicode, Lucida Grande, sans-serif";
	aryAvailableFontFamilies[15] = "Palatino Linotype, Book Antiqua, Palatino, serif";
	aryAvailableFontFamilies[16] = "Tahoma, Geneva, sans-serif";
	aryAvailableFontFamilies[17] = "Times New Roman, Times, serif";
	aryAvailableFontFamilies[18] = "Trebuchet MS, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Helvetica, Arial, sans-serif";
	aryAvailableFontFamilies[19] = "Verdana, Geneva, Tahoma, sans-serif";

	dynamicFontsInit(aryAvailableFontFamilies, g_objDynamicTemplate.font1);

	// Initialize background
	dynamicBackgroundInit(g_objDynamicTemplate.bgcolor, g_objDynamicTemplate.sys_use_bg_color, g_objDynamicTemplate.bgimage);
}

// Colors widget
function dynamicColorsInit(in_dctColorBuckets, in_strColor1, in_strColor2, in_strColor3, in_strColor4, in_strColor5) {
	//Util variables
	var i = 0;
	var j = 0;
	var intIdPostFix = 0;

	// Add current colors
	var aryCurrentColors = new Array();
	aryCurrentColors[0] = in_strColor1;
	aryCurrentColors[1] = in_strColor2;
	aryCurrentColors[2] = in_strColor3;
	aryCurrentColors[3] = in_strColor4;
	aryCurrentColors[4] = in_strColor5;

	var strCurrentColors = "";

	for(i=0;i<5;i++) {
		intIdPostFix = i + 1

		strCurrentColors += "<li>";
		strCurrentColors += "<a title=\"Click here to choose a custom color\"";
		strCurrentColors += " style=\"background-color: " + aryCurrentColors[i] + "\";";
		strCurrentColors += " onclick=\"dynamicColorsCurrentShowPicker(this.id);return false;\"";
		strCurrentColors += " id=\"" + CURRENT_COLOR_ID_PREFIX + intIdPostFix + "\"";
		strCurrentColors += " href=\"#\"></a>";
		strCurrentColors += "</li>";
		strCurrentColors += "\n";
	}

	$("#DynamicCurrentColors").append(strCurrentColors);

	// Set available color buckets
	var objTemplateBucket = $("#" + AVAILABLE_COLOR_BUCKET_TEMPLATE_ID);

	// Remove template from dom
	objTemplateBucket.remove();

	// Add clones with correct color back
	var objBucketClone;
	var arySingleBucket;
	var strKey;

	var strBucketKey = "";
	var strColorKey = "";
	i = 0;
	j = 0;
	intIdPostFix = 0;
	for(strBucketKey in in_dctColorBuckets) {
		// Clone template and set id
		intIdPostFix = i + 1;
		objBucketClone = objTemplateBucket.clone();
		objBucketClone.attr("id", "DynamicColorsAvailableBucket" + intIdPostFix);

		// Set individual colors in clone
		dctSingleBucketColors = in_dctColorBuckets[strBucketKey];
		objBucketClone.children().children()[0].style.cssText = "background-color: " + dctSingleBucketColors.color1 + ";";
		objBucketClone.children().children()[1].style.cssText = "background-color: " + dctSingleBucketColors.color2 + ";";
		objBucketClone.children().children()[2].style.cssText = "background-color: " + dctSingleBucketColors.color3 + ";";
		objBucketClone.children().children()[3].style.cssText = "background-color: " + dctSingleBucketColors.color4 + ";";
		objBucketClone.children().children()[4].style.cssText = "background-color: " + dctSingleBucketColors.color5 + ";";

		// Append clone to appropriate column
		if(i%2 == 0) {
			$("#AvailableColorsLeft").append(objBucketClone);
		}
		else {
			$("#AvailableColorsRight").append(objBucketClone);
		}
		i++;
	}
	var intBucketCount = i;

	// Make space filler bucket if needed
	if(intBucketCount%2 != 0) {
		objBucketClone = objTemplateBucket.clone();
		objBucketClone.attr("id", "DynamicColorsAvailableBucket" + intBucketCount);
		objBucketClone.removeAttr("onclick");
		$("#AvailableColorsRight").append(objBucketClone);
	}
}

function dynamicColorsSetCurrentBucket(in_strAvailableBucketId) {
	var objBucket = $("#" + in_strAvailableBucketId);
	var strColor;
	var aryHexColors = new Array();

	for(i=0;i<5;i++) {
		strColor = objBucket.children().children()[i].style.backgroundColor;
		aryHexColors[i] = ensureHex(strColor);
	}

	dynamicColorsSetCurrentColors(aryHexColors[0], aryHexColors[1], aryHexColors[2], aryHexColors[3], aryHexColors[4]);
}

// Set current colors bucket, as well as background color bucket
function dynamicColorsSetCurrentColors(in_strColor1, in_strColor2, in_strColor3, in_strColor4, in_strColor5) {
	var aryCurrentColors = new Array();
	aryCurrentColors[0] = in_strColor1;
	aryCurrentColors[1] = in_strColor2;
	aryCurrentColors[2] = in_strColor3;
	aryCurrentColors[3] = in_strColor4;
	aryCurrentColors[4] = in_strColor5;

	var i = 0;
	var intIdPostFix = 0;
	for(i=0; i<5; i++) {
		intIdPostFix = i + 1;
		$("#" + CURRENT_COLOR_ID_PREFIX + intIdPostFix).css("background-color", aryCurrentColors[i]);
	}

	// Also update background color
	var objBgColor = $("#" + "DynamicBackgroundColor");
	objBgColor.css("background-color", in_strColor1);

	// Update global template color settings, call template update function
	g_objDynamicTemplate.color1 = in_strColor1;
	g_objDynamicTemplate.color2 = in_strColor2;
	g_objDynamicTemplate.color3 = in_strColor3;
	g_objDynamicTemplate.color4 = in_strColor4;
	g_objDynamicTemplate.color5 = in_strColor5;
	g_objDynamicTemplate.bgcolor = in_strColor1;

	dynamicUpdateSettings();
}

function dynamicColorsCurrentShowPicker(in_strSenderId) {
	var objCurrentColor = $("#" + in_strSenderId);

	// Color picker ID
	var strColorPickerId = "DynamicColorsCurrentPicker";

	// Position
	var objPosition = objCurrentColor.position();
	var intPickerTop = objPosition.top + 24;
	var intPickerLeft = objPosition.left + 27;

	// Current color
	var strColor = objCurrentColor.css("background-color");
	var strColorHex = ensureHex(strColor);

	nukeColorPickerShow(
		strColorPickerId,
		intPickerTop,
		intPickerLeft,
		998,
		function(in_strSavedColor) {
			objCurrentColor.css("background-color", in_strSavedColor);

			// Update global template color settings, call template update function
			switch(in_strSenderId) {
				case CURRENT_COLOR_ID_PREFIX + "1":	//Update both color1 and background
					var objBgColor = $("#" + "DynamicBackgroundColor");
					objBgColor.css("background-color", in_strSavedColor);
					g_objDynamicTemplate.color1 = in_strSavedColor;
					g_objDynamicTemplate.bgcolor = in_strSavedColor;
					break;
				case CURRENT_COLOR_ID_PREFIX + "2":
					g_objDynamicTemplate.color2 = in_strSavedColor;
					break;
				case CURRENT_COLOR_ID_PREFIX + "3":
					g_objDynamicTemplate.color3 = in_strSavedColor;
					break;
				case CURRENT_COLOR_ID_PREFIX + "4":
					g_objDynamicTemplate.color4 = in_strSavedColor;
					break;
				case CURRENT_COLOR_ID_PREFIX + "5":
					g_objDynamicTemplate.color5 = in_strSavedColor;
					break;
			}
			dynamicUpdateSettings();
		},
		strColorHex
	);
}

function dynamicColorsGetCurrentColors() {
	var aryNewColors = new Array();
	var strSingleColor;

	var i = 0;
	for(i=0;i<5;i++) {
		strSingleColor = $("#" + CURRENT_COLOR_ID_PREFIX + i).css("background-color");
		strSingleColor = ensureHex(strSingleColor);
		aryNewColors[i] = strSingleColor;
	}

	return aryNewColors;
}


// Font widget
function dynamicFontsInit(in_aryFontFamilies, in_strFontFamily1) {
	// Set current font, no need to update server
	dynamicFontsSetCurrent(in_strFontFamily1, false);

	// Add available fonts
	var i;
	var aryAvailableFonts = new Array();
	var strAvailableFonts = "";
	var strFontDisplayName = ""
	// Loop through available font families passed in, add each to the list
	for(i=0;i<in_aryFontFamilies.length;i++) {
		//For each family, get first font as display name
		aryAvailableFonts = in_aryFontFamilies[i].split(",");
		strFontDisplayName = aryAvailableFonts[0];

		// Build string that represents each available font
		strAvailableFonts += "<li>";
		strAvailableFonts += "<a title=\"Click here to choose this font\"";
		strAvailableFonts += " style=\"font-color: #4F81BD; font-family: " + in_aryFontFamilies[i] + "\"";
		// onclick event to set current font, update server set to true
		strAvailableFonts += " onclick=\"dynamicFontsSetCurrent('" + in_aryFontFamilies[i] + "', true);return false;\""; 
		strAvailableFonts += " id=\"" + AVAILABLE_FONTS_ID_PREFIX + i + "\"";
		strAvailableFonts += " href=\"#\">";
		strAvailableFonts += strFontDisplayName;
		strAvailableFonts += "</a>";
		strAvailableFonts += "</li>";
		strAvailableFonts += "\n";
	}

	// Add list to dom
	$("#DynamicAvailableFonts").append(strAvailableFonts);
}

function dynamicFontsSetCurrent(in_strFontFamily, in_blnUpdateServer) {
	// Get first font in the family as display name
	var aryCurrentFonts = new Array();
	aryCurrentFonts = in_strFontFamily.split(",");
	var strFontDisplayName = aryCurrentFonts[0];

	// Build string that represents the current font element
	var strCurrentFont = "";
	strCurrentFont += "<p id='DynamicCurrentFontDisplay' style=\"color:#4f81bd; size:13px; font-weight:bold; font-family:";
	strCurrentFont += in_strFontFamily;
	strCurrentFont += "\">";
	strCurrentFont += strFontDisplayName;
	strCurrentFont += "</p>";

	// Remove outdated "current font" display if exists
	var objCurrentFontDisplay = $("#DynamicCurrentFontDisplay");
	if(objCurrentFontDisplay.length) {
		objCurrentFontDisplay.remove();
	}

	// Add current font display to dom
	$("#DynamicCurrentFont").append(strCurrentFont);

	// API call to update current font family
	if(in_blnUpdateServer) {
		g_objDynamicTemplate.font1 = in_strFontFamily;
		dynamicUpdateSettings();
	}
}


// Background widget
function dynamicBackgroundInit(in_strBackgroundColor, in_blnUseBackgroundColor, in_strBackgroundImage) {
	var objBgColor = $("#" + "DynamicBackgroundColor");
	var objBgColorWhite = $("#" + "DynamicBackgroundColorWhite");
	var objBgUseImage = $("#" + "DynamicBackgroundUseImage");

	objBgColor.css("background-color", in_strBackgroundColor);
	objBgColor.toggleClass("Selected", in_blnUseBackgroundColor);
	objBgColorWhite.toggleClass("Selected", !in_blnUseBackgroundColor);

	var blnUseBgImage = false;
	in_strBackgroundImage = jQuery.trim(in_strBackgroundImage);
	if(in_strBackgroundImage.length > 0) {
		blnUseBgImage = true;
	}
	else {
		blnUseBgImage = false;
	}

	objBgUseImage.prop("checked", blnUseBgImage);
}

function dynamicBackgroundSetColor(in_blnUseBackgroundColor) {
	// Get bg color and no color elements
	var objBgColor = $("#" + "DynamicBackgroundColor");
	var objBgNoColor = $("#" + "DynamicBackgroundNoColor");

	// Immidiately update template if color selection was changed
	if(objBgColor.hasClass("Selected") != in_blnUseBackgroundColor) {
		g_objDynamicTemplate.bgcolor = ensureHex(objBgColor.css("background-color"));
		g_objDynamicTemplate.sys_use_bg_color = in_blnUseBackgroundColor;
		dynamicUpdateSettings();
	}

	// Set new selected style
	objBgColor.toggleClass("Selected", in_blnUseBackgroundColor);
	objBgNoColor.toggleClass("Selected", !in_blnUseBackgroundColor);

	// Show picker if bg color box is clicked
	if(in_blnUseBackgroundColor) {
		dynamicBackgroundColorShowPicker();
	}
}

function dynamicBackgroundColorShowPicker() {
	var objBgColor = $("#" + "DynamicBackgroundColor");

	// Color picker ID
	var strColorPickerId = "DynamicBackgroundColorPicker";

	// Position
	var objPosition = objBgColor.position();
	var intPickerTop = objPosition.top + 28;
	var intPickerLeft = objPosition.left + 50;

	// Current color
	var strColor = objBgColor.css("background-color");
	var strColorHex = ensureHex(strColor);

	nukeColorPickerShow(
		strColorPickerId,
		intPickerTop,
		intPickerLeft,
		998,
		function(in_strSavedColor) {
			objBgColor.css("background-color", in_strSavedColor);
			g_objDynamicTemplate.bgcolor = in_strSavedColor;
			g_objDynamicTemplate.sys_use_bg_color = true;
			dynamicUpdateSettings();
		},
		strColorHex
	);
}

function dynamicBackgroundSetImage() {
	var objBgUseImage = $("#" + "DynamicBackgroundUseImage");
	var blnUseBgImage = objBgUseImage.prop("checked");

	// If use bg image, copy sys_default_bg_image value to bgimage
	// otherwise, set bgimage to empty string
	if(blnUseBgImage) {
		g_objDynamicTemplate.bgimage = g_objDynamicTemplate.sys_default_bg_image;
	}
	else {
		g_objDynamicTemplate.bgimage = "";
	}

	dynamicUpdateSettings();
}

/*************************************************************************
Utility functions
*************************************************************************/
// Convert rgb format to hex
function ensureHex(in_strColor) {
	// If in hex already, return as is
	if(in_strColor.substr(0, 1) == "#") {
		return in_strColor;
	}

	in_strColor = in_strColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

	function hex(x) {
		return ("0" + parseInt(x).toString(16)).slice(-2);
	}

	return "#" + hex(in_strColor[1]) + hex(in_strColor[2]) + hex(in_strColor[3]);
}