function numArrSort(a, b){
	return a - b;
}

window.addEvent('domready', function() {
	
	if($('dock')){
		var img_margin = 10;
		var param_small = [0.5,0.7, 0.8]; // size, opacity
		var dock_imgs = $$('#dock img');
		var dockW = $('dock').getSize().x;	
		var imgSize = new Array();
		var imgTitle = new Array();
		var allimgW = 0;
		var fx = new Fx.Elements(dock_imgs, {wait: false, duration: 500, transition: Fx.Transitions.Quad.easeOut});
	
  		var tmpDockW = new Array();
		dock_imgs.each(function(element, i) {
			var objW = element.width;
			tmpDockW[i] = objW;
			allimgW += objW;
		});
	
		tmpDockW.sort(numArrSort).reverse();
		var dockWprops = {
			'maxHiW': tmpDockW[0] + (tmpDockW[1] + tmpDockW[2]) * param_small[2],
			'restW': 0
		}
		for(var i = 3; i <  tmpDockW.length; i++){dockWprops['restW'] += tmpDockW[i] };
		dockWprops['faktor'] = (dockW-40 - dockWprops['maxHiW']) / dockWprops['restW'];
		if(dockWprops['faktor'] < param_small[0]){ param_small[0] = dockWprops['faktor'] };
	
	
		
	//info init ->
	/*
		var dockY = $('dock').getPosition().y - $('dock').getSize().y;
		var dinfo = new Element('div', { 'id': 'dockinfo'});
		var dinfo_content = new Element('div', { 'id': 'dockinfo_content' }).injectTop(dinfo);
		var dinfo_o = new Element('div', { 'id': 'dockinfo_o' }).injectTop(dinfo);
		dinfo.injectTop(document.body);
		var infoFX = new Fx.Morph($('dockinfo'), {duration:500, wait:false});
		$('dockinfo').setStyle('opacity','0')
	*/
	// info init <-	
	
	
		dock_imgs.each(function(element, i) {
			var objW = element.width;
			var objH = element.height;
	// save title in imgTitle and remove attribute
			imgTitle[i] = element.getParent().getProperty('title'); //element.getParent().removeProperty('title');
		
			imgSize[i] = [objW, Math.round(objW*param_small[1]), Math.round(objW*param_small[0]), objH];

			var e_i = {};
			element.addEvent('mouseenter', function(){
				objW = element.getStyle("width");
				objA = element.getStyle("opacity");
			
// implement infobox Events
				if($('img_infox')){
					img_info_x.show_info(element.getParent());
				}
// end infobox
			
				if(objW != imgSize[i][0]){
					e_i[i] = {
						width: [ objW, imgSize[i][0] ],
						opacity: [objA, 1]
					}

					dock_imgs.each(function(dockimg, o) {
						objW = dockimg.getStyle("width");
						objA = dockimg.getStyle("opacity");
						if(o > i+1 || o < i-1){
							if(objW != imgSize[o][2]){
								e_i[o] = {
									width: [ objW, imgSize[o][2] ],
									opacity: [objA, param_small[0]]
								}
							}
						}else{
							if(o != i && objW != imgSize[o][1]){
								e_i[o] = {
									width: [ objW, imgSize[o][1] ],
									opacity: [objA, param_small[1]]
								}
							}
						}
					});
				fx.start(e_i);
				}
			});

			element.setStyle("width", imgSize[i][2]+'px' );
			element.setStyle("height", objH+'px' );
		});
	
	
		$('dock').addEvent('mouseleave', function(){
			// implement infobox Events
						if($('img_infox')){
							img_info_x.hide_info();
						}
			// end infobox
			var e_i = {};
			dock_imgs.each(function(dockimg, o) {
				objW = dockimg.getStyle("width");
				objA = dockimg.getStyle("opacity");
				if(objW != imgSize[o][2]){
					e_i[o] = {
						width: [ objW, imgSize[o][2] ],
						opacity: [objA, 1]
					}
				}			
			});
			fx.start(e_i);
		});
	}
	
});