/*
HTMLBox.html
Represents a 2D box that contains HTML and placed over Germanium plugin.
*/


// TODO: implement these functions when we integrate HTMLBox into the API.
/*
// Creating a HTMLBox
WebControl.CreateHTMLBox = function () {} // Note: At this stage, the HTMLBox is still in limbo

// Adding a HTMLBox to the scene
WebControl.AddHTMLBox = function () {} // Note: TBA depending on whether a placemark/ BBL can "own" a HTMLBox

// HTMLBox utilities 
WebControl.GetNumberOfHTMLBoxes = function () {} // Note: TBA depending on how many HTMLBox(es) can exist at one time

// Getting a HTMLBox
WebControl.GetHTMLBoxByIndex = function ( index ) {} 
WebControl.GetHTMLBoxByHandle = function ( strHandle ) {}

// Removing a HTMLBox
WebControl.RemoveHTMLBox = function ( box ) {}
WebControl.RemoveHTMLBoxByIndex = function ( index ) {}
WebControl.RemoveHTMLBoxByHandle = function ( strHandle ) {}
WebControl.RemoveAllHTMLBoxes = function () {}
*/

// ============================================================================

// HTMLBox class
HTMLBox = function (germTopElement, htmlbox_index) {

		// static counter
		if (typeof HTMLBox.g_counter == 'undefined')
		{
			HTMLBox.g_counter = 0;
		}
		//HTMLBox.g_counter++;
		if (typeof htmlbox_index == 'undefined'){
			HTMLBox.g_counter = 1;
		} else {
			HTMLBox.g_counter = htmlbox_index;
		}
		
		this.type = 'germ_callout'; //legend_popup, link_popup
		
        // Properties
        this.index = HTMLBox.g_counter;		// index
		this.id = 'HTMLBox' + HTMLBox.g_counter;	// id, possibly redundant? 
        this.size = {x: "0px", y: "0px"};		
        this.position = {left: "0px", top: "0px"};	
        this.content = '';			// a string
		this.zIndex = 5000;
		
		// Interaction 
        this.useCloseButton = true;	// a boolean
        this.isDraggable = false;
		
		// germTopDiv. This will be done automatically when integrated with WebControl.
		this.germTopDiv = germTopElement; 
		
		// Positioner div
		this.positionerDiv = document.createElement("div");
		this.positionerDiv.id = "htmlBoxPositioner" + this.index;
		var mStyle = this.positionerDiv.style;
		mStyle.position = "absolute";
		mStyle.left = "0px";		mStyle.top = "0px";
		mStyle.width = "0px";		mStyle.height = "0px";
		mStyle.zIndex = '5200';
		germTopElement.appendChild(this.positionerDiv);
				
		// Border-padding div
		this.paddingDiv = document.createElement("div");
		this.paddingDiv.id = "htmlBoxPadder" + this.index;
		mStyle = this.paddingDiv.style;
		mStyle.position = "absolute"; 
		mStyle.left = "0px";		mStyle.top = "0px";
		//mStyle.zIndex = '5300';
		this.positionerDiv.appendChild(this.paddingDiv); 
		
		// Header div
		this.headerDiv = document.createElement("div");
		this.headerDiv.id = "htmlBoxHeader" + this.index;
		mStyle = this.headerDiv.style;
		mStyle.color = "#000000";
		mStyle.backgroundColor = "#000000";
		mStyle.top = "0px"; 		mStyle.left = "0px";
		mStyle.width = "100%";
		mStyle.height = "20px";
		mStyle.overflow = "hidden";
		mStyle.position = "relative";
		mStyle.textAlign = "right";
		mStyle.padding = "0px";
		mStyle.border = "0px";
		mStyle.overflow = "hidden";
		mStyle.float = "right";
		this.paddingDiv.appendChild(this.headerDiv);
		//mStyle.zIndex = '5350';
					
		// Content div		
		this.contentDiv = document.createElement("div");
		this.contentDiv.id = "htmlBoxContentHolder" + this.index;
		mStyle = this.contentDiv.style;
		mStyle.color = "#000000";
		mStyle.top = "0px";			mStyle.left = "0px";
		this.paddingDiv.appendChild(this.contentDiv);
		//this.contentDiv.style.zIndex = '5400';
		
		// IFRAME 
		this.iframe = document.createElement("iframe");
		this.iframe.id = "htmlBoxContentIframe" + this.index;
		this.iframe.frameborder = "0";
		this.iframe.scrolling="no";
		this.iframe.allowtransparency="false";
		this.iframe.style.zIndex = "5100";
		this.iframe.style.margin = "0px";		this.iframe.style.padding = "0px";
		this.iframe.style.overflow = "auto";	this.iframe.style.position = "absolute";
		this.iframe.style.border = "0";	// to avoid border artifact for Chrome & Fx 3.6
		this.iframe.style.backgroundColor = "#FFF" // for iframe shim to work on Fx 3.6
		this.germTopDiv.appendChild(this.iframe);
		
		// Content
		this.SetContent("");
		
		// Set overflow properties
		this.positionerDiv.style.overflow = "hidden"; 
		this.paddingDiv.style.overflow = "hidden"; 
		this.headerDiv.style.overflow = "hidden"; 	
		this.contentDiv.style.overflow = "hidden";
		
		this.paddingDiv.style.bottom = "0px"; this.paddingDiv.style.right = "0px";
				
		// For "Quirks" mode (IE only)
		if (navigator.appName == 'Microsoft Internet Explorer' && document.compatMode != 'CSS1Compat') 
		{
			// Quirks
			this.paddingDiv.style.width = "100%";		
			this.paddingDiv.style.height = "100%";
		}
};

HTMLBox.prototype =
{
		// Index property
		GetIndex : function () {
			return this.index;
		}

		// Id property
        , GetId : function () {
			return this.id;
		}
        
        // Size property
        , SetSize : function (width, height)
		{
			var propPattern = /\d+%/i,
				absPattern = /\d+px/i;
			if ((propPattern.test(width) || absPattern.test(width)) &&
			    (propPattern.test(height) || absPattern.test(height)))
			{
				this.size.x = width;
				this.size.y = height;
			}
			
			this.iframe.style.width = this.size.x;			this.iframe.style.height = this.size.y;
			this.positionerDiv.style.width = this.size.x; 	this.positionerDiv.style.height = this.size.y; 
		}
        , GetSize : function () {
			return this.size;
		}
		, GetWidth : function () {
			return this.size.x;
		}
		, GetHeight : function () {
			return this.size.y;
		}
        
        // Position property
        , SetPosition : function (left, top)	
		{
			var propPattern = /\d+%/i,
				absPattern = /\d+px/i;
			if ((propPattern.test(left) || absPattern.test(left)) &&
			    (propPattern.test(top) || absPattern.test(top)))
			{
				this.position.left = left;
				this.position.top = top;
			}
			
			this.iframe.style.left = this.position.left;			this.iframe.style.top = this.position.top;
			this.positionerDiv.style.left = this.position.left; 	this.positionerDiv.style.top  = this.position.top; 
		}
        , GetPosition : function () {
			return this.position;
		}
		, SetLeft : function (left) {
			
			var propPattern = /\d+%/i,
				absPattern = /\d+px/i;
			if (absPattern.test(left) || propPattern.test(left))			
			{
				this.position.left = left;
				this.position.right = null;
				
				this.iframe.style.left = left;			this.iframe.style.right = null;
				this.positionerDiv.style.left = left; 	this.positionerDiv.style.right  = null; 
			}
		}
		, GetLeft : function () {
			return this.position.left;
		}
		, SetTop : function (top) {
		
			var propPattern = /\d+%/i,
				absPattern = /\d+px/i;
			if (absPattern.test(top) || propPattern.test(top))
			{
				this.position.top = top;
				this.position.bottom = null;
				
				this.iframe.style.top = top;			this.iframe.style.bottom = null;
				this.positionerDiv.style.top = top;		this.positionerDiv.style.bottom = null;
			}
		}
		, GetTop : function () {
			return this.position.top;
		}
	  
		, SetRight : function (right) {
						
			var propPattern = /\d+%/i,
				absPattern = /\d+px/i;
			if (absPattern.test(right) || propPattern.test(right))			
			{
				this.position.right = right;
				this.position.left = null;
				
				this.iframe.style.left = null;			this.iframe.style.right = right;
				this.positionerDiv.style.left = null; 	this.positionerDiv.style.right  = right; 
			}
		}
		, GetRight : function () {
			return this.position.right;
		}
		, SetBottom : function (bottom) {
		
			var propPattern = /\d+%/i,
				absPattern = /\d+px/i;
			if (absPattern.test(bottom) || propPattern.test(bottom))
			{
				this.position.bottom = bottom;
				this.position.top = null;
				
				this.iframe.style.top = null;			this.iframe.style.bottom = bottom;
				this.positionerDiv.style.top = null;	this.positionerDiv.style.bottom = bottom;
			}
		}
		
		, GetBottom : function () {
			return this.position.bottom;
		}
	  
        // Content property
        , SetContent : function (htmlString)
		{
			if (htmlString && typeof htmlString=="string") {
				this.content = htmlString;
			}
		}
        , GetContent : function () {
			return this.content;
		}
		, RefreshContent : function ()
		{	
			this.Show();
		}
        
		//// Styles
		
		// Border
		, SetBorder : function ( strBorder )
		{
			this.paddingDiv.style.border = strBorder;
		}
		, GetBorder : function ()
		{
			return this.paddingDiv.style.border;
		}
		
		// Padding
		, SetPadding : function ( strPadding )
		{
			this.paddingDiv.style.padding = strPadding;
		}
		, GetPadding : function ()
		{
			return this.paddingDiv.style.padding;
		}
		
		// Background color
		, SetBackgroundColor : function ( strColor )
		{
			// Set color of paddingDiv - content div inherits padding div's color
			this.paddingDiv.style.backgroundColor = strColor;
			
			if (this.isDraggable)
			{
				this.headerDiv.style.backgroundColor = "#999999"
			}
			else
			{
				this.headerDiv.style.backgroundColor = strColor;
			}
		}
		
		// Background color
		, GetBackgroundColor : function ()
		{
			return this.paddingDiv.style.backgroundColor;
		}
		
		// Overflow
		, SetOverflow : function ( strOverflow )
		{
			if ( strOverflow == "auto" )
			{
				this.positionerDiv.style.overflow = "auto"; 
				this.paddingDiv.style.overflow = "auto"; 
				this.headerDiv.style.overflow = "auto";
				this.contentDiv.style.overflow = "auto";
			}
			else if ( strOverflow == "hidden" )
			{
				this.positionerDiv.style.overflow = "hidden"; 
				this.paddingDiv.style.overflow = "hidden"; 
				this.headerDiv.style.overflow = "hidden";
				this.contentDiv.style.overflow = "hidden";
			}
			else if ( strOverflow == "scroll" )
			{
				// Will still result in 1x extra horizontal scrollbar
				this.positionerDiv.style.overflow = "auto"; 
				this.paddingDiv.style.overflow = "scroll"; 
				this.headerDiv.style.overflow = "auto";
				this.contentDiv.style.overflow = "auto";
			}
		}
		, GetOverflow : function ()
		{
			return this.paddingDiv.style.overflow;
		}
		
		// Z-index
		, SetZIndex : function ( zindex )
		{
			this.zIndex = zindex;
			// Specify iframe z-index, and the other div's above it
			// Note: This value should be >= 0 at least, preferably more
			this.iframe.style.zIndex = zindex*1;
			this.positionerDiv.style.zIndex = zindex*1 + 1;
		}
		, GetZIndex : function ()
		{
			return this.iframe.style.zIndex; // return this.zIndex;
		}
		
        // [x] close button property
        , SetUseCloseButton : function (bool) {
			this.useCloseButton = bool;
		}
        , GetUseCloseButton : function () {
			return this.useCloseButton;
		}
		
		// Dragging 
        , SetIsDraggable : function (bool) {
			this.isDraggable = bool;
			
			if (bool)
			{		
				// Events handler
				var that = this;
				this.headerDiv.that = that;
				DragHandler.attach(that);
				
				this.headerDiv.style.cursor = "move";
				this.headerDiv.style.backgroundColor = "#999999";
			}
			else
			{
				// Events handler
				var that = this;
				this.headerDiv.that = that;
				DragHandler.detach(that);
				
				this.headerDiv.style.cursor = "default";
				this.headerDiv.style.backgroundColor = this.paddingDiv.style.backgroundColor;
			}
		}
		, GetIsDraggable : function () {
			return this.isDraggable;
		}
        
		// Type
		, SetType : function ( strType )
		{
			this.type = strType;
		}
		, GetType : function ()
		{
			return this.type = strType;
		}
		
        // Visibility
        , Show : function ()
		{
			this.headerDiv.innerHTML = '';
			if (this.useCloseButton) {			
				if(this.type=='germ_callout'){
					/*this.headerDiv.innerHTML = '<img src="closebutton.png" align="right" width="16px" height="16px"' 
												+ 'style="margin-top: 2px; margin-right: 2px; cursor: hand; cursor: pointer; overflow: hidden" id="htmlBoxCloseBtn' + this.index + '" />';
					var x = document.getElementById("htmlBoxCloseBtn" + this.index);
					var that = this;
					x.onclick = function ()
					{
						that.Hide();
					}*/
					
					this.headerDiv.innerHTML = '<button id="htmlBoxTogglerBtn"><div class="minimize"></div></button>';
					var x = document.getElementById("htmlBoxTogglerBtn");
					var that = this;
					//$('#htmlBoxTogglerBtn div.minimize').bind('click', function(){});
					//alert($('#htmlBoxTogglerBtn div').attr('class'));
					x.onclick = function (){
						if($('#htmlBoxTogglerBtn div').hasClass('minimize')){
							//that.SetSize("63px", "53px");
							//that.SetSize("27px", "20px");
							that.SetSize("12px", "64px");
							/*that.SetTop("10px");*/
							/*that.SetLeft("0px");*/
							//$('#htmlBoxContentHolder1').css('display', 'none');
							$('#htmlBoxContentHolder1').css('width', '1%');
							$('#htmlBoxTogglerBtn div').removeClass('minimize').addClass('maximize');
						} else {
							if(ConvenoCore.prototype.GetLanguage()=='ms' || ConvenoCore.prototype.GetLanguage()=='ta'){
								if($("#controller-wrapper .body").length){
									htmlBox1.SetSize("468px", "64px");
								} else {
									htmlBox1.SetSize("280px", "64px");
								}
							} else {
								if($("#controller-wrapper .body").length){
									htmlBox1.SetSize("388px", "64px");
								} else {
									htmlBox1.SetSize("230px", "64px");
								}
							}
							
							/*var leftPadding = Math.round((mygerm.GetWidth()-253)/2) + "px";
							htmlBox1.SetSize("253px", "66px");
							htmlBox1.SetTop((mygerm.GetHeight()-66)+"px");
							htmlBox1.SetLeft(leftPadding);*/
							
							/*if(current_page=="ConvenoGuide"){
								htmlBox1.SetSize("64%", "110px");
								htmlBox1.SetTop("50px");
								htmlBox1.SetLeft("18%");
							} else {
								htmlBox1.SetSize("50%", "185px");
								htmlBox1.SetTop("50px");
								htmlBox1.SetLeft("25%");
							}*/
							//$('#htmlBoxContentHolder1').css('display', 'block');
							$('#htmlBoxContentHolder1').css('width', '');
							$('#htmlBoxTogglerBtn div').removeClass('maximize').addClass('minimize');
						}
					}
				} else if(this.type=='legend_popup'){
					this.headerDiv.innerHTML = '<button id="htmlBoxLegendBtn"><div class="attach"></div></button>';
					var x = document.getElementById("htmlBoxLegendBtn");
					var that = this;
					x.onclick = function ()
					{
						legend_content.prependTo("#bottom .center");
						$('#htmlBoxPositioner2').remove();
						$('#htmlBoxContentIframe2').remove();
						$('#Conveno_Legend_Wrapper').css('display', 'block');
					}
				} else {
					this.headerDiv.innerHTML = '<img src="closebutton.png" align="right" width="16px" height="16px"' 
												+ 'style="margin-top: 2px; margin-right: 2px; cursor: hand; cursor: pointer; overflow: hidden" id="htmlBoxCloseBtn' + this.index + '" />';
					var x = document.getElementById("htmlBoxCloseBtn" + this.index);
					var that = this;
					x.onclick = function ()
					{
						that.Hide();
					}
				}
			}
					
			// Set HTML content
			this.contentDiv.innerHTML = this.content;
									
			// Show contents
			if (!this.useCloseButton && ! this.isDraggable)
			{
				this.headerDiv.style.display = "none";
			}
			else 
			{
				this.headerDiv.style.display = "block";
			}
			this.contentDiv.style.display = "inline";
			this.positionerDiv.style.display = "block";
			this.paddingDiv.style.display = "block";
			this.iframe.style.display = "block";
			
			if (Germanium.IsBrowserIE()) 
			{
				// force IE to re-render the DOM
				var parent = this.positionerDiv.parentNode.firstChild;
				tmpState = parent.style.visibility;
				parent.style.visibility = 'hidden';
				parent.style.visibility = tmpState;
			}
		}
        , Hide : function ()
		{
			this.headerDiv.style.display = "none";
			this.contentDiv.style.display = "none";
			this.positionerDiv.style.display = "none";
			this.paddingDiv.style.display = "none";
			this.iframe.style.display = "none";
		}
};

var DragHandler = {
 
	// private property.
	_oHTMLBox : null,

	// public method. Attach drag handler to an element.
	attach : function(oHTMLBox) {
	
		oHTMLBox.headerDiv.onmousedown = DragHandler._dragBegin;
								
		// callbacks
	//	oHTMLBox.dragBegin = new Function();
	//	oHTMLBox.drag = new Function();
	//	oHTMLBox.dragEnd = new Function();
 
		return oHTMLBox;
	},
	
	// public method. Detach drag handler from an element.
	detach : function(oHTMLBox) {
	
		oHTMLBox.headerDiv.onmousedown = null;
							 
		return oHTMLBox;
	},
 
	// private method. Begin drag process.
	_dragBegin : function(e) {
	
		var oHTMLBox = DragHandler._oHTMLBox = this.that;
		 
		var x = parseInt(oHTMLBox.positionerDiv.offsetLeft);
		var y = parseInt(oHTMLBox.positionerDiv.offsetTop);
 
		e = e ? e : window.event;
		if (navigator.appName == 'Microsoft Internet Explorer')
		{
			oHTMLBox.mouseX = e.clientX - parseInt(oHTMLBox.positionerDiv.offsetLeft);
			oHTMLBox.mouseY = e.clientY - parseInt(oHTMLBox.positionerDiv.offsetTop);
		}
		else
		{
			oHTMLBox.mouseX = e.pageX - parseInt(oHTMLBox.positionerDiv.offsetLeft);
			oHTMLBox.mouseY = e.pageY - parseInt(oHTMLBox.positionerDiv.offsetTop);
		}
		
		// callback
		//oHTMLBox.dragBegin(oHTMLBox, x, y);
 
		document.onmousemove = DragHandler._drag;
		document.onmouseup = DragHandler._dragEnd;

		return false;
	},
 
 
	// private method. Drag (move) element.
	_drag : function(e) {
	
		var oHTMLBox = DragHandler._oHTMLBox;
 
		var x = parseInt(oHTMLBox.positionerDiv.offsetLeft);
		var y = parseInt(oHTMLBox.positionerDiv.offsetTop);
 
		e = e ? e : window.event;	
		if (navigator.appName == 'Microsoft Internet Explorer')
		{
			var newx = (e.clientX - oHTMLBox.mouseX);
			var newy = (e.clientY - oHTMLBox.mouseY);
			
			if (newx < 0) { newx = 0; }
			if (newy < 0) { newy = 0; }
			
			if (newx > oHTMLBox.germTopDiv.clientWidth - oHTMLBox.positionerDiv.clientWidth) { newx = oHTMLBox.germTopDiv.clientWidth - oHTMLBox.positionerDiv.clientWidth; }
			if (newy > oHTMLBox.germTopDiv.clientHeight - oHTMLBox.positionerDiv.clientHeight) { newy = oHTMLBox.germTopDiv.clientHeight - oHTMLBox.positionerDiv.clientHeight; }
			
			oHTMLBox.iframe.style.left = newx + "px";
			oHTMLBox.iframe.style.top = newy + "px";
			
			oHTMLBox.positionerDiv.style.left = newx + "px";
			oHTMLBox.positionerDiv.style.top = newy + "px";
		}
		else
		{
			var newx = (e.pageX - oHTMLBox.mouseX);
			var newy = (e.pageY - oHTMLBox.mouseY);
			
			if (newx < 0) { newx = 0; }
			if (newy < 0) { newy = 0; }
			
			if (newx > oHTMLBox.germTopDiv.clientWidth - oHTMLBox.positionerDiv.clientWidth) { newx = oHTMLBox.germTopDiv.clientWidth - oHTMLBox.positionerDiv.clientWidth; }
			if (newy > oHTMLBox.germTopDiv.clientHeight - oHTMLBox.positionerDiv.clientHeight) { newy = oHTMLBox.germTopDiv.clientHeight - oHTMLBox.positionerDiv.clientHeight; }
			
			oHTMLBox.iframe.style.left = newx + "px";
			oHTMLBox.iframe.style.top = newy + "px";
			
			oHTMLBox.positionerDiv.style.left = newx + "px";
			oHTMLBox.positionerDiv.style.top = newy + "px";
		}
		
		oHTMLBox.position.left = oHTMLBox.positionerDiv.style.left;
		oHTMLBox.position.top = oHTMLBox.positionerDiv.style.top;
		oHTMLBox.position.right = oHTMLBox.position.bottom = null;
		
		// callback
		//oHTMLBox.drag(oHTMLBox, x, y);
		
		return false;
	},
 
 
	// private method. Stop drag process.
	_dragEnd : function() {
	
		var oHTMLBox = DragHandler._oHTMLBox;
  
		// callback
		//var x = parseInt(oHTMLBox.positionerDiv.offsetLeft);
		//var y = parseInt(oHTMLBox.positionerDiv.offsetTop);
		//oHTMLBox.dragEnd(oHTMLBox, x, y);
 
		document.onmousemove = null;
		document.onmouseup = null;
		
		DragHandler._oHTMLBox = null;
	}
}