// README
//
// There are two steps to adding a property:
//
// 1. Create a member variable to store your property
// 2. Add the get_ and set_ accessors for your property.
//
// Remember that both are case sensitive!
//

Type.registerNamespace('Igloo.ObjectModel.Controls');

Igloo.ObjectModel.Controls.SoftShadowExtenderBehavior = function(element) {

    Igloo.ObjectModel.Controls.SoftShadowExtenderBehavior.initializeBase(this, [element]);

    this._shadowResourceUrl = null;
    this._loadHandler = null;        
    this._gadgets = null;
    
    // preload image
    this._cacheImage = new Image()
    this._cacheImage.src = this._shadowResourceUrl;

}

Igloo.ObjectModel.Controls.SoftShadowExtenderBehavior.prototype = {

    C_SHADOWHEIGHT : 15,

    initialize : function() {
        Igloo.ObjectModel.Controls.SoftShadowExtenderBehavior.callBaseMethod(this, 'initialize');

        this._loadHandler = Function.createDelegate(this, this.onLoad);
        Sys.Application.add_load(this._loadHandler);
    
        this._contentDiv =  this.get_element();        
    },

    dispose : function() {        
        Sys.Application.remove_load(this._loadHandler);
        // TODO: dispose shadow elements

        Igloo.ObjectModel.Controls.SoftShadowExtenderBehavior.callBaseMethod(this, 'dispose');
    },

   
    get_ShadowResourceUrl : function() {
        return this._shadowResourceUrl;
    },

    set_ShadowResourceUrl : function(value) {
        this._shadowResourceUrl = value;
    },
    
    onLoad : function() {
        this.layoutItems();        

    },
        
    
    get_Gadgets : function()
    {
        if(this._gadgets == null) {
            this._gadgets = { 
                bottom: this.createGadgetDiv( {left: 50, top: 650, width: this.C_SHADOWHEIGHT, height: this.C_SHADOWHEIGHT} ), 
                corner: this.createGadgetDiv( {left: 850, top: 650, width: this.C_SHADOWHEIGHT, height: this.C_SHADOWHEIGHT} ), 
                right: this.createGadgetDiv( {left: 850, top: 50, width: this.C_SHADOWHEIGHT, height: this.C_SHADOWHEIGHT} ) 
                };
                            
            
            /*var p = this._contentDiv.parentNode;*/
            /*this._contentDiv.appendChild(this._gadgets.bottom);
            this._contentDiv.appendChild(this._gadgets.corner);
            this._contentDiv.appendChild(this._gadgets.right);*/
            /*p.insertBefore(this._gadgets.bottom, this._contentDiv);
            p.insertBefore(this._gadgets.corner, this._contentDiv);
            p.insertBefore(this._gadgets.right, this._contentDiv);*/
            
            var r = this._contentDiv.firstChild;
            this._contentDiv.insertBefore(this._gadgets.bottom, r);
            this._contentDiv.insertBefore(this._gadgets.corner, r);
            this._contentDiv.insertBefore(this._gadgets.right, r);
        }
        
        return this._gadgets;
    },
    
    layoutItems :function() {        
    
            // throw "break";
    
            var contentSize = $common.getSize(this._contentDiv);            
            var gts = this.get_Gadgets();
            
            var contentLocation = $common.getLocation(this._contentDiv);
            this.setOffset(gts.bottom, { x: 0, y: 0, width: this.C_SHADOWHEIGHT, height: this.C_SHADOWHEIGHT });
            var elLocation = $common.getLocation(gts.bottom);
            this.setOffset(gts.bottom, { x: contentLocation.x - elLocation.x, y: contentLocation.y + contentSize.height - elLocation.y, height: this.C_SHADOWHEIGHT, width: contentSize.width });
            gts.bottom.style.visibility = "inherit";
            
            this.setOffset(gts.corner, { x: 0, y: 0, width: this.C_SHADOWHEIGHT, height: this.C_SHADOWHEIGHT });
            var elLocation = $common.getLocation(gts.corner);
            this.setOffset(gts.corner, { x: contentLocation.x + contentSize.width - elLocation.x, y: contentLocation.y + contentSize.height - elLocation.y, height: this.C_SHADOWHEIGHT, width: this.C_SHADOWHEIGHT });
            gts.corner.style.visibility = "inherit";
            
            this.setOffset(gts.right, { x: 0, y: 0, width: this.C_SHADOWHEIGHT, height: this.C_SHADOWHEIGHT });
            var elLocation = $common.getLocation(gts.right);
            this.setOffset(gts.right, { x: contentLocation.x + contentSize.width - elLocation.x, y: contentLocation.y - elLocation.y, height: contentSize.height , width: this.C_SHADOWHEIGHT });
            gts.right.style.visibility = "inherit";
            
    },
    
    setOffset : function(element, offset)
    {
        element.style.left = offset.x.toString() + "px";
        element.style.top = offset.y.toString() + "px";
        element.style.height = offset.height.toString() + "px";
        element.style.width = offset.width.toString() + "px";
    },
        
    
    createGadgetDiv : function( region )
    {
        var el = document.createElement("div");
        el.style.position = "absolute";
        el.style.overflow = "hidden";
        el.style.height = region.height.toString() + "px";
        el.style.width = region.width.toString() + "px";
        el.style.left = "0px";
        el.style.top = "0px";
        el.style.visibility = "hidden";
        
        var img = document.createElement("img");
        img.src = this._shadowResourceUrl;
        img.style.position = "relative";
        img.style.left = "-" + region.left.toString() + "px";
        img.style.top = "-" + region.top.toString() + "px";
        
        el.appendChild(img);
                
        return el;
    }
    
}

Igloo.ObjectModel.Controls.SoftShadowExtenderBehavior.registerClass('Igloo.ObjectModel.Controls.SoftShadowExtenderBehavior', AjaxControlToolkit.BehaviorBase);

//if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();