var TabbedFrame = new Class({
	
	initialize: function(eTabbedFrame) {
		this.eTabbedFrame = eTabbedFrame;
        
		this.tabs = new Array();
        
        
        var aTab = 0;
        var i = 0;
        var tTabsArray = new Array();
		var tTabs = this.eTabbedFrame.getElements('DIV.tab');
		tTabs.each(function(element, index) {
            tTabsArray[i] = new TabbedFrameTab(element.getElement('DIV.caption'), element.getElement('DIV.content'));
            
            if(element.hasClass('active'))
                aTab = i;
            
			i++;
		});
        this.tabs = tTabsArray;
        
        
        var tTabCaptionSize = this.tabs[0].eCaption.getSize();
        this.eTabbedFrame.setStyle('height', tTabCaptionSize.y);
        
        var sTabCaptionWidth = 0;
        for(j=0; j<this.tabs.length; j++) {
            this.tabs[j].setParent(this);
            
            var tTabCaptionSize = this.tabs[j].eCaption.getSize();
            this.tabs[j].eCaption.setStyle('left', sTabCaptionWidth);
            sTabCaptionWidth += tTabCaptionSize.x+1;
        }
        
		
        this.tabs[aTab].eventShowContent();
	},
    
    hideAllTabsContent: function() {
        for(j=0; j<this.tabs.length; j++) {
            this.tabs[j].eventHideContent();
        }
    }
    
});

var TabbedFrameTab = new Class({
    
    initialize: function(eCaption, eContent) {
        this.eCaption = eCaption;
        this.eContent = eContent;
        
        this.eCaption.addEvent('click', this.eventShowContent.bind(this));
        this.eCaption.addEvent('mouseover', this.eventCaptionOver.bind(this));
        this.eCaption.addEvent('mouseout', this.eventCaptionOut.bind(this));
    },
    
    eventShowContent: function() {
        this.parent.hideAllTabsContent();
        
		this.eContent.setStyle('display', 'block');
        
        var tTabCaptionSize = this.eCaption.getSize();
        var tTabContentSize = this.eContent.getSize();
        this.parent.eTabbedFrame.setStyle('height', tTabCaptionSize.y+tTabContentSize.y);
        
        this.eCaption.getParent().addClass('active');
	},
    
    eventHideContent: function() {
        this.eContent.setStyle('display', 'none');
        
        this.eCaption.getParent().removeClass('active');
    },
    
    eventCaptionOver: function() {
        this.eCaption.getParent().addClass('hover');
    },
    
    eventCaptionOut: function() {
        this.eCaption.getParent().removeClass('hover');
    },
    
    setParent: function(parent) {
        this.parent = parent;
    }
    
});

var NavigationItem = new Class({
	
	options: {
		active: false
	},
	
	initialize: function(eTopMenuItem) {
		this.eTopMenuItem = eTopMenuItem;
		
		
		this.eLinkImgNormal = this.eTopMenuItem.getElement('DIV.link_img_normal');
		this.eLinkImgOver = this.eTopMenuItem.getElement('DIV.link_img_over');
		
		
		this.buttonLinkImgNormal = this.eLinkImgNormal.getElement('A');
		
		if($defined(this.buttonLinkImgNormal)) {
			this.buttonLinkImgNormal.addEvent('mouseover', this.eventMouseOver.bind(this));
			this.buttonLinkImgNormal.addEvent('mouseout', this.eventMouseOut.bind(this));
		}
		
		this.buttonLinkImgOver = this.eLinkImgOver.getElement('A');
		
		if($defined(this.buttonLinkImgOver)) {
			this.buttonLinkImgOver.addEvent('mouseover', this.eventMouseOver.bind(this));
			this.buttonLinkImgOver.addEvent('mouseout', this.eventMouseOut.bind(this));
		}
		
		
		if(this.eTopMenuItem.get('class').contains('active')) {
			this.eventMouseOver();
			
			this.options.active = true;
		}
	},
	
	eventMouseOver: function() {
		if(!this.options.active) {
			this.eLinkImgNormal.setStyle('display', 'none');
			this.eLinkImgOver.setStyle('display', 'block');
		}
	},
	
	eventMouseOut: function() {
		if(!this.options.active) {
			this.eLinkImgNormal.setStyle('display', 'block');
			this.eLinkImgOver.setStyle('display', 'none');
		}
	}
	
});

var CustomButton = new Class({
    
    options: {
		active: false
	},
	
	initialize: function(eCustomButton) {
		this.eCustomButton = eCustomButton;
		
		
		this.eButtonImgNormal = this.eCustomButton.getElement('DIV.button_img_normal');
		this.eButtonImgOver = this.eCustomButton.getElement('DIV.button_img_over');
		
		
		this.eButtonImgNormal.addEvent('mouseover', this.eventMouseOver.bind(this));
		this.eButtonImgNormal.addEvent('mouseout', this.eventMouseOut.bind(this));
		
        
		this.eButtonImgOver.addEvent('mouseover', this.eventMouseOver.bind(this));
		this.eButtonImgOver.addEvent('mouseout', this.eventMouseOut.bind(this));
	},
	
	eventMouseOver: function() {
		if(!this.options.active) {
			this.eButtonImgNormal.setStyle('display', 'none');
			this.eButtonImgOver.setStyle('display', 'block');
            
            this.options.active = true;
		}
	},
	
	eventMouseOut: function() {
		if(this.options.active) {
			this.eButtonImgNormal.setStyle('display', 'block');
			this.eButtonImgOver.setStyle('display', 'none');
            
            this.options.active = false;
		}
	}
	
});

var CustomMouseOverClass = new Class({
    
    options: {
		active: false
	},
    
    initialize: function(eElement, sClass) {
		this.eElement = eElement;
        this.sClass = sClass;
        
        this.eElement.addEvent('mouseover', this.eventMouseOver.bind(this));
        this.eElement.addEvent('mouseout', this.eventMouseOut.bind(this));
        
        if(this.eElement.hasClass(this.sClass))
            this.options.active = true;
    },
	
	eventMouseOver: function() {
        if(!this.options.active) {
            this.eElement.addClass(this.sClass);
        }
	},
	
	eventMouseOut: function() {
        if(!this.options.active) {
            this.eElement.removeClass(this.sClass);
        }
	}
    
});

var InputFieldClearValue = new Class({
    
    options: {
	},
    
    initialize: function(eElement, sClass) {
		this.eElement = eElement;
        
        this.eElement.addEvent('click', this.eventFocus.bind(this));
        this.eElement.addEvent('focus', this.eventFocus.bind(this));
        //this.eElement.addEvent('blur', this.eventBlur.bind(this));
        
        if(this.eElement.hasClass('password')) {
            this.ePassOpenText = this.eElement;
            this.ePassHiddenText = this.eElement.getNext();
        } else {
            this.eElement.addEvent('blur', this.eventBlur.bind(this));
        }
        
        this.oldValue = this.eElement.value;
    },
    
    eventFocus: function() {
        this.eElement.value = '';
        
        if(this.eElement.hasClass('password')) {
            //this.eElement.setProperty('type', 'password');
            
            this.ePassOpenText.setStyle('display', 'none');
            this.ePassHiddenText.setStyle('display', 'block');
            this.ePassHiddenText.addEvent('blur', this.eventBlur.bind(this));
            
            setTimeout(function() { document.getElementById('pass_hiddentext').focus(); }, 10);
        }
    },
    
    eventBlur: function() {
        if(this.eElement.hasClass('password')) {
            if(this.ePassHiddenText.value.trim()=='') {
                this.ePassOpenText.setStyle('display', 'block');
                this.ePassHiddenText.setStyle('display', 'none');
                
                this.ePassOpenText.value = this.oldValue;
            }
        } else {
            if(this.eElement.value.trim()=='') {
                this.eElement.value = this.oldValue;
            }
        }
    }
    
});

var Note = new Class({
    
	options: {
		closed: true
	},
	
    initialize: function(note) {
        this.eNote = note;
        
        this.eNoteIcon = this.eNote.getElement('DIV.note_icon');
		this.eNoteIconOpen = this.eNoteIcon.getElement('DIV.note_icon_open');
		this.eNoteIconClose = this.eNoteIcon.getElement('DIV.note_icon_close');
		
		this.eNoteText = this.eNote.getElement('DIV.note_text');
        
        this.eNoteIcon.addEvent('click', this.eventClick.bind(this));
    },
    
    eventClick: function() {
		if(this.options.closed) {
			this.eNoteText.setStyle('display', 'block');
			this.eNoteIconOpen.setStyle('display', 'none');
			this.eNoteIconClose.setStyle('display', 'block');
			
			var eTabbedFrame = $$('DIV.tabbedframe');
			if(eTabbedFrame) {
				var tTabElement = eTabbedFrame.getElement('DIV.active DIV.content');
				var tTabSize = tTabElement[0].getSize();
				
				eTabbedFrame.setStyle('height', tTabSize.y);
			}
			
			this.options.closed = false;
		} else {
			this.eNoteText.setStyle('display', 'none');
			this.eNoteIconOpen.setStyle('display', 'block');
			this.eNoteIconClose.setStyle('display', 'none');
			
			var eTabbedFrame = $$('DIV.tabbedframe');
			if(eTabbedFrame) {
				var tTabElement = eTabbedFrame.getElement('DIV.active DIV.content');
				var tTabSize = tTabElement[0].getSize();
				
				eTabbedFrame.setStyle('height', tTabSize.y);
			}
			
			this.options.closed = true;
		}
    }
});

var LastNote = new Class({
    
    initialize: function(lastnote) {
        this.eLastNote = lastnote;
        
        this.eLastNoteContent = this.eLastNote.getElement('DIV.last_note');
		
		this.eLastNote.addEvent('mouseover', this.eventMouseOver.bind(this));
		this.eLastNote.addEvent('mouseout', this.eventMouseOut.bind(this));
    },
    
    eventMouseOver: function() {
		if(this.eLastNoteContent.get('text').trim()!='')
			this.eLastNoteContent.setStyle('display', 'block');
    },
	
	eventMouseOut: function() {
		this.eLastNoteContent.setStyle('display', 'none');
    }
	
});

var InfoBox = new Class({
    
    initialize: function(infoBox) {
        this.eInfoBox = infoBox;
        
        this.eIcon = this.eInfoBox.getElement('DIV.icon');
		this.eContent = this.eInfoBox.getElement('DIV.content');
        
        this.eIcon.addEvent('mouseover', this.eventMouseOver.bind(this));
		this.eIcon.addEvent('mouseout', this.eventMouseOut.bind(this));
        
        this.eContent.addEvent('mouseover', this.eventMouseOver.bind(this));
		this.eContent.addEvent('mouseout', this.eventMouseOut.bind(this));
        
        //this.cTop = this.eContent.getPosition().y - 2;
        //this.cLeft = this.eContent.getPosition().x-this.eContent.getSize().x + 18;
        this.eContent.setStyle('display', 'none');
    },
    
    eventMouseOver: function() {
        this.eContent.setStyle('display', 'block');
        //this.eContent.setStyle('top', this.cTop);
        //this.eContent.setStyle('left', this.cLeft);
        
        this.eIcon.setStyle('z-index', 999);
        this.eContent.setStyle('z-index', 99);
        
    },
    
    eventMouseOut: function() {
        this.eContent.setStyle('display', 'none');
        
        this.eIcon.setStyle('z-index', 9);
        this.eContent.setStyle('z-index', 9);
    }
    
});

var HoverEffect = new Class({
    
    initialize: function(eHoverEffect) {
        this.eHoverEffect = eHoverEffect;
        
		this.eHiddenLayer = this.eHoverEffect.getElement('DIV.hiddenlayer');
		
        this.eHoverEffect.addEvent('mouseover', this.eventMouseOver.bind(this));
		this.eHoverEffect.addEvent('mouseout', this.eventMouseOut.bind(this));
        
        this.eHiddenLayer.addEvent('mouseover', this.eventMouseOver.bind(this));
		this.eHiddenLayer.addEvent('mouseout', this.eventMouseOut.bind(this));
        
        //this.cTop = this.eContent.getPosition().y - 2;
        //this.cLeft = this.eContent.getPosition().x-this.eContent.getSize().x + 18;
        this.eHiddenLayer.setStyle('display', 'none');
    },
    
    eventMouseOver: function() {
        this.eHiddenLayer.setStyle('display', 'block');
        //this.eContent.setStyle('top', this.cTop);
        //this.eContent.setStyle('left', this.cLeft);
    },
    
    eventMouseOut: function() {
        this.eHiddenLayer.setStyle('display', 'none');
    }
    
});


window.addEvent('domready', function() {
	
	var elements = $$('DIV.hovereffect');
	elements.each(function(element, index) {
		element.setStyle('z-index', 10000-index*3);
		var tHoverEffect = new HoverEffect(element);
    });
	
	var elements = $$('DIV.customerorders DIV.note');
	elements.each(function(element, index) {
		var tNote = new Note(element);
    });
	
	var elements = $$('DIV.completedorder DIV.order_notes_view');
	elements.each(function(element, index) {
		var tLastNote = new LastNote(element);
    });
	
	var elements = $$('DIV.offer_icon');
	elements.each(function(element, index) {
		element.addEvent('mouseover', function() {
			element.getElement('DIV.offer_description').setStyle('display', 'block');
		}.bind(element));
		element.addEvent('mouseout', function() {
			element.getElement('DIV.offer_description').setStyle('display', 'none');
		}.bind(element));
    });
	
    
    var navigationitems = $$('DIV.navigation_main DIV.items DIV.item');
	
    navigationitems.each(function(element, index) {
		var tNavigationItem = new NavigationItem(element);
    });
    
    
    var custombuttonitems = $$('DIV.button');
	
    custombuttonitems.each(function(element, index) {
		var tCustomButton = new CustomButton(element);
    });
    
    
    var subnavigationitems = $$('DIV.navigation_main DIV.subitems DIV.subitem');
	
    subnavigationitems.each(function(element, index) {
		var tSubNavigationItem = new NavigationItem(element);
    });
    
    
    var elements = $$('DIV.statictabbedframe DIV.tab');
	
    elements.each(function(element, index) {
		var tCustomMouseOverClass = new CustomMouseOverClass(element, 'active');
    });
    
    
    var elements = $$('DIV.loginbox INPUT.field');
    
    elements.each(function(element, index) {
		var tInputFieldClearValue = new InputFieldClearValue(element);
    });
    
    var elements = $$('DIV.search-box INPUT.search-box-sword');
    
    elements.each(function(element, index) {
		var tInputFieldClearValue = new InputFieldClearValue(element);
    });
    
    
    var elements = $$('DIV.customerform DIV.message');
    
    elements.each(function(element, index) {
		if(element.get('text').trim()!='') {
            element.setStyle('display', 'block');
		} else {
            element.setStyle('display', 'none');
		}
    });
    
    
    var elements = $$('DIV.search_result DIV.product DIV.product_image');
    elements.each(function(element, index) {
        element.addEvent('mouseover', (function() {
            element.getElement('DIV.image_medium').setStyle('display', 'block');
        }).bind(this));
        element.addEvent('mouseout', (function() {
            element.getElement('DIV.image_medium').setStyle('display', 'none');
        }).bind(this));
    });
    
    var elements = $$('DIV.search_results DIV.review DIV.review_image');
    elements.each(function(element, index) {
        element.addEvent('mouseover', (function() {
            element.getElement('DIV.image_medium').setStyle('display', 'block');
        }).bind(this));
        element.addEvent('mouseout', (function() {
            element.getElement('DIV.image_medium').setStyle('display', 'none');
        }).bind(this));
    });
    
	var infoboxes = $$('DIV.infobox');
	
    infoboxes.each(function(element, index) {
		var tInfoBox = new InfoBox(element);
    });
	
	var tabbedframes = $$('DIV.tabbedframe');
	
    tabbedframes.each(function(element, index) {
		var tTabbedFrame = new TabbedFrame(element);
    });
	
});


function showallnotes() {
	var notes = $$('DIV.notes DIV.note');
	
	notes.each(function(element, index) {
		element.getElement('DIV.note_text').setStyle('display', 'block');
		element.getElement('DIV.note_icon DIV.note_icon_open').setStyle('display', 'none');
		element.getElement('DIV.note_icon DIV.note_icon_close').setStyle('display', 'block');
		
		var eTabbedFrame = $$('DIV.tabbedframe');
		if(eTabbedFrame) {
			var tTabElement = eTabbedFrame.getElement('DIV.active DIV.content');
			if(tTabElement[0]) {
				var tTabSize = tTabElement[0].getSize();
				
				eTabbedFrame.setStyle('height', tTabSize.y);
			}
		}
	});
}

function  hideallnotes() {
	var notes = $$('DIV.notes DIV.note');
	
	notes.each(function(element, index) {
		element.getElement('DIV.note_text').setStyle('display', 'none');
		element.getElement('DIV.note_icon DIV.note_icon_open').setStyle('display', 'block');
		element.getElement('DIV.note_icon DIV.note_icon_close').setStyle('display', 'none');
		
		var eTabbedFrame = $$('DIV.tabbedframe');
		if(eTabbedFrame) {
			var tTabElement = eTabbedFrame.getElement('DIV.active DIV.content');
			if(tTabElement[0]) {
				var tTabSize = tTabElement[0].getSize();
				
				eTabbedFrame.setStyle('height', tTabSize.y);
			}
		}
	});
}