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

var ImageMenu = new Class({

	

	initialize: function(myElements,options){

		options = Object.extend({

			onClick: Class.empty,

			start: -1,

	//		openHeight: 0,

		//	smallHeight: 0,

			//itemHeight: 0,

			selected: -1,

			open: -1,
			
			openWidth: 0,

			smallWidth: 0,

			itemWidth: 0,

		}, options || {});

		

		this.myElements = myElements;

		this.options = options;

		

		//options.itemHeight = myElements[0].getStyle('height').toInt();
		options.itemWidth = myElements[0].getStyle('width').toInt();

		//options.smallHeight = Math.round(((options.itemHeight*myElements.length)-options.openHeight)/(myElements.length-1));
		options.smallWidth = Math.round(((options.itemWidth*myElements.length)-options.openWidth)/(myElements.length-1));
		

		options.smallWidth= 75;

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

		

		myElements.each(function(el, i){

			el.addEvent('mouseover', function(e){

				e = new Event(e).stop();

				el.show();

			});

			

			el.addEvent('click', function(e){

				el.select();

			});

			

			el.addEvent('mouseout', function(e){

				e = new Event(e).stop();

				el.hide();

			});

			

			el.show = function(){

				var obj = {};

				//obj[i] = {'height': [el.getStyle('height').toInt(), options.openHeight]};
				obj[i] = {'width': [el.getStyle('width').toInt(), options.openWidth]};

				myElements.each(function(other, j){

					if (other != el){

			//			var w = other.getStyle('height').toInt();
						var ww = other.getStyle('width').toInt();

						if (ww != options.smallWidth) {
						//obj[j] = {'height': [w, options.smallHeight]};
						obj[j] = {'width': [ww, options.smallWidth]};
						}
					}

				});

				fx.start(obj);

			};

			

			el.hide = function(){

				var obj = {};

				if(options.selected == -1){

					myElements.each(function(el,i){

						//obj[i] = {'height': [el.getStyle('height').toInt(), options.itemHeight]};
						obj[i] = {'width': [el.getStyle('width').toInt(), options.itemWidth]};	

					});

				}else{

					myElements.each(function(el,i){

						if(i != options.selected){

							//var w = el.getStyle('height').toInt();
							var ww = el.getStyle('width').toInt();

							if(ww != options.smallWidth)
								{
									//obj[i] = {'height': [w, options.smallHeight]}
									obj[i] = {'width': [ww, options.smallWidth]}
								};

						}else{

							//obj[i] = {'height': [el.getStyle('height').toInt(), options.openHeight]};
							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();

		});

	}

	

});