/* global variables */
var animateArrowTime = false;
var arrows      = [];
var arrowCloser = '';
var checkUser   = false;
var usedId  = false;
var timerId  = new Array();
var images   = new Array();
var ajaxReq = false;
var layerTimerId = false;
var BIG_IMAGE_URL;
var IMG_SIZE_X = 120;
var IMG_SIZE_Y = 130;
var PX_TO_COMPLETE   = 92;
var SIZE_OF_IMGBOX   = 203;
var IMG_SIZE_LAYER_X = 180;
var IMG_SIZE_LAYER_Y = 150;
var BIG_IMAGE_SIZE   = 400;
var LAYER_SIZE_X = 654;
var LAYER_SIZE_Y = 216;
var PITCH_FOR_THE_LAYER = 20;
var REPLACE_IMAGE_SIZE = '220x180';
var BIG_IMAGE_SIZE_NAME = 'full';

window.addEvent('domready', function() {

	$$('.top-search_bg').each(function(el) {
		return;
		var inputWord = el;

		// Our instance for the element with id "demo-word"
		new Autocompleter.Request.JSON(inputWord, 'http://dev.metapreis.de/service/faceted/', {
			'indicatorClass': 'autocompleter-loading'
		});
	});
	if ($$('.boxLeft img').length > 0) {
		initBigPicture($$('.boxLeft img'));
	}

	$$('.search_bg').each(function(el) {
		var inputWord = el;

		// Our instance for the element with id "demo-word"
		new Autocompleter.Request.JSON(inputWord, 'http://dev.metapreis.de/service/faceted/', {
			'indicatorClass': 'autocompleter-loading'
		});
	});


	$$('.show-shipping').each(function(el, index) {
		shippingCosts(el);
	});

	if ($defined($$('.info_arrow')) && $$('.info_arrow').length == 3) {
		arrows[2]  = $$('.info_arrow')[0];
		arrows[1]  = $$('.info_arrow')[1];
		arrows[0]  = $$('.info_arrow')[2];
	}

	if ($defined($('gutter')) && $defined($('minKnob'))) {
		var firstSlided = false;
		var currentPriceRange = [$('minKnobVal').get('value').toInt(), $('maxKnobVal').get('value').toInt()];

		var priceRange = new Slider($('gutter'), $('minKnob'), {
			start: $('minKnob').get('title').toInt(),
			end: $('maxKnob').get('title').toInt(),
			offset: 10,
			knobheight: 16,
			onChange: function(pos) {
				$('minKnobVal').set('value', pos.minpos);
				$('maxKnobVal').set('value', pos.maxpos);
				$('sliderLabel').set('html', pos.minpos + ' € bis ' + pos.maxpos + ' €');

				if ($defined($('sliderLabel'))) {
					$('sliderLabel').set('html', pos.minpos + ' € bis ' + pos.maxpos + ' €')
				}

				$('minKnob').set('title', '');
				$('maxKnob').set('title', '');
			},

			onComplete: function(pos) {
				//closeAnimateArrows();

				if (checkUser) {

					fireKnobSearch();
				}

				if (firstSlided && !$defined($('price-range-updater'))) {
				}
				firstSlided = true;
			}
		}, $('maxKnob')).setMin(
			currentPriceRange[0]
		).setMax(
			currentPriceRange[1]
		);
	}

	if ($defined($('price-range-updater'))) {
		$('price-range-updater').addEvent('click', function(e) {
			e.stop();
			$('knobUpdate').submit();
		});
	}

	if ($defined($('add_box')) && $defined($('temp_hidden_div'))) {
		$('add_box').set('html',$('temp_hidden_div').get('html'));
	}

	if ($defined($$('.knob'))) {
		$$('.knob').each(function(el,index) {
			el.addEvent('mouseup', function(e) {
					//closeAnimateArrows();
			});
			el.addEvent('mousedown', function(e) {
				checkUser = true;
				if (animateArrowTime === false) {
					//animateArrows();
				}
			})
		});
	}
	if ($$('.img-res').length > 0) {
		initImgSearchLayer();
	}

});

var initBigPicture = function(elements) {
	elements.each(function(el,index) {

		el.addEvents({
			'mouseover' : function(e) {
				if (layerTimerId !== false) {
					$clear(layerTimerId);
					layerTimerId = false;
					return;
				}


				var layer   = initLayer(e);
				var image   = new Image();
				var reg     = new RegExp(REPLACE_IMAGE_SIZE,"g");
				image.src   = this.src.replace(reg, BIG_IMAGE_SIZE_NAME);
				var Site    = { pageY   : e.page.y,
							    elem    : layer,
							    imageId : image };

				layerTimerId = preLayerImg.periodical(500, Site);
				return new Element('img', {
					'src'   : image.src
				}).setStyle('display','none').injectInside(layer);

			},

			'mouseout'  : function(e) {
				if (!$defined($('mt-layer'))) {
					return false;
				}

				$('mt-layer').setStyle('display','none').empty();
				return $clear(layerTimerId);

			},

			'mousemove' : function(e) {

				if (!$defined($('mt-layer'))) {
					return false;
				}

				var Position = getScrollXY();
				var height   = 0;

				if ($('mt-layer').getElements('img').length > 0) {
					height   = $('mt-layer').getElements('img')[0].getStyle('height').toInt();
				}

				if (window.getHeight()+Position[1] < e.page.y+height + PITCH_FOR_THE_LAYER) {
					$('mt-layer').setStyles({
						'left' : e.page.x + PITCH_FOR_THE_LAYER,
						'top'  : parseInt(window.getHeight()+Position[1]) - height - PITCH_FOR_THE_LAYER
					});
				} else {
					$('mt-layer').setStyles({
						'left' : e.page.x + PITCH_FOR_THE_LAYER,
						'top'  : e.page.y
					});
				}
				return true;

			}
		});
	});
}
var preLayerImg = function() {
	if (this.imageId.complete) {
		if (this.elem.getElements('img').length == 0) {
			$clear(layerTimerId);
			layerTimerId = false;
			return false;
		}
		var img = this.elem.getElements('img')[0];
		img.setStyle('display','block');
		var height = img.getStyle('height').toInt();
		img.setStyle('display','none');

		var Position = getScrollXY();
		if (window.getHeight()+Position[1] < this.pageY+height) {
			this.elem.setStyle('top',parseInt(window.getHeight()+Position[1]) - height - PITCH_FOR_THE_LAYER);
		}
		img.setStyle('display','block');
		$clear(layerTimerId);
		layerTimerId = false;
		return true;
	}
};

var initLayer = function(e) {
		var styles = {
			'top'      : e.page.y,
			'left'     : e.page.x + PITCH_FOR_THE_LAYER,
			'display'  : 'block'
		};
	if ($defined($('mt-layer'))) {
		return $('mt-layer').setStyles(styles);
	} else {
		return new Element('div', {
			'id' : 'mt-layer'
		}).setStyle('position' , 'absolute').setStyles(styles).injectInside(document.body);
	}
}

var initOverlay = function(obj) {


	if ($defined($('mt-overlay'))) {
		return $('mt-overlay').setStyles({
		'display' : 'block',
		'opacity' : 0
		}).fade(0.5);
	}

	return new Element('div',{
		'id'    : 'mt-overlay',
		'class' : 'ajax-overlay'
	}).setStyles({
		'display' : 'block',
		'opacity' : 0,
		'width'   : window.getScrollWidth(),
		'height'  : window.getScrollHeight()
	}).injectInside(obj).addEvent('mousewheel',function(e) {
		e.stop();
	}).fade(0.5);
}

var initWaiter = function(obj) {

	if (typeof obj != 'object') {
		return;
	}

	var Position     = $$('.gutter-container')[0];

	var LAYER_TOP    = parseInt(parseInt(Position.getStyle('height')))/2 + parseInt(Position.getCoordinates().top) - 30  + 'px';
	var LAYER_LEFT   = parseInt(parseInt(Position.getStyle('width')))/2  + parseInt(Position.getCoordinates().left) - 120/2  + 'px';

	if ($defined($('mt-waiter'))) {
		return $('mt-waiter').setStyles({
			'display' : 'block',
			'opacity' : 1
		});

	}

	return new Element('div', {
		'class' : 'ajax-waiter-search ajax-waiter',
		'id'    : 'mt-waiter',
		'html'  : 'Bitte warten'
	}).setStyles({
		'position' : 'absolute',
		'z-index'  : 15000,
		'top'      : LAYER_TOP,
		'left'     : LAYER_LEFT,
		'width'    : 120 + 'px'
	}).injectInside(obj);
}

var shippingCosts = function(el) {
	el.addEvent('mouseover', function(e) {
		new Event(e).stop();
		var Position = getScrollXY();
		var coordinates = this.getCoordinates();
		var styles  = {};
		var tip     = $('tip-' + this.get('title'));

		tip.setStyle('display', 'block');
		var tipSize = parseInt(tip.getSize().y)+10;
		tip.setStyle('display', 'none');
		if (window.getHeight()+Position[1] < coordinates.top+tipSize) {
			styles = {
				'top' : coordinates.top-tipSize
			};
		}

		$('tip-' + this.get('title')).setStyles(styles).setStyle('display', 'block');
	});

	el.addEvent('mouseout', function(e) {
		$('tip-' + this.get('title')).setStyles({
			'display' : 'none',
			'top'  : ''
		});
	});
}


var preLoadImg = function() {
	if (images[this.key].complete) {

		var img = $$('.img-box')[this.key].getElements('img')[0];
    	img.removeProperty('height');
    	img.removeProperty('width');
		img.setStyles({
			'margin-top' : img.getParents('div')[0].getStyle('height').toInt()/2-img.getStyle('height').toInt()/2
		});

		$clear(timerId[this.key]);
	}
};

String.prototype.trim = function () {
    return this.replace(/^\s+/g, '').replace(/\s+$/g, '');
}

var initImgSearchLayer = function() {

	if ($$('.img-res').length * SIZE_OF_IMGBOX + PX_TO_COMPLETE < $('main-images').getSize().x) {
		$('main-images').setStyles({
			'margin' : '0px auto',
			'width'  : parseInt($$('.img-res').length) * SIZE_OF_IMGBOX + 'px'
		});
		$$('.img-res').setStyles({
			'margin-top' : '40px'
		});
	}

	window.addEvent('keydown', function(e) {
		//27 for ESC
		if (e.code == 27 && $('img-layer').getStyle('display') == 'block') {
			closeImgLayer();
		}
	});

	$$('.img-box').each(function(el,index) {

		var Site 		  = { key: index };
		images[index]     = new Image();
		images[index].src = el.getElements('img')[0].get('src');

		timerId[index] = preLoadImg.periodical(500, Site);

		el.getParents('div')[0].getElements('.layer-link').addEvent('click', function(e) {
			e.stop();

			if (usedId !== false && usedId == index) {
				return false;
			}

			usedId = index;
			var imgLayer = initImgLayer();
			$('img-layer-body').set('html', $$('.img-layer-infos')[index].get('html'));
			BIG_IMAGE_URL = $('img-layer-body').getElements('img')[0].get('src').replace(/130x120/g, BIG_IMAGE_SIZE + "x" + BIG_IMAGE_SIZE);
			var newImg    = $('img-layer-body').getElements('img')[0].set('src',$('img-layer-body').getElements('img')[0].get('src').replace(/130x120/g, IMG_SIZE_LAYER_Y + "x" + IMG_SIZE_LAYER_X));
			newImg.set('title','');
			intBigImagePreview(newImg);
			$('img-layer-body').getElements('.tool-tip').set('id','tip-layer');
			$('img-layer-body').getElements('.show-shipping').set('title','layer');

			$('img-layer-body').getElements('.show-shipping').each(function(el,index) {
				shippingCosts(el);
			});

			newImg.setStyles({
				'margin-top' : newImg.getParent().getStyle('height').toInt()/2 - IMG_SIZE_LAYER_Y/2,
				'display'    : ''
			});

		});
	});
}

function getScrollXY() {
	var scrOfX = 0, scrOfY = 0;

	if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		//DOM compliant
		scrOfY = document.body.scrollTop;
		scrOfX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		//IE6 standards compliant mode
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}
	return [ scrOfX, scrOfY ];
}

var closeImgLayer = function() {
	$('img-layer').setStyles({
		'display' : 'none',
		'width'   : '0px',
		'height'  : '0px',
		'left'    : '0px',
		'top'     : '0px'
	});
	usedId = false;
	$('img-layer-body').set('html','');
	if ($$('.mt-preview-image-visible').length > 0) {
		$$('.mt-preview-image-visible')[0].destroy();
	}
}


var preLoadLayerImg = function() {

	if (this.img.complete !== true) {
		return '';
	}

	var newImg = new Element('img', {
		'src'   : this.img.src,
		'style' : 'display:none;',
		'id'    : 'bigImage'
	}).injectInside(this.container);

	var con = this.container;
	(function() {

		newImg = $('bigImage');
		newImg.erase('style');
		var size = new Array(newImg.getStyle('width').toInt(), newImg.getStyle('height').toInt());
		newImg.setStyles({
			'height' : '1px',
			'width'  : '1px'
		});

		if (size[1] > BIG_IMAGE_SIZE) {
	    	var percentRate = size[1]/100;
	    	percentRate     = parseInt(BIG_IMAGE_SIZE / percentRate);
	    	size[0] 		= parseInt(size[0])/100 * percentRate + 'px';
	    	size[1] 		= BIG_IMAGE_SIZE + 'px';
		}

    	if (size[0] > BIG_IMAGE_SIZE) {
	    	var percentRate = size[0]/100;
	    	percentRate     = parseInt(BIG_IMAGE_SIZE / percentRate);
	    	size[0] 		= BIG_IMAGE_SIZE + 'px';
	    	size[1] 		= parseInt(size[1])/100 * percentRate + 'px'
		}

		new Fx.Morph(con, {
			duration: 500,
			wait: false,
			onComplete: function() {
				con.removeClass('ajax-waiter');
				newImg.erase('style');
				newImg.setStyles({
					'height' : size[1],
					'width'  : size[0]
				});
			}}).start({
				'height' : 	size[1],
				'width'  :  size[0]
			});
	}).delay(500);
	$clear(layerTimerId);
	layerTimerId = false;

}
var intBigImagePreview = function(el) {

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

		if ($$('.mt-preview-image-visible').length > 0) {
			$$('.mt-preview-image-visible')[0].setStyles({
		        'position': 'absolute',
		        'top'     : (e.page.y + 15),
		        'left'    : (e.page.x + 35),
		        'z-index' : $('img-layer').getStyle('z-index')+1,
		        'display' : 'block'
	     	});
		} else {

			var div = new Element('div', {
				'class' : 'ajax-waiter'
			}).addClass('mt-preview-image-visible').setStyles({
		        'position': 'absolute',
		        'top'     : (e.page.y + 15),
		        'left'    : (e.page.x + 35),
		        'z-index' : $('img-layer').getStyle('z-index')+1,
		        'width'   : '180px',
		        'height'  : '220px',
		        'border'  : '1px solid #ff0000',
		        'background-color' : '#ffffff'
		    });

		    div.injectInside(document.body);

			var bigImage = new Image();
			bigImage.src = BIG_IMAGE_URL;

		    var Img = {
		    	img       : bigImage,
		    	container : div
		    }

		     layerTimerId = preLoadLayerImg.periodical(200, Img);

		     this.addEvent('mousemove', function(e) {
		        $$('.mt-preview-image-visible').each(function(el) {
		           el.setStyles({
		              'top': (e.page.y + 15),
		              'left': (e.page.x + 35)
		           });
		        });
		     });

		}
  	});

  el.addEvent('mouseleave', function(e) {
     this.removeEvent('mousemove', function() {});

     $$('.mt-preview-image-visible').each(function(el) {

     	if (layerTimerId !== false) {
	     	$clear(layerTimerId);
	     	el.destroy();
	     }
		var imgUrl = $$('#img-layer-body .img img')[0].get('src');
     	if ($defined(el) && $$('#img-layer-body .img img').length > 0 && BIG_IMAGE_URL.indexOf(imgUrl.substring(imgUrl.indexOf('path')+6,imgUrl.length)) != '-1') {
     		el.setStyle('display','none');
     	} else {
	        el.destroy();
     	}
     });
  });

}

var initImgLayer = function() {

	var Position     = getScrollXY();
	var LAYER_TOP    = parseInt(parseInt(window.getHeight()))/2 + parseInt(Position[1]) - LAYER_SIZE_Y/2  + 'px';
	var LAYER_LEFT   = parseInt(parseInt(window.getWidth()))/2  + parseInt(Position[0]) - LAYER_SIZE_X/2  + 'px';

	if ($$('.mt-preview-image-visible').length > 0) {
		$$('.mt-preview-image-visible')[0].destroy();
	}


	if ($defined($('img-layer'))) {
		return $('img-layer').setStyles({
			'display'  : 'block',
			'width'    : LAYER_SIZE_X + 'px',
			'height'   : LAYER_SIZE_Y + 'px',
			'z-index'  : 14000,
			'position' : 'absolute',
			'top'      : LAYER_TOP,
			'left'     : LAYER_LEFT
		});
	}

	var img_layer =  new Element('div',{
		'id' : 'img-layer'
	}).setStyles({
		'display'  : 'block',
		'width'    : LAYER_SIZE_X + 'px',
		'height'   : LAYER_SIZE_Y + 'px',
		'z-index'  : 14000,
		'position' : 'absolute',
		'top'      : LAYER_TOP,
		'left'     : LAYER_LEFT
	}).injectInside(document.body);

	var topBar = new Element('div',{
		'id'    : 'img-layer-topbar',
		'style' : 'cursor:pointer;'
	}).addEvent('click', function(e) {
		closeImgLayer();
	}).injectInside(img_layer);

	new Element('div',{
		'id' : 'img-layer-body'
	}).injectInside(img_layer);

	// new Drag.Move(img_layer);

	window.onresize = function() {
		var Position = getScrollXY();
		img_layer.morph({left: parseInt(parseInt(window.getWidth()))/2  + parseInt(Position[0]) - LAYER_SIZE_X/2  + 'px', top: parseInt(parseInt(window.getHeight()))/2 + parseInt(Position[1]) - LAYER_SIZE_Y/2  + 'px'});
	}
	window.onscroll = function () {
		var Position = getScrollXY();
		img_layer.morph({left: LAYER_LEFT, top: parseInt(parseInt(window.getHeight()))/2 + parseInt(Position[1]) - LAYER_SIZE_Y/2  + 'px'});
	}

	return img_layer;

}

var fireKnobSearch = function() {

	if (ajaxReq === true) {
		return;
	}

     $('knobUpdate').set('send', {

     	onRequest: function() {
     		ajaxReq = true;
     		$('add_box').setStyle('visibility','hidden');
     		initOverlay(document.body);
     		initWaiter(document.body);
     	},

     	onComplete: function(response) {

			[$('mt-waiter'),$('mt-overlay')].each(function(el,index) {
				el.setStyle('display','none');
			});

     		new Fx.Morph($('dynamic-content'), {
				duration: 500,
				wait: false,
				onComplete: function(){
					$('dynamic-content').set('html',response).fade(1);

					$$('.show-shipping').each(function(el, index) {
						shippingCosts(el);
					});
					initBigPicture($$('.boxLeft img'));
					ajaxReq = false;

     				$('add_box').setStyle('visibility','visible');
				}
			}).setOptions({
				transition: Fx.Transitions.linear
			}).start({
			    'opacity': 	0
			});
     	}
     });

     $('knobUpdate').send();
     return true;
}

var arrowGifAlt = function() {
	checker = 0;
	for (var i=0; i<this.length;i++) {
		if (this[i].getStyle('visibility') == 'hidden') {
			this[i].setStyle('visibility','visible');
			break;
		} else {
			checker++;
		}
	}

	if (checker == this.length) {
		this.each(function(el,index) {
			el.setStyle('visibility','hidden');
		});
	}


	if (arrowCloser != '') {
		arrowCloser++;
		if (arrowCloser > 5 && checker == this.length) {
			animateButton();
			$clear(animateArrowTime);
			animateArrowTime = false;
			arrowCloser = '';
		} else {
			animateArrowTime = arrowGifAlt.delay(200,this);
		}
	} else {
		animateArrowTime = arrowGifAlt.delay(200,this);
	}
};

var animateArrows = function() {
	 animateArrowTime = arrowGifAlt.delay(200,arrows);
};

var closeAnimateArrows = function() {
	arrowCloser = 1;
}

var	animateButton = function() {
	button = $('sortButton');
	var fx = new Fx.Morph(button, {
		duration: 100,
		wait: true,
		onComplete: function(){
			button.fade(1);
		}
	});
	fx.setOptions({
		transition: Fx.Transitions.linear
	});
	fx.start({
	    'opacity': 	0.2
	});

};