/**
* ONLOAD HANDLER
* Desc  : Add anything you want to run onload, in here
**/

window.addEvent('domready', function() {
    var menuId = "tpl_topmenu";
    dropdown.start(menuId);
});

var dropdown = new function(){

    this.offsetX = Browser.Engine.trident?-8:-7;
    this.offsetY = myEnv.ieVersion>7?19:29;
    this.heightOffset = 0;

    this.start = function(menuId){
        var c = 0;
        $$('ul#'+menuId+" li.parent").each(function(element,index){
            c++;
            element.id  = (element.id == "")?menuId+"_item"+c:element.id;
            var thisLi  = $(element.id);
            var coords  = thisLi.getCoordinates();
            var subMenu = thisLi.getElements("ul");
            if(subMenu.length > 0){
                var content = new Element("ul");
                var aTag    = element.getElements("a")[0];
                content.setProperty("html",subMenu.getProperty("html"));
                var dd      = new Element("div",{
                    styles  : {
                        "position"          : "absolute",
                        "top"               : "-9999px",
                        "left"              : "-9999px",
                        "width"             : "260px",
                        "display"           : (myEnv.browserIE6?"none":"block")
                    },
                    "class" : "dropdown_submenu"
                }).inject(document.body);
                content.injectInside(dd);

                // Create bind object
                var myBind          = new Object();
                myBind.dd           = dd;
                myBind.hideMe       = false;
                myBind.ddHeight     = dd.getSize().y+this.heightOffset;
                myBind.content      = "<ul>"+subMenu.getProperty("html")+"</ul>";
                myBind.element      = element;
                myBind.aTag         = aTag;
                myBind.fx           = new Fx.Morph(dd, {link: "cancel", duration: 180, transition: Fx.Transitions.Sine.easeInOut});
                dd.empty();
                dd.setStyles({height  : "0px",top:(coords.top+this.offsetY),left:(coords.left+this.offsetX)});

                // Create mouseover effects for dropdown
                myBind.dd.addEvents({
                    "mouseover" : function(){
                        $clear(this.hideTimer);
                    }.bind(myBind),
                    "mouseout"  : function(){
                        this.element.fireEvent("mouseout");
                    }.bind(myBind)
                });

                // Create function that hides the dropdown after a certain amount of time
                myBind.hide = function(){
                    this.start = false;
                    this.aTag.removeClass("over");
                    this.dd.empty();

                    // Ie6 fix
                    if(myEnv.browserIE6){
                        this.dd.setStyle("display","none");
                    }

                    this.fx.cancel();
                    this.dd.setStyle("height","0px");
                }.bind(myBind);

                // Create mouseover event
                element.addEvents({
                    "mouseover" : function(){
                        $clear(this.hideTimer);
                        this.start  = true;
                        this.aTag.addClass("over");

                        // Ie6 fix
                        if(myEnv.browserIE6){
                            this.dd.setStyle("display","block");
                        }
                        this.fx.start({
                            'height'    : [this.dd.getSize().y,this.ddHeight]
                        }).onComplete = function(){
                            if(this.start == true){
                                this.dd.setProperty("html",this.content);
                            }
                        }.bind(this)
                    }.bind(myBind),
                    "mouseout" : function(){
                        this.hideTimer  = this.hide.delay(200,this);
                    }.bind(myBind)
                });
            }
        }.bind(this));
    }.bind(this)
}