//var myNav = new ImageNav($$('#kwick .kwick'),320,onClick function);

function _pause(msec) { // funcion de pausar 
		 var date = new Date();
		 var curDate = null;
		 do {
			 curDate = new Date();
		 } while(curDate-date < msec);
} 

var ImageMenu = new Class({
	initialize: function(myElements,options){
		options = Object.extend({
			onClick: Class.empty,
			start: -1,
			openWidth: 0,
			smallWidth: 0,
			itemWidth: 0,
			selected: -1,
			open: -1
		}, options || {});

		this.myElements = myElements;
		this.options = options;

		options.itemWidth = myElements[0].getStyle('width').toInt();
		options.smallWidth = Math.round(((options.itemWidth*myElements.length)-options.openWidth)/(myElements.length-1));

		var fx = new Fx.Elements(myElements, {wait: false, duration: 400, transition: Fx.Transitions.quadOut});
		var zx= options.selected;

		myElements.each(function(el, i){
			el.addEvent('mouseover', function(e){
			e = new Event(e).stop();
			el.show();
			var vermenu = options.selected +1;
			if (i < options.selected ){
				document.getElementById('divMenu' + vermenu ).style.display="none";
				options.selected = -1;
				}
				if (i > options.selected ){
				document.getElementById('divMenu' + vermenu ).style.display="none";
				options.selected = -1;
				}
});
			
			el.addEvent('click', function(e){
				el.select();
				/*document.getElementById('divMenu0').style.display="none";*/
				document.getElementById('divMenu1').style.display="none";
				document.getElementById('divMenu2').style.display="none";
				document.getElementById('divMenu3').style.display="none";
				document.getElementById('divMenu4').style.display="none";
				document.getElementById('divMenu5').style.display="none";
				document.getElementById('divMenu6').style.display="none";
				document.getElementById('divMenu7').style.display="none";
				document.getElementById('divMenu8').style.display="none";
				document.getElementById('divMenu9').style.display="none";
				var xDiv = i+1;
				_pause(400);
				document.getElementById('divMenu' + xDiv ).style.display="block"
});
			
			el.addEvent('mouseout', function(e){
				e = new Event(e).stop();
				el.hide();
});
			
			el.show = function(){
				var obj = {};
				obj[i] = {'width': [el.getStyle('width').toInt(), options.openWidth]};
				myElements.each(function(other, j){
					if (other != el){
						var w = other.getStyle('width').toInt();
						if (w != options.smallWidth) obj[j] = {'width': [w, options.smallWidth]};
					}
				});
				fx.start(obj);
};
			
			el.hide = function(){
				var obj = {};
				if(options.selected == -1){
					myElements.each(function(el,i){
						obj[i] = {'width': [el.getStyle('width').toInt(), options.itemWidth]};
						
					});
					
				}else{
					myElements.each(function(el,i){
						if(i != options.selected){
							var w = el.getStyle('width').toInt();
							if(w != options.smallWidth){obj[i] = {'width': [w, options.smallWidth]}};
							
						}else{
							obj[i] = {'width': [el.getStyle('width').toInt(), options.openWidth]};
							
						}
					});
				}
				fx.start(obj);
			};
			
			el.select = function(){
				if(options.selected == i){options.selected = -1}else{options.selected = i}
				options.onClick(options.selected,options.open);
				options.open = options.selected;
			};
});
		
		if(options.start != -1){
			myElements[options.start].show();
			myElements[options.start].select();
			
		}
	},
	
	reset: function(){
		this.options.selected = -1;
		this.options.open = -1;
		this.myElements.each(function(el, i){
			el.hide();
			
		});
	}
	
});