var player;
var playerReady = 0;
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,
                'z-index':'100'
            });
            
            if(this.orientation == 'left')
                this.popoverElement.setStyle('left',elementPosition.left-6);
            else
                this.popoverElement.setStyle('left',elementPosition.left - 
                                                    this.popoverElement.getCoordinates().width +
                                                    elementPosition.width-5);
                
            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 isiPad = navigator.userAgent.match(/iPad/i) != null;
    var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
    var navitems;
    if(isiPad || isiPhone) {
        navitems = document.getElements('#header .navback-mob li');
    }
    else{
        navitems = document.getElements('#header .navback li');
    }
  
	new SmartBox(navitems[2],'#smt-tights',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[4],'#smt-stockings',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[3],'#smt-holdups',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[1],'#smt-brands',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[6],'#smt-denier',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[7],'#smt-colour',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[8],'#smt-fashion',{'position':'bottom','relativeTo':document.getElement('#wrap')});
    new SmartBox(navitems[10],'#smt-rest',{'position':'bottom','orientation': 'right','relativeTo':document.getElement('#wrap')});
    
    new Autocompleter.Request.JSON('fe-search', '/auto_comp.php', {'postVar': 'search'});
    
   var status = {'true': 'open','false': 'close'};
   
   var myVerticalSlide = new Fx.Slide('vertical_slide',{duration:2000}).hide();
   var isiPad = navigator.userAgent.match(/iPad/i) != null;
   var isiPhone = navigator.userAgent.match(/iPhone/i)!= null; 
     
    
   $('v_slideout').addEvent('click', function(event){
        event.stop();
        player.pauseVideo();
       	myVerticalSlide.slideOut();
     });
    $('v_slidein').addEvent('click', function(event){
       if(playerReady==1 && !isiPad && !isiPhone){
          player.playVideo();
        }
      	event.stop();
       	myVerticalSlide.slideIn();
     });
     myVerticalSlide.addEvent('complete', function() {
     	$('vertical_status').set('text', status[myVerticalSlide.open]);
     });
      
   var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'}).hide();
    
   $('h_slidein').addEvent('click', function(event){
    	var slide = document.getElementById('size-guide-container'); 
        slide.style.visibility="visible";
        
     	event.stop();
    	myHorizontalSlide.slideIn();
   });
   $('h_slideout').addEvent('click', function(event){
   	event.stop();
   	myHorizontalSlide.slideOut();
   });
  
   myHorizontalSlide.addEvent('complete', function() {
   	$('horizontal_status').set('text', status[myHorizontalSlide.open]);
   });
});


//////////////////////////////////////////////////////////////////////


/////////////////////////////////////////////////////////////////////////