var SmartBox = new Class({
    Implements: Options,
    options: {
        'position': 'null',
        'relativeTo': window,
        'orientation': 'left'
    },
    
    initialize: function(hoverEl, popEl, options) {
        this.setOptions(options);
        this.position = this.options['position'];
        this.relative = this.options['relativeTo'];
        this.orientation = this.options['orientation'];
        this.hoverElement = $type(hoverEl) == "element"? hoverEl:document.getElement(hoverEl);
        this.popoverElement = document.getElement(popEl);
        
        var that = this;
        this.hoverElement.addEvent('mouseover', function(event){
            document.getElements('#smts div').setStyle('display','none');
            document.getElements('.selectedSmartBox').removeClass('selectedSmartBox');
            that.display[that.position].call(that);
        });
    },
    
    display: {
        'bottom': function() {            
            var elementPosition = this.hoverElement.getCoordinates(this.relative);            
            this.popoverElement.setStyles({
                'display':'block',
                'position':'absolute',
                'top':elementPosition.bottom-6,
                'z-index':'100'
            });
            
            if(this.orientation == 'left')
                this.popoverElement.setStyle('left',elementPosition.left-9);
            else
                this.popoverElement.setStyle('left',elementPosition.left - 
                                                    this.popoverElement.getCoordinates().width +
                                                    elementPosition.width + 18);
                
            this.hoverElement.addClass('selectedSmartBox');
            this.setHide();
        },
        
        'right': function() {
            var elementPosition = this.hoverElement.getCoordinates(this.relative);            
            this.popoverElement.setStyles({
                'display':'block',
                'position':'absolute',
                'top':elementPosition.top,
                'left':elementPosition.right,
                'z-index':'100'
            });
            this.setHide();
        }
    },
    
    setHide: function() {
        var timeout = 0;
        var that = this;
        this.hoverElement.addEvent('mouseout', function(event) {
            timeout = that.hide.delay(200, that);
        });
        this.popoverElement.addEvent('mouseout', function(event) {
            timeout = that.hide.delay(200, that);
        });
        this.hoverElement.addEvent('mouseover', function(event) {
            timeout = $clear(timeout);
        });
        this.popoverElement.addEvent('mouseover', function(event) {
            timeout = $clear(timeout);
        });
    },
    
    hide: function() {
        this.popoverElement.setStyle('display','none');
        this.hoverElement.removeClass('selectedSmartBox');
    }
});

window.addEvent('domready', function(){
   var navitems = document.getElements('#header .navback li');
	new SmartBox(navitems[2],'#smt-tights',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[3],'#smt-stockings',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[4],'#smt-holdups',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[1],'#smt-brands',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[7],'#smt-denier',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[9],'#smt-fashion',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[12],'#smt-rest',{'position':'bottom','orientation': 'right','relativeTo':document.getElement('#wrap')});

  
});