/**
 * This is a class to display and hide a div layer.
 * 
 * Dependancies:
 *    - 
 * 
 * @author Michael Mifsud
 * @package javascript
 */
 
/**
 * DhtmlLayer Global variables
 */
var DhtmlLayer_layers = new Array();


/**
 * Class constructor.
 * 
 * 
 * Note: For ie the Iframe fix will be enabled if the layer dimensions have been set
 *        using setLayerDimansions() method.
 * 
 * @param string objName - The name of this created DhtmlLayer instance.
 * @param string layerID - (optional) The layerID of the layer. (Default: 'DhtmlLayer_layer_0')
 */
function DhtmlLayer(objName) {
    
    this.layerID             = arguments[1] ? arguments[1] : 'DhtmlLayer_layer_' + DhtmlLayer_layers.length;
    
    // Properties
    this.objName             = objName; 
    this.offsetX             = 10;
    this.offsetY             = 10;
    this.hasFocus            = false;
    this.isMouseover         = false;
    this.cssClass            = 'DhtmlLayer';
    this.imgIcon             = '/images/icon.gif';
    this.isDragable          = false;       // Flag to use for dragable layers
    
    
    // __construct
    DhtmlLayer_layers[DhtmlLayer_layers.length] = this;
    
}

///////////////////// Class methods /////////////////////

/**
 * Sets the innerHTML attribute of the layer
 *
 * @param string html - Some html text.
 */
DhtmlLayer.prototype.setHTML = function(html)
{
    this.getLayer().innerHTML = html;
}


/**
 * Adds to the innerHTML attribute of the layer
 *
 * @param html - The text to append
 */
DhtmlLayer.prototype.addHTML = function(html)
{
    this.getLayer().innerHTML += html;
}


/**
 * Writes HTML for layer, this is the clickable icon to activate the layer.
 * 
 * @todo Implement an optional image, a link should show where an image does not.
 */
DhtmlLayer.prototype.writeIconHTML = function()
{
    document.write('<a href="javascript: ' + this.objName + 
        '.setLayerPosition(document.mouseXPos, document.mouseYPos, this);' + this.objName +
        '.show();" class="'+this.cssClass+'_icon" onclick="this.blur();">'+
        '<img src="' + this.imgIcon + '" border="0" width="16" height="16" /></a>');
}

/**
 * Writes HTML for layer, this is the clickable icon to activate the layer.
 * 
 * @param DOMElement element
 * @todo Implement an optional image, a link should show where an image does not.
 */
DhtmlLayer.prototype.writeIconDOM = function()
{
    element = arguments[0] ? arguments[0] : this.getLayer();
    
    if (element == null) {
        alert('Cannot attach to unknown element!');
    }
    
    var a = document.createElement('a');
    a.setAttribute('href', 'javascript: ' +
                    this.objName + '.setLayerPosition(document.mouseXPos, document.mouseYPos, this);' +
                    this.objName + '.show();');
    a.setAttribute('onclick', 'this.blur();');
    a.className = this.cssClass + '_icon';
    
    var img = document.createElement('img');
    img.setAttribute('src', this.imgIcon);
    img.setAttribute('border', '0');
    img.setAttribute('width', '16');
    img.setAttribute('height', '16');
    
    a.appendChild(img);
    //element.parentNode.appendChild(a, element);
    element.parentNode.insertBefore(a, element);
}

/**
 * Set the div css properties
 * 
 * 
 */
DhtmlLayer.prototype.initLayer = function() {
    var layer = this.getLayer();
    
    layer.style.zIndex          = '999';
    layer.style.position        = 'absolute';
    layer.style.visibility      = 'hidden';
    
}

/**
 * Writes HTML for layer, this is the clickable icon to activate the layer.
 * 
 */
DhtmlLayer.prototype.writeLayerHTML = function()
{
    var html = '<div class="' + this.cssClass + '" ' + 
        'id="' + this.layerID + '" onmouseover="' + this.objName + 
        '.setMouseover(true)" onmouseout="' + this.objName + '.setMouseover(false)"></div>';
    document.write(html);
    this.initLayer();
    this.writeIframe();
}

/**
 * Appends layer to a dom element
 * 
 * Use this if you need to create Dhtml layers. Future versions 
 *  should only use this type of div creations.
 * 
 * @param DOMElement element
 * @todo Support for Iframe
 */
DhtmlLayer.prototype.writeLayerDOM = function(element)
{
    var div = document.createElement('div');
    //div.setAttribute('class', this.cssClass);
    div.className = this.cssClass;
    div.setAttribute('id', this.layerID);
    div.setAttribute('onmouseover', this.objName + '.setMouseover(true)');
    div.setAttribute('onmouseout', this.objName + '.setMouseover(false)');
    element.appendChild(div);
    
    this.initLayer();
    this.writeIframe();
}

/**
 * Writes a masking Iframe for ie browsers to stop pesky selects box showthrough
 * Only works if in ie browser and layer dimension has been set using setLayerDimansion()
 * 
 * NOTE: Only needs to be ie compatable.
 */
DhtmlLayer.prototype.writeIframe = function()
{
	if (sniffer.is_ie) {
      var iframe = document.createElement('iframe');
      iframe.setAttribute('src', 'javascript:;');
      iframe.setAttribute('id', this.layerID + '_iframe');
      iframe.setAttribute('frameborder', '0');
      iframe.setAttribute('scrolling', 'no');
	    var layer  = this.getLayer();
      iframe.style.width           = layer.style.width;
      iframe.style.height          = layer.style.height;
      iframe.style.zIndex          = layer.style.zIndex - 1;
      iframe.style.visibility      = 'hidden';
      iframe.style.position        = 'absolute';
      layer.parentNode.insertBefore(iframe, layer);
	}
	
}


/**
 * Set the css class of this layer (default: 'DhtmlLayer')
 * 
 * @param string cssClass - The CSS class for this layer
 */
DhtmlLayer.prototype.setCssClass = function(cssClass) {
    this.cssClass = cssClass;
}

/**
 * Set the css file for the contents of this layer
 * 
 * @param string cssFile
 */
DhtmlLayer.prototype.setCssFile = function(cssFile) {
    this.cssFile = cssFile;
}

/**
 * Set the icon that pop's up this layer
 * 
 * @param string icon - Path to the image icon to display
 */
DhtmlLayer.prototype.setIcon = function(imgIcon) {
    this.imgIcon = imgIcon;
}

/**
 * Hides this Layer.
 * 
 */
DhtmlLayer.prototype.hide = function()
{
    this.setFocus(false);
    //alert(document.getElementById(this.layerID) + ' - ' + this.layerID);
    this.getLayer().style.visibility = 'hidden';
    if (this.isIframeEnabled()) {
        this.getIframe().style.visibility = 'hidden';
    }
    
}

/**
 * Shows the main div layer
 * 
 */
DhtmlLayer.prototype.show = function()
{
    this.setFocus(true);
    this.getLayer().style.visibility = 'visible';
    if (this.isIframeEnabled()) {
        this.getIframe().style.visibility = 'visible';
    }
}

/**
 * Sets the X offset to the mouse position
 * that the div appears at.
 *
 * @param integer Xoffset - Number of pixels for horizontal
 *     offset from mouse position
 */
DhtmlLayer.prototype.setOffsetX = function(Xoffset)
{
    this.offsetX = Xoffset;
}

/**
 * Sets the Y offset to the mouse position
 * that the div appears at.
 * 
 * @param integer Yoffset - Number of pixels for vertical
 *     offset from mouse position
 */
DhtmlLayer.prototype.setOffsetY = function(Yoffset)
{
    this.offsetY = Yoffset;
}

/**
 * Sets the layers position
 * 
 */
DhtmlLayer.prototype.setLayerPosition = function(x, y)
{   
	  // layer
    this.getLayer().style.top  = (y + this.offsetY) + 'px';
    this.getLayer().style.left = (x + this.offsetX) + 'px';
    if (this.isIframeEnabled()) {
        // iframe
        this.getIframe().style.top  = (y + this.offsetY) + 'px';
        this.getIframe().style.left = (x + this.offsetX) + 'px';
    }
}


/**
 * Sets the layers dimensions
 *
 * @param string width - (eg: '10em', '10px', 10)
 * @param string height - (eg: '10em', '10px', 10)
 */
DhtmlLayer.prototype.setLayerDimension = function(width, height)
{
	// layer
    this.getLayer().style.width  = width;
    this.getLayer().style.height = height;
    if (this.isIframeEnabled()) {
        // iframe
        this.getIframe().style.width  = width;
        this.getIframe().style.height = height;
    }
}

/**
 * Set the focus state of this layer. 
 * Usualy used when mouse is over the layer
 * 
 * @param boolean b - Focus state.
 */
DhtmlLayer.prototype.setFocus = function(b)
{
    this.hasFocus = b;
}

/**
 * mouse over state. Whether the mouse is over the div or not.
 *
 * @param boolean status -
 */
DhtmlLayer.prototype.setMouseover = function(b)
{
    this.isMouseover = b;
}

/**
 * Returns the layer object
 *
 */
DhtmlLayer.prototype.getLayer = function()
{
    return getElementById(this.layerID);
}


/**
 * Returns the iframe object
 *
 */
DhtmlLayer.prototype.getIframe = function()
{
    return getElementById(this.layerID+'_iframe');
}

/**
 * Returns the iframe object
 *
 */
DhtmlLayer.prototype.isIframeEnabled = function()
{
    return (sniffer.is_ie && this.getIframe() && this.getLayer().style.width != '');
}