var Directory = new Class({
	container : null,
	togglers : null,
	elements : null,
	width : 306,
	height : 165,
	scroller : null,
	currentElement : null,
	
	initialize : function (container,togglers,elements) {
		this.container = $$(container)[0];
		this.togglers = $$(togglers);
		this.elements = $$(elements);
		
		if (!this.container || !this.togglers || !this.elements) return false;
		
		var wrapper = new Element('div');
		
		wrapper.inject(this.container);
		
		this.elements.forEach(function (item,index) {
			item.inject(wrapper);
		});
		
		this.elements.forEach(function (item,index) {
			item.showing = false;

			new DirectoryBlock(item);
			
			if (index == 0) {
				item.showing = true;
				this.currentElement = item;
			}
		}.bind(this));
		
		this.scroller = new Fx.Scroll(this.container, {duration: 1000, transition: Fx.Transitions.Quart.easeInOut});
		
		wrapper.setStyles({'width' : this.elements.length*this.width + 'px'});
		
		this.togglers.forEach(function(item,index) {
			item.addEvent('click',this.gotoShop.bindWithEvent({'obj' : this, 'target' : item}));
		}.bind(this));
	},
	
	gotoShop : function(event) {
		if (!window.ie) {
			event = new Event(event);
			event.preventDefault();
		}else {
		    event.cancelBubble = true;
		    event.returnValue = false;
		}
		var element = $(this.target.get('rel'));
		
		if (element) {
			this.obj.currentElement.showing = false;
			
			this.obj.currentElement = element;
			
			this.obj.currentElement.showing = true;
			
			this.obj.scroller.toElement(element);
		}
	}
});

var DirectoryBlock = new Class({
	element : null,
	index : 0,
	total : 0,
	
	initialize : function (element) {
		this.element = element;
		
		if (this.element.getChildren().length > 3) {
			this.showItems.periodical(5000,this);
		}
	},
	
	showItems : function() {
		if (this.element.showing) {
			var fx = new Fx.Morph(this.element.getFirst(),{duration: 500, transition: Fx.Transitions.Quart.easeInOut});
			
			this.element.getFirst().setStyles({'overflow' : 'hidden'});
			
			fx.addEvent('complete', function() {
				this.element.getFirst().inject(this.element);
				this.element.getLast().setStyles({'height' : '50px'});
			}.bindWithEvent(this));
			
			fx.start({'height' : 0});
		}
	}
});