/// <reference path="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" />
//****/ <reference path="~/MapSearchControl.aspx" />
//****/ <reference path="HC-Utils.js" />
//****/ <reference path="MapState.js" />
//****/ <reference path="MapSearchControl.Core.js" />
//****/ <reference path="../AjaxDataPages/MapObjects-Search.js" />


var hillsideUI = new Object();
hillsideUI.mappingTools = new Object();
hillsideUI.tabs = new Object();
hillsideUI.tools = new Object();

try {
	// popupTemplate's Variables: {ID, PositionStyle, Title, Content}
	var popupTemplate = function (opts) {
		return ("<div id=\"" + opts.ID.toString() + "\" class=\"ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable\" style=\"z-index: 10000; position: absolute; " + opts.PositionStyle.toString() + "\">\
					<div class=\"ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix\">\
						<span class=\"ui-dialog-title\">" + opts.Title.toString() + "</span>\
						<a href=\"#\" onmousedown=\"$('#" + opts.ID.toString() + "').hide()\" class=\"ui-dialog-titlebar-close ui-corner-all\" title=\"Close\"><img src=\"images/Error_Icon_3D.png\" style=\"border: 0px; width: 18px; height: 18px;\" /><span class=\"ui-icon ui-icon-closethick\">Close</span></a>\
					</div>\
					<div class=\"ui-dialog-content ui-widget-content\">\
						" + opts.Content.toString() + "\
					</div>\
					<!--\
					*** BUTTON EXAMPLES ***\
					<div class=\"ui-dialog-buttonpane ui-widget-content ui-helper-clearfix\">\
						<button class=\"ui-state-default ui-priority-primary ui-corner-all\">Primary</button>\
						<button class=\"ui-state-default ui-priority-secondary ui-corner-all\">Secondary</button>\
						<button class=\"ui-state-default ui-state-disabled ui-corner-all\">Disabled</button>\
					</div>\
					-->\
					<div class=\"ui-resizable-n ui-resizable-handle\"/>\
					<div class=\"ui-resizable-s ui-resizable-handle\"/>\
					<div class=\"ui-resizable-e ui-resizable-handle\"/>\
					<div class=\"ui-resizable-w ui-resizable-handle\"/>\
					<div class=\"ui-resizable-ne ui-resizable-handle\"/>\
					<div class=\"ui-resizable-se ui-resizable-handle ui-icon ui-icon-grip-diagonal-se\"/>\
					<div class=\"ui-resizable-sw ui-resizable-handle\"/>\
					<div class=\"ui-resizable-nw ui-resizable-handle\"/>\
				</div>");
	}

	var errorPopupTemplate = function (opts) {
		return ("<div id=\"errorMsgPopup\" class=\"ui-widget ui-draggable\" style=\"width: 400px; height: 175px; position: absolute; top: " + opts.Top.toString() + "px; left: " + opts.Left.toString() + "px; z-index: 1000009; cursor: move;\">\
					<div class=\"ui-state-error ui-corner-all\" style=\"padding: 0 .7em;\"> \
						<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\">\
							<tr>\
								<td style=\"width: 60px; padding: 2px 6px 2px 6px;\" valign=\"top\"><img src=\"images/Error_Icon_3D.png\" style=\"width: 48px; height: 48px;\" /></td>\
								<td valign=\"top\">\
									<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\">\
										<tr>\
											<td id=\"errorMsgPopupTitleBar\" class=\"ui-dialog-titlebar ui-dialog-title\"><span style=\"font-size: 135%; font-weight: 700;\">" + opts.Title.toString() + "</span> <a href=\"#\" onmousedown=\"$('#errorMsgPopup').hide()\" class=\"ui-dialog-titlebar-close ui-corner-all\" title=\"Close\"><span class=\"ui-icon ui-icon-closethick\">Close</span></a></td>\
										</tr>\
										<tr>\
											<td valign=\"top\" style=\"padding: 2px 4px 8px 0px;\">\
												" + opts.Content.toString() + "\
												<div class=\"ui-dialog-buttonpane ui-helper-clearfix\" style=\"padding: 4px 8px 6px 0px; text-align: right;\">\
													<button class=\"ui-state-default ui-priority-primary ui-corner-all\" style=\"background: #E36235 url(../images/jQueryUI/e14f1c_500x100_textures_12_gloss_wave_45.png) repeat-x scroll 50% 50%; border: 1px solid #FFFFFF;\" onclick=\"$('#errorMsgPopup').hide()\"> Close </button>\
												</div>\
											</td>\
										</tr>\
									</table>\
								</td>\
							</tr>\
						</table>\
					</div>\
				</div>");
	}

	var highlightPopupTemplate = function (opts) {
		return ("<div id=\"highlightMsgPopup\" class=\"ui-widget ui-draggable\" style=\"position: absolute; top: " + opts.Top.toString() + "px; left: " + opts.Left.toString() + "px; z-index: 1000005; cursor: move;\">\
					<div class=\"ui-state-highlight ui-corner-all\" style=\"padding: 0 .7em;\"> \
						<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\">\
							<tr>\
								<!--<td style=\"width: 60px; padding: 2px 6px 2px 6px;\" valign=\"top\"><img src=\"images/highlight_Icon_3D.png\" style=\"width: 48px; height: 48px;\" /></td>-->\
								<td valign=\"top\">\
									<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\">\
										<tr>\
											<td id=\"highlightMsgPopupTitleBar\" class=\"ui-dialog-titlebar ui-dialog-title\"><span style=\"font-size: 135%; font-weight: 700;\">" + opts.Title.toString() + "</span> <a href=\"#\" onmousedown=\"$('#highlightMsgPopup').hide()\" class=\"ui-dialog-titlebar-close ui-corner-all\" title=\"Close\"><span class=\"ui-icon ui-icon-closethick\">Close</span></a></td>\
										</tr>\
										<tr>\
											<td valign=\"top\" style=\"padding: 2px 4px 8px 0px;\">\
												" + opts.Content.toString() + "\
												<div class=\"ui-dialog-buttonpane ui-helper-clearfix\" style=\"padding: 4px 8px 6px 0px; text-align: right;\">\
													<button style='font-size: 18px !important;' class=\"ui-state-default ui-priority-primary ui-corner-all\" onclick=\"$('#highlightMsgPopup').hide()\"> Close </button>\
												</div>\
											</td>\
										</tr>\
									</table>\
								</td>\
							</tr>\
						</table>\
					</div>\
				</div>");
	}

} catch (e) { alert("Error creating popup's Template object\n\nDetails: " + e.toString()); /* Show alert msgbox */ }

/// Example positionStyle: "width: 250px; height: 175px; top: 100px; left: 100px;"
hillsideUI.showPopup = function(id, title, content, positionStyle) {
	// Set the HTML, change to += (append) to support more than 1 popup
	$("#popupContainer").html(popupTemplate({ ID: id, Title: title, Content: content, PositionStyle: positionStyle }));
	//TODO: new Draggable($(id), { handle: 'ui-dialog-titlebar' });
	$('#' + id).show();

	return $('#' + id);
}


hillsideUI.mappingTools.showPropertyDetails = function(listingID, title) {
	hillsideUI.checkForMessageContainers();
	var positionData = { height: (frameHeight - $("#tabs ul:eq(0)").height()), width: frameWidth - 200 };

	var infoTile_MouseOut = "setTileColor(this, false); if (VEMap._GetMapFromGUID(map.GUID).FireEvent('onmouseout'))return;VEHideVEShapeERO(false);"
	try {
		eval(infoTile_MouseOut);
	} catch (e) { /* Do nothing */ }

	// Note: might need to use Element.getOffsetParent
	var detailsURL = "FullView-NoTheme.aspx?wID=" + CurrentAgent.WebID + "&LN=" + listingID + "&Minimal=true";
	//<iframe src="about:blank" style=\"width: 99%; height: 469px; border: 0px; margin: 0px; padding: 0px;\" frameborder=\"0\" id=\"PropertyDetailsFrame\">
	var content = "<iframe src=\"" + detailsURL + "\" height=\"" + (positionData.height) + "\" style=\"width: " + (positionData.width) + "px; height: " + (positionData.height) + "px; border: 0px; margin: 0px; padding: 0px;\" frameborder=\"0\" id=\"PropertyDetailsFrame\"></iframe>";
	$("#PropertyDetailsContainer").html(content);
	// Show the Property details tab
	$("#tabs").tabs('select', 1);

	//return $ ( " PropertyDetailsContainer");
}
hillsideUI.mappingTools.showChartsTab = function() {
	hillsideUI.checkForMessageContainers();
	var positionData = { height: (frameHeight - $("#tabs ul:eq(0)").height()), width: frameWidth - 200 };

	// Note: might need to use Element.getOffsetParent
	var detailsURL = "AjaxCharts.aspx?wID=" + CurrentAgent.WebID;
	//<iframe src="about:blank" style=\"width: 99%; height: 469px; border: 0px; margin: 0px; padding: 0px;\" frameborder=\"0\" id=\"PropertyDetailsFrame\">
	var content = "<iframe src=\"" + detailsURL + "\" height=\"" + (positionData.height) + "\" style=\"width: " + (positionData.width) + "px; height: " + (positionData.height) + "px; border: 0px; margin: 0px; padding: 0px;\" frameborder=\"0\" id=\"ChartsFrame\"></iframe>";
	$("#ChartsContainer").html(content);
	// Show the Property details tab
	$("#tabs").tabs('select', 2);

	//return $ ( " PropertyDetailsContainer");
}




/// <summary>Helper function for positioning the popup generated by showPropertyDetails(listingID, title)</summary>
function getIframePopupPosition() {
	/// <summary>Helper function for positioning the popup generated by showPropertyDetails(listingID, title)</summary>
	var mapDimensions = { width: $("#mymapcontroldiv").width(), height: $("#mymapcontroldiv").height() };
	var mapPosition = $("#mymapcontroldiv").offset();
	var popupPositionData = new Object();
	var myWidth = 0;
	var myLeft = 0;
	if (mapDimensions.width < 650) {
		// Just force the size even if the map isnt big enough
		myWidth = 600;
	} else {
		myWidth = 660;
	}
	// NOTE: myLeft is OVERRIDDEN BELOW!!! (for hopelessly-small-screen support)
	myLeft = (mapPosition.left + 10);
	//if (navigator.userAgent.indexOf("MSIE") > -1) { myLeft = 100; }
	if (myLeft < 10) {
		//Make it a workable position
		myLeft = 80;
	}
	// OVERRIDE myLeft - this will help users on tiny (useless) 800x600 screens
	myLeft = 125;
	popupPositionData.Div = {
		width: (myWidth),
		height: mapDimensions.height - 25,
		top: mapPosition.top + 10,
		left: myLeft,
		toCssString: function() { return ("width: " + this.width + "px; height: " + this.height + "px; top: " + this.top + "px; left: " + this.left + "px;"); }
	};
	popupPositionData.IFrame = { width: (popupPositionData.Div.width - 5), height: (popupPositionData.Div.height - 36) };
	
	return popupPositionData;
}

hillsideUI.mappingTools.setDrawingButtonsState = function(isUserInDrawingMode) {
	if (isUserInDrawingMode) {
		$("#StartButton").hide();
		$("#StopButton").show();
		$("#ClearArea").show();
	} else {
		$("#StartButton").show();
		$("#StopButton").hide();
		$("#ClearArea").hide();
	}
}

hillsideUI.checkForMessageContainers = function() {
	if ($("#errorPopupContainer").length <= -1) { $("body").after("<div id='errorPopupContainer'></div>"); }
	if ($("#highlightPopupContainer").length <= -1) { $("body").after("<div id='highlightPopupContainer'></div>"); }
	if ($("#listingDetailsPopup").length <= -1) { $("body").after("<div id='listingDetailsPopup'></div>"); }
}

hillsideUI.showErrorPopup = function(title, message) {
	hillsideUI.checkForMessageContainers();
	var viewportSize = {width: frameWidth, height: frameHeight};
	// Set the HTML, change to += (append) to support more than 1 popup
	$("#errorPopupContainer").html(errorPopupTemplate({ Title: title, Content: message, Top: ((viewportSize.height * 0.5)), Left: ((viewportSize.width * 0.5)) }));
	//TODO: new Draggable($('errorMsgPopup') /*, { handle: 'ui-dialog-titlebar' }*/);
	return $('#errorMsgPopup').show();
}

hillsideUI.showWarningPopup = function (title, message) {
	hillsideUI.checkForMessageContainers();
	var viewportSize = { width: frameWidth, height: frameHeight };
	// Set the HTML, change to += (append) to support more than 1 popup
	$("#highlightPopupContainer").html(highlightPopupTemplate({ Title: title, Content: message, Top: ((viewportSize.height * 0.2)), Left: ((viewportSize.width * 0.5)) })).animate({opacity: 0.75});
	//TODO: new Draggable($('#highlightMsgPopup') /*, { handle: 'ui-dialog-titlebar' }*/);
	if (typeof jQuery != 'undefined' && typeof jQuery.fadeIn != 'undefined') {
		$('#highlightMsgPopup').fadeIn();
	} else {
		$('#highlightMsgPopup').show();
	}

	return $('#highlightMsgPopup');
}

hillsideUI.tabs.showTab = function (tabId) {
	if (tabId && tabId.length > 1 && tabId[0] != '#') { tabId = '#' + tabId; }
	//Selects a tab by a specified ID, tabId
	if (!$(tabId).length) { alert("Error: Tab not found: " + tabId); return false; }
	var tabs = $("#PropertyTabs").find("div.ui-tabs-panel");
	if (!tabs || tabs.length < 1) { tabs = $("div.ui-tabs-panel"); /* Fix for Safari/WebKit browsers */ }
	tabs.addClass("ui-tabs-hide");
	return $(tabId).removeClass("ui-tabs-hide");
}

/// <summary>Used on FullView-NoTheme.aspx</summary>
hillsideUI.tabs.showWalkScore = function(Address) {
	// Check if we can show a Walk Score (same logic for other mapping code)
	if (CurrentListing.IsLoginRequiredForAdddress) { showModalLogin(); return; }
	// Check if the WalkScore link has already been loaded
	if ($("#WalkScoreFrame").attr('src').toLowerCase().indexOf("walkscore") > -1) { return hillsideUI.tabs.showTab("TabWalkScore"); /* Already Loaded */ }
	var linkPrefix = "http://www.homecards.com/";
	if (location.href.indexOf("localhost") > -1 || location.href.indexOf("hillside-tech.com") > -1) { linkPrefix = ""; }
	// Selects Walk Score tab
	$("#WalkScoreFrame").attr('src', linkPrefix + "GetWalkScore.aspx?Address=" + escape(Address));
	return hillsideUI.tabs.showTab("TabWalkScore");
}

/// <summary>Used on FullView-NoTheme.aspx</summary>
hillsideUI.tabs.showStreetView = function(PropertyData) {
	// Check if we can show a Walk Score (same logic for other mapping code)
	if (CurrentListing.IsLoginRequiredForAddress) { showModalLogin(); return; }
	// Check if the WalkScore link has already been loaded
	if ($("#StreetViewFrame").attr('src').toLowerCase().indexOf("streetview") > -1) { return hillsideUI.tabs.showTab("TabStreetView"); /* Already Loaded */ }
	var linkPrefix = "http://www.homecards.com/";
	if (location.href.indexOf("localhost") > -1 || location.href.indexOf("hillside-tech.com") > -1) { linkPrefix = ""; }
	// Selects Walk Score tab
	$("#StreetViewFrame").attr('src', linkPrefix + "GetStreetView.aspx?Address=" + escape(PropertyData.Street) + "&City=" + escape(PropertyData.City) + "&State=" + escape(PropertyData.State) + "&Zip=" + escape(PropertyData.Zip) + "&Width=545&Height=280");
	return hillsideUI.tabs.showTab("TabStreetView");
}


hillsideUI.tools.createAndGetOverlayShim = function (elementId, hideShimAfterMilliseconds) {
	var shimID = elementId + "_shim";
	var dimensions;
	var position;
	// Check if shim already exists!
	if ($('#' + shimID).length < 1) { $("body").after("<div onclick='$(this).remove()' id='" + shimID + "'></div>"); }
	dimensions = { width: $('#' + elementId).outerWidth(), height: $('#' + elementId).outerHeight() };
	position = $('#' + elementId).offset();
	$(shimID).setStyle({ display: "", zIndex: 9999999, backgroundColor: "#DEDEDE", opacity: 0.5, width: dimensions.width + "px", height: dimensions.height + "px", position: "absolute", top: position.top + "px", left: position.left + "px" });
	if (hideShimAfterMilliseconds && hideShimAfterMilliseconds > 0) { setTimeout("hillsideUI.tools.removeElement('" + shimID + "')", hideShimAfterMilliseconds); }
	return $(shimID);
}

// Note: Quick helper function
hillsideUI.tools.hideElement = function(el) {
	//$(el).setStyle({ display: "none" });
	if ($(el)) { $(el).hide(); }
}
hillsideUI.tools.removeElement = function(el) {
	if ($(el)) { $(el).remove(); }
}