var Tabs = new Class({
    Implements: Events,
	
    slideshow:[],
    slideContent:[],
    current:null,
    
    initialize: function(slideshow, content) {
        this.slideshow = $(slideshow).getElements('li a');
        this.slideContent = $(content).getElements('.slide');
        
        var self = this;
        
        this.slideshow.each(function(el, i) {
            el.addEvent('mouseover', function() { this.addClass('hover')});
            el.addEvent('mouseout', function() { this.removeClass('hover')});
            el.addEvent('click', function(e) { 
				e.preventDefault();
				self.selectItem(i); 
			})
        });
        
		this.offStyles = {
			position: "absolute",
			top: "400px",
			left: 0
		};
		this.onStyles = {
			position: "absolute",
			top: 0,
			left: 0
		};
		
        this.selectItem(0)
    },
    
    selectItem: function(index) {
        if (this.current == null) {
			var contentCopy = $$(this.slideContent),
			startSlide = $$(contentCopy.splice(index, 1));
            contentCopy.each(function(el) {
                el.setStyles(this.offStyles);
            }, this);
			startSlide.setStyles(this.onStyles);			
        } else {
            this.slideContent[this.current].setStyles(this.offStyles);
            this.slideshow[this.current].removeClass('selected');
			this.fireEvent("hide", [this.slideshow[this.current], this.slideContent[this.current]]);
        }
        
        this.current = index;
        
        this.slideContent[index].setStyles(this.onStyles);
        this.slideshow[index].addClass('selected');
    }
    
})

window.addEvent('domready', function() {
    var tabs = new Tabs('slideshow', 'slidecontent');
});