var DropNaviItem = Class.create();

DropNaviItem.prototype = {
	
	initialize: function(position, size) {

		this.position = position;
		this.currentPosition = position;
		this.size = size;
		this.timeout = null;		
	},
	
	isMove: function() {

		if (this.position != this.currentPosition)
			return true;
		else
			return false;
	},
	
	getPosition: function() {
		return this.currentPosition;
	},
	
	setPosition: function(position) {
		this.currentPosition = position;		
	},
	
	moveTo: function(position) {
		this.position = position;
	},

	moveStep: function() {
		
	 	return this.position - this.currentPosition;
	},
	
	maxStep: function(direction) {
		switch (direction) {
			case -1:
				return this.currentPosition;
				break;
			case 1:
				return this.size - this.currentPosition;
		}
	}
};

/*Drop navigation class*/
var DropNavi = Class.create();

DropNavi.prototype = {
	
	initialize: function(name, itemName, subItemName) {						
		this.left = $(name).offsetLeft;
		this.top = $(name).offsetTop;
		this.size = $(name).offsetWidth;
		
		this.name = name;
		this.itemName = itemName;
		this.subItemName = subItemName;
				
		this.items = new Array();
		this.minStep = 5;
		this.coefficientStep = 0.7;
		this.selectItem = null;		
		
		this.delayTimeout = 200;		
		this.invalidateInterval = 100;		
		

		var index = 1;
		while ($(this.itemName + index) != null) {

			element = $(itemName + index);
			subElement = $(subItemName + index);
			if (element != null) {
			    element.onmouseover = this.itemover.bindAsEventListener(this);
				element.onmouseout = this.itemout.bindAsEventListener(this);
				element.index = index;
			}
						
			if (subElement != null) {								
				subElement.onmouseover = this.subitemover.bindAsEventListener(this);
				subElement.onmouseout = this.subitemout.bindAsEventListener(this);				
				subElement.index = index;				
				
				for (var subElementChildIndex = 0; subElementChildIndex < subElement.childNodes.length; subElementChildIndex++) {
				    var subElementChild = subElement.childNodes[subElementChildIndex];
				    subElementChild.onmouseover = this.subitemover.bindAsEventListener(this);
				    subElementChild.onmouseout = this.subitemout.bindAsEventListener(this);				
				    subElementChild.index = index;
				    				    
				}
				
				subElement.style.visibility = 'hidden';						
				
			}
			
			if (element.className == 'selectitem')
					this.selectItem = element;

			index++;
		}
		
		this.invalidateItem();
		
		this.itemCount = index - 1;		
		
		if (this.selectItem == null)
		{
			this.selectItem = $(this.itemName + '1');
			this.setselectitem(1);
		}
		
		this.interval = setInterval(this.invalidateNavi.bind(this), this.invalidateInterval);

	},
	
	over: function() {
	},
	
	out: function() {
	},
	
	itemover: function(evt) {		
		var element = Event.element(evt); 
 		while (element.id.search(this.itemName)) {
			element = element.parentNode;
		}
		var index = element.index;
		if (this.items[index] != null) {
			clearTimeout(this.items[index].timeout);			
			t = this;		
			this.items[index].timeout = setTimeout("t.expandItem(" + index + ")", this.delayTimeout);
		}
		
		if ($(this.itemName + index) != this.selectItem)
		{
			this.setItemOver(index);
		}
	},
	
	itemout: function(evt) {
	
		var element = Event.element(evt); 

 		while (element.id.search(this.itemName)) {
			element = element.parentNode;
		}
		var index = element.index;
		
		if (this.items[index] != null) {
			clearTimeout(this.items[index].timeout);
			t = this;
			this.items[index].timeout = setTimeout("t.collapseItem(" + index + ")", this.delayTimeout);
		} 		
		if ($(this.itemName + index) != this.selectItem)
			this.setnormalitem(index);
	},
	
	subitemover: function(evt) {
		
		var element = Event.element(evt); 

 		while (element.id.search(this.subItemName)) {
			element = element.parentNode;
		}
		var index = element.index;
		
		if (this.items[index] != null) {
			clearTimeout(this.items[index].timeout);
			this.items[index].timeout = null;
		}
	},
	
	subitemout: function(evt) {		
			
		var element = Event.element(evt); 

 		while (element.id.search(this.subItemName)) {
			element = element.parentNode;
		}
		var index = element.index;					
		if (!this.inObject(element.offsetLeft + this.left, element.offsetTop + this.top, element.offsetWidth, element.offsetHeight, evt.clientX, evt.clientY)) {			

			if (this.items[index] != null) {
				clearTimeout(this.items[index].timeout);				
				t = this;
				this.items[index].timeout = setTimeout("t.collapseItem(" + index + ")", this.delayTimeout);				
			}
		}
	},	
	
	expandItem: function(index) {
		if (this.items[index] != null) {							
			this.items[index].timeout = null;
			this.items[index].moveTo(this.items[index].size);
		}		
	},
	
	collapseItem: function(index) {
		if (this.items[index] != null) {
			this.items[index].timeout = null;
			this.items[index].moveTo(0);
		}
		if ($(this.itemName + index) != this.selectItem)
			this.setnormalitem(index);
	},
	
	invalidateNavi: function() {
		
		if ($(this.name).offsetWidth != this.size) {
			this.invalidateItem();
			this.size = $(this.name).offsetWidth;
		}
		

		for (index = 1; index <= this.itemCount; index++) {
		
			if (this.items[index] != null) {	
				if (this.items[index].isMove()) {										
					
					var element = $(this.subItemName + index);
					
					if (this.items[index].getPosition() == 0)
						element.style.visibility = 'visible';					
					
					var step = this.coefficientStep * this.items[index].moveStep();				

					var direction = step / Math.abs(step);
					step = Math.max(Math.abs(step), this.minStep);				
				
					step = Math.floor(Math.min(step, this.items[index].maxStep(direction)));										
					
					this.items[index].setPosition(this.items[index].getPosition() + direction * step);				
					
					element.style.marginTop = (element.offsetTop + direction * step) + 'px';
					
					if (this.items[index].getPosition() == 0)					
						element.style.visibility = 'hidden';
				}
			}
		}
	},
	
	setnormalitem: function(itemId) {		
		if ($(this.itemName + itemId) != null) {		
			Element.removeClassName(this.itemName + itemId, 'hoveritem');
			Element.addClassName(this.itemName + itemId, 'normalitem');
		}
	},
	
	setItemOver: function(itemId) {
		if ($(this.itemName + itemId) != null) {		
			Element.removeClassName(this.itemName + itemId, 'normalitem');
			Element.addClassName(this.itemName + itemId, 'hoveritem');
		}
	},
	
	setselectitem: function(itemId) {
		if ($(this.itemName + itemId) != null) {		
			Element.removeClassName(this.itemName + itemId, 'normalitem');
			Element.addClassName(this.itemName + itemId, 'selectitem');
		}
	},	
	
	invalidateItem: function() {		
		for (index = 1; index <= this.itemCount; index++) {

			element = $(this.itemName + index);
			subElement = $(this.subItemName + index);			
			
			if ((element != null) && (subElement != null)) {				
				
				var left = element.offsetLeft;

				var width = element.offsetWidth;
				
				if (subElement.resize != false)
					//subElement.style.width = width + 'px';				
				
				var widthSubElement = subElement.offsetWidth;

				var horizontalPosition = left + (width - widthSubElement) / 2;
				horizontalPosition = Math.max(horizontalPosition, 0);				
				subElement.style.left = horizontalPosition + 'px';
			
				var verticalPosition = $(this.name).offsetHeight + 2 - subElement.offsetHeight;
				subElement.style.marginTop = verticalPosition + 'px';			
			
				var size = subElement.offsetHeight;
				this.items[index] = new DropNaviItem(0, size);
			}
		}				
	},
	
	inObject: function(left, top, width, height, x, y) {
		
		if ((x > left) && (x < left + width) && (y > top) && (y < top + height)) 
			return true;
		else
			return false;
		
	}	

};