/*
*
* Zone 1 Media Web Application Programming Interface
* --------------------------------------------------
*
* Date: 29-07-2007
* Edit: 18-08-2007
* File: zapi_controls
* Language: Javascript
*
* Description: Create a pop up control panel from any 
* object element.
*
* Usage:
* initiateControls(element,loadinto);
* You may "return false" on the mouseover if the element calling
* the script is a link - to stop the link being followed. When javascript
* is disabled the link WILL BE followed.
*
* Will use shared var ZAPI_IMAGEROOT, if set. 
*
* loadinto (element object) is an optional parameter allowing
* the new control element to be placed within any other node.
*
* constrain is an optional boolean, if true the new controls
* will be constrained within the new parent element.
*
* Once initiated, you may call an element's methods from 
* any other part of the script. 
*
* Setting the width the height of the element using CSS
* will make the box not expand with the content in Gecko.
*
* Note: IT IS IMPORTANT that the element is NOT positioned 
* itself - only it's parent
*
* Todo: Tidy up the IE alpha transparency parsing
*	    IE7 Overflow bug
*		If objects are strings rather than elements, try to get them using getElementById
*
*/
	
	function catchIE() {
		var browser = navigator.userAgent.toLowerCase();
		if(browser.indexOf("msie") != -1) {
			version = parseFloat(browser.substring(browser.indexOf('msie ') + 5 ));
			if(version >=5 && version < 7) {
				ie = (browser.indexOf('win') != -1); 
			} else { ie = false; }
		} else { ie = false; }
	}

	function initiateControls(controlbox,controlTitle,loadinto,constrain) { 
		/* Check if this is IE5,5.5 or 6 on Windows - so we can apply proper alpha transparency */
			catchIE();
		
		/* Assign the object some controls */
			if(controlbox.controls) { controlbox.controls.close(); }
			controlbox.controls = new zapi_controls(controlbox,controlTitle,loadinto,constrain);
		
		/* If this was a link - get rid of the nasty dotted focus border */
			controlbox.blur();
	}
	
	function zapi_controls(controlbox,controlTitle,loadinto,constrain) {
	
		/* Clone the original element so it can be restored, and fetch it's parent */
			this.initial_element = controlbox.cloneNode(true);
			this.initial_parent = controlbox.parentNode;
			controlbox.style.display="block";

		/* Initiate the main element */
			if(isNaN(parseInt(controlbox.style.width))) {
				ele_width = controlbox.scrollWidth;
				controlbox.style.width = ele_width+"px";
			}else { ele_width = parseInt(controlbox.style.width); }

			if(isNaN(parseInt(controlbox.style.height))) {
				ele_height = controlbox.scrollHeight;
				controlbox.style.height = ele_height+"px";
			} else { ele_height = parseInt(controlbox.style.height); }
	
			if(!isNaN(parseInt(controlbox.style.borderWidth))) { 
				border=parseInt(controlbox.style.borderWidth)*2;
			} else { border = 0; }
			
		/* Create the drop shadows */
			this.shell_container = document.createElement('div');
			this.shell_container.style.position="absolute";
			this.shell_container.style.zIndex="100";
			this.shell_container.setAttribute('id',controlbox.id+'_control');
			this.shell_container.style.height=parseInt(ele_height)+"px";
			this.shell_container.style.width=parseInt(ele_width)+"px";
			
			var shell_ds_right = document.createElement('div');
			shell_ds_right.id="right_ds";
			shell_ds_right.style.background='url('+ZAPI_IMAGEROOT+'shared/shadow/ds_right.png) right repeat-y';
			shell_ds_right.style.height=parseInt(ele_height+border+30)+"px";
			shell_ds_right.style.width="9px";
			shell_ds_right.style.position="absolute"; 
			shell_ds_right.style.right="-9px";
			shell_ds_right.style.top="-30px";

			if(ie) {
				shell_ds_right.style.backgroundImage='url()';
				shell_ds_right.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ZAPI_IMAGEROOT+'shared/shadow/ds_right.png", sizingMethod="scale")';
			}
		
			var shell_ds_bottom = document.createElement('div');
			shell_ds_bottom.id="bottom_ds";
			shell_ds_bottom.style.background='url('+ZAPI_IMAGEROOT+'shared/shadow/ds_bottom.png) bottom repeat-x';
			shell_ds_bottom.style.width=parseInt(ele_width+border)+"px";
			shell_ds_bottom.style.height="9px"; shell_ds_bottom.style.fontSize="0px";
			shell_ds_bottom.style.position="absolute"; shell_ds_bottom.style.bottom="-9px";
			
			if(ie) {
				shell_ds_bottom.style.backgroundImage='url()';
				shell_ds_bottom.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ZAPI_IMAGEROOT+'shared/shadow/ds_bottom.png", sizingMethod="scale")';
			}
			
			var shell_ds_corner = document.createElement('div');
			shell_ds_corner.id="corner_ds";
			shell_ds_corner.style.background='url('+ZAPI_IMAGEROOT+'shared/shadow/ds_cr_br.png) no-repeat';
			shell_ds_corner.style.width='9px';shell_ds_corner.style.height='9px';
			shell_ds_corner.style.position='absolute'; shell_ds_corner.style.fontSize="0px";
			shell_ds_corner.style.right='-9px';shell_ds_corner.style.bottom='-9px';
			
			if(ie) {
				shell_ds_corner.style.backgroundImage='url()';
				shell_ds_corner.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ZAPI_IMAGEROOT+'shared/shadow/ds_cr_br.png", sizingMethod="scale")';
			}
		
		/* Create the handle */
			var shell_handle = document.createElement('div');
			shell_handle.style.height='30px';shell_handle.style.fontSize='0.7em';
			shell_handle.style.letterSpacing='1px';shell_handle.style.fontFamily='Trebuchet MS';
			shell_handle.style.cursor='move';shell_handle.style.textAlign='center';
			shell_handle.style.background='url('+ZAPI_IMAGEROOT+'shared/shadow/header.png) repeat-x';
			shell_handle.style.color='#FFFFFF';shell_handle.style.position='relative';
			shell_handle.style.fontWeight='bold'; shell_handle.style.lineHeight='30px';
			shell_handle.innerHTML=controlTitle;shell_handle.style.position='absolute'; 
			shell_handle.style.top="-30px"; shell_handle.style.width=parseInt(ele_width+border)+"px";
			shell_handle.style.overflow="hidden";
			
			var shell_close = document.createElement('div');
			shell_close.style.position='absolute'; shell_close.style.display='block';
			shell_close.style.top='7px'; shell_close.style.right='7px'; shell_close.style.cursor='pointer';
			shell_close.style.background='url('+ZAPI_IMAGEROOT+'shared/shadow/close_normal.png)'; 
			shell_close.style.height='15px'; shell_close.style.width='15px';
			
			shell_close.onclick=function(){controlbox.controls.close();}
			shell_close.onmouseover=function(e) { 
				shell_close.style.backgroundImage="url("+ZAPI_IMAGEROOT+"shared/shadow/close.png)";
				if(ie) { shell_close.style.backgroundImage='url()';
				shell_close.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ZAPI_IMAGEROOT+'shared/shadow/close.png");';}
			}
			
			shell_close.onmouseout=function(e) { 
				shell_close.style.backgroundImage="url("+ZAPI_IMAGEROOT+"shared/shadow/close_normal.png)"; 
				if(ie) { shell_close.style.backgroundImage='url()';
				shell_close.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ZAPI_IMAGEROOT+'shared/shadow/close_normal.png");';}
			}
			
			if(ie) { /* Alpha transparency for IE556/win */
				shell_close.style.backgroundImage='url()';
				shell_close.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ZAPI_IMAGEROOT+'shared/shadow/close_normal.png");';
			}

			shell_handle.appendChild(shell_close);
	
		/* Build the new element */
			this.shell_container.appendChild(shell_ds_corner);
			this.shell_container.appendChild(shell_ds_right);
			this.shell_container.appendChild(shell_ds_bottom);
			this.shell_container.appendChild(shell_handle);
			this.shell_container.appendChild(controlbox);
			
		/* Show it and make it draggable if zapi_freemove is available */
			this.show(loadinto); 
			if(constrain) { con = this.new_parent; } else { con = null; }
			if(initiateFreemove) { initiateFreemove(this.shell_container,con,shell_handle); }
	
	}
	
	/* refresh the element, use if the content has changed the size */
	/* this needs sorting, as it changes ALL the drop shadows at the moment and doesn't look at borders, don't have time to fix! */
	zapi_controls.prototype.refresh = function(element) {

		element.style.height=null;
		element.style.width="";

		document.getElementById("right_ds").style.height = parseInt(element.scrollHeight+30)+"px";
		//document.getElementById("bottom_ds").style.width = parseInt(element.scrollwidth+30)+"px";

		document.getElementById("bottom_ds").style.top=parseInt(element.scrollHeight)+"px";
		document.getElementById("corner_ds").style.top=parseInt(element.scrollHeight)+"px";
	
		element.style.height=element.scrollHeight;
		element.style.height=element.scrollWidth;

	}
	
	/* Show the new control element either in place or in a new parent(element object) */
	zapi_controls.prototype.show = function(parent) {
		if(!parent) {
			this.initial_parent.appendChild(this.shell_container);
			this.new_parent = this.initial_parent;
		} else {
			parent.appendChild(this.shell_container);
			this.new_parent = parent;
		}
	}
	
	/* Close the new control element and restore the old one */
	zapi_controls.prototype.close = function() {
		this.new_parent.removeChild(this.shell_container);
		this.initial_parent.appendChild(this.initial_element);
	}