/**
 * @author daco
 */

ComicHouse.Topnavigation = Class.create (LazzoBaseClass, {
	
	_init: function () {
		
		this.NavItem = Class.create ({
		
			initialize: function(element, index, parent){

				this.element = element;
				this.innerelement = this.element.down('a');
				
				this.index = index;
				
				// illustratio 2d and 3d -> authornavigation
				if (this.index == 0) {
					
					this.innerelement.removeAttribute('href');
					this.authornav2d = new ComicHouse.AuthorNavigation('2d', 0);
				
					this.innerelement.observe('click', this.authornav2d.show.bind(this.authornav2d));
					
				}
				if (this.index == 1) {
					
					this.innerelement.removeAttribute('href');
					this.authornav3d = new ComicHouse.AuthorNavigation('3d', 1);
					this.innerelement.observe('click', this.authornav3d.show.bind(this.authornav3d));
					
				}
				
				this.parent = parent;
				this.selected = false;
				
				this.baseY = 18;
				this.topY = 8;

				this.selectTopY = this.element.offsetTop - 18;
				
				this.zIndex = this.element.getStyle('zIndex');
				
				this.element.observe('mouseover', this.moveUp.bind(this));
				this.element.observe('mouseout', this.moveDown.bind(this));
				this.element.observe('mousedown', this.select.bind(this));
				
				if (this.element.hasClassName('selected')) {
					this.showSelectedStyle();
				}
				
			},
			
			moveUp : function(){
			
				if (this.selected || this.element.hasClassName('selected')) {return;}
			//	if (this.parent.isLocked()) {return;}
				if (this.effect)
					this.effect.cancel();

				var deltaY = this.topY - this.element.offsetTop;
				
				//this.element.setStyle({zIndex:20});
				
				this.effect = new Effect.Move(this.element, { x: 0, y: deltaY, duration:0, mode: 'relative' });
			},
			
			moveDown : function(){
			
				if (this.selected || this.element.hasClassName('selected')) {return;}
			//	if (this.parent.isLocked()) {return;}
				if (this.effect)
					this.effect.cancel();	
								
				var deltaY = this.baseY - this.element.offsetTop;
				
				this.effect = new Effect.Move(this.element, {
					x: 0, y: deltaY, duration:.3, mode: 'relative',
					afterFinish:function(){/*this.element.setStyle({zIndex:this.zIndex});*/}.bind(this)});

			},
			
			shutDown: function () {
				
				//this.element.removeClassName('selected');
				this.selected = false;
				
				if (this.element.hasClassName('selected')) {
				
					this.element.setStyle({
						zIndex: 20
					})
					
				} else {
					
					this.element.setStyle({
						top: this.baseY+'px',
						zIndex: this.zIndex
					});				
					
				}
				
			},
			
			select: function(){
				
				if (this.selected) {return;}
				//if (this.parent.isLocked()) {return;}
				
				if (this.effect)
					this.effect.cancel();				
				
				// stop moving
				this.parent.setLocked();
				
				// drop all down
				this.parent.shutAllDown();
				
				this.selected = true;
				
				var deltaY = 6 - this.element.offsetTop;
				
				this.effect = new Effect.Move(this.element, {
					x: 0,
					y: deltaY,
					duration: .1,
					mode: 'relative',
					afterFinish:function(){this.element.setStyle({top:this.topY - 2 + 'px', zIndex:'25'});}.bind(this)});

				this.showSelectedStyle();
			
			},
			
			showSelectedStyle: function() {
				this.selected = true;
				this.element.setStyle({zIndex:20});				
			},
			
			partiallyHide: function(){
				
				this.element.setStyle({height:'33px'});

			},
			
			undoPartiallyHide: function(){
				
				this.element.setStyle({height:'58px'});
				
			}
			
			
			
		})	
		
	},
	
	_initDomLoaded: function () {
		this.navbar = $('topnavigation');
		if (!this.navbar) {return;}
		
		this.navItems = [];
		this.locked = false;										// use this to freeze state after click.
		
		var init_items = function(){
			
			this.navbar.select('ul li').each(
				function(element, index){
					
					this.navItems.push(new this.NavItem(element, index, this));
					
				}.bind(this)
			)			
		}.bind(this);
		
		init_items();

	},
	
	setLocked: function(){
		this.locked = true;
	},
	
	isLocked: function(){
		return this.locked;
	},
	
	shutAllDown: function(){
		this.navItems.invoke('shutDown');
	},
	
	partiallyHideForAuthorNav: function(index) {
		
		this.navItems.invoke('undoPartiallyHide');
		this.navItems[index].partiallyHide();
		
	},
	
	undoPartiallyHideForAuthorNav: function(){
		
		this.navItems.invoke('undoPartiallyHide');
		
	}
	
})
ComicHouse.topnavigation = new ComicHouse.Topnavigation();