var psc = new Class({

	initialize: function(container, items){
		
		this.container = container;
		
		//this.addButton = container.getElement('button');
		
		this.items = items;
		
		this.correct = this.container.getElement('span.correct');
		
		this.correct.setStyle('visibility', 'hidden');

		
		this.items.each(function(item, index){
		
			item.addEvents({
			
				keypress:  function(e){
					if((!e.code == 8) && (e.code < 48) || (e.code > 57))
					{
						e.stop();
					}
				},
				
				keyup: function(e){
					if(item.getProperty('value').length > 3)
					{
						if(this.items[index + 1])
						{
							this.items[index + 1].focus();
						}
					
					}
					
					var length = 0;
					this.items.each(function(item){
						length += item.getProperty('value').length;
					});
					if(length == 16)
					{
						this.correct.setStyle('visibility', 'visible');
					}
					else
					{
						this.correct.setStyle('visibility', 'hidden');
					}
		
				}.bind(this)
				
				
			});
		}.bind(this));
		
		this.items[0].focus();
		
	}
	
});


var mouseOver = function (object, mo_extension){
	object.addEvent('onFocus', function(){
		this.blur();
	});
	var image = object.getElement('img');
	var src = image.getProperty('src');
	var extension = src.substring(src.lastIndexOf('.'),src.length); 
	var preloadimage = new Element('img', { 'src' : src.replace(extension,mo_extension + extension) });
	object.addEvent('mouseenter', function(){
		image.set('src',src.replace(extension,mo_extension + extension));
	});
	
	object.addEvent('mouseleave', function(){
		image.set('src',src);
	});
}

var initSlideInfoBox = function(object, slideBox){
	var infoBoxVerticalSlide = new Fx.Slide(slideBox, {
		duration: 'long',
		transition: 'quint:out'
	});
	var slideIcon = object.getElement('img');
	var src = slideIcon.getProperty('src');
	var file = src.substring(src.lastIndexOf('/'),src.length);
	infoBoxVerticalSlide.hide();
	object.addEvent('click', function(){
		if(infoBoxVerticalSlide.open){
			slideIcon.set('src',src);
		}else{
			slideIcon.set('src',src.replace(file,'/minus.gif' ));
		}
		infoBoxVerticalSlide.toggle();
	});
}

var createChain = function(object, image, image_gallery){
	var fakeDiv = $('mt_image_container');
	var myDiv = $('bigpic_container');
	var morph = new Fx.Morph('bigpic_container', {link: 'chain'}, {duration: 2000, transition: Fx.Transitions.Sine.easeOut});
	var morphBorder = new Fx.Morph('bigpic_box', {link: 'chain'}, {duration: 2000, transition: Fx.Transitions.Sine.easeOut});
	object.addEvent('click', function(){
		image_gallery.getElements('div').removeClass('active');
		object.getParent().addClass('active');
		myDiv.getParent().setStyle('background', 'url(images/loading.gif) center center no-repeat');
		morph.start({'opacity': 0}).chain(function(){
			var myImage = new Asset.images(image, {
				onProgress: function() {
				},
				onComplete: function(){
					myDiv.getParent().setStyle('background', '#fff');
					myDiv.empty();
					myImage.inject(fakeDiv);
					var imageSize = fakeDiv.getElement('img').getSize();
					fakeDiv.empty();
					morphBorder.start({'height': imageSize.y, 'width' : imageSize.x }).chain(function(){
						myDiv.setStyle('background', 'url(' + myImage.getProperty('src') + ') center center no-repeat');
						morph.start({'opacity': 1});
					});
				}
			});
		});
	});
}

var createItemOptions = function(object){
	var deleteCheckBox = object.getElement('.deletebox').getElement('input');
	var qtyBox = deleteCheckBox.getNext('input');
	var qtyNumbers = object.getElement('.quantity');
	var slideDiv = object.getElement('.options');
	var container = object.getElement('.options_container');
	var shoppingForm = $('shopping_cart').getElement('form');
	
	var myHorizontalSlide = new Fx.Slide(slideDiv, {
		mode : 'horizontal',
		duration: 'short',
		transition: 'quint:out'
	});
	object.getElement('.options_container').setStyle('display','block');
	myHorizontalSlide.hide();
	
	var deleteButton = object.getElement('ul[class=entfernen]').getElement('li');
	
	deleteButton.addEvent('click', function(){
		deleteCheckBox.setProperty('checked', 'true');
		shoppingForm.submit();
	});
	
	if(qtyBox.value > 3){
		qtyNumbers.getLast('li').getElement('span').innerHTML = qtyBox.value;
	}
	
	if(qtyBox.value > 1){
		var priceCalc = new Element('div', {'class': 'pricecalc'});
		priceCalc.innerHTML = qtyBox.value + 'x ' + slideDiv.getElement('h2').innerHTML;
		priceCalc.inject(object.getElement('h2'), 'after');
	}else{
		if(object.getElement('div[class=pricecalc]')){
			object.getElement('div[class=pricecalc]').destroy();
		}
	}
	
	$$(qtyNumbers.getElements('li')).each(function(el){
		if(qtyBox.value == el.getElement('span').innerHTML){
			el.addClass('current');
		}else{
			el.addEvent('click', function(){
				qtyBox.value = el.getElement('span').innerHTML;
				shoppingForm.submit();
			});
		}
	});
	
	object.addEvent('mouseenter', function(){
		if(($('shopping_cart').getCoordinates().left + $('shopping_cart').getCoordinates().width) < (object.getPosition().x +360) ){
			if(container.hasClass('optionsright')){
				container.RemoveClass('optionsright');
			}	
			container.addClass('optionsleft');
			//object.getElement('.options_container').setStyle('left','');
			object.setStyle('z-index', '900');
			$$($('shopping_cart').getElements('div[class=item]')).each(function(el){
				if((el.getStyle('z-index') == 800)&&(object.getPosition().x < el.getPosition().x)){
					object.setStyle('z-index', '700');
				}
			});
		}else{
			if(container.hasClass('optionsleft')){
				container.RemoveClass('optionsleft');
			}	
			container.addClass('optionsright');
			object.setStyle('z-index', '900');
			$$($('shopping_cart').getElements('div[class=item]')).each(function(el){
				if((el.getStyle('z-index') == 800)&&(object.getPosition().x > el.getPosition().x)){
					object.setStyle('z-index', '700');
				}
			});
		}
		
		myHorizontalSlide.cancel();
		myHorizontalSlide.slideIn().chain(function(){
			object.setStyle('z-index', '1000');
		});
	});
	object.addEvent('mouseleave', function(){
		object.setStyle('z-index', '800');
		myHorizontalSlide.cancel();
		myHorizontalSlide.slideOut().chain(function(){
			object.setStyle('z-index', '100');
		});
	});
}

var sendScreenSize = new Request({

		url: 'screensize.php',
			
		method: 'get'
	});

window.addEvent('resize', function() {
	var mainmenu = $('mainmenu');

	if(Browser.Engine.trident){
		$$(mainmenu.getElements('div[class=dropdown_container]')).each(function(dropdown_background) {
			
			dropdown_background.setStyle('width', window.getWidth());
		});
	}
	
	var NumberOfArticlesPerRow = 'width=' + Math.floor((window.getWidth() * 0.9)/200);
	sendScreenSize.send(NumberOfArticlesPerRow);
});

window.addEvent('domready', function() {
	var mainmenu = $('mainmenu');

	if(Browser.Engine.trident){
		$$(mainmenu.getElements('div[class=dropdown_container]')).each(function(dropdown_background) {
			
			dropdown_background.setStyle('width', window.getWidth());
		});
	}
	
	
	$$(mainmenu.getElements('li[class=menu]')).each(function(menuentry) {
		var image = menuentry.getElement('img');
		var src = image.getProperty('src');
		var extension = src.substring(src.lastIndexOf('.'),src.length); 

	// Preload the image
		var preloadimage = new Element('img', { 'src' : src.replace(extension,'_active' + extension) });
		
		if(menuentry.getElement('.dropdown')){
			var DropDownElement = menuentry.getElement('.dropdown');
			
			if(!Browser.Engine.trident){
				var myVerticalSlide = new Fx.Slide(DropDownElement, {
					duration: 'long',
					transition: 'quint:out'
				});
				myVerticalSlide.hide();
				DropDownElement.setStyle('display', 'block');
			}
			
			//var DropDownElement = $('new_products');
			
			menuentry.addEvent('mouseenter', function() {
				image.set('src',src.replace(extension,'_active' + extension));
				if(Browser.Engine.trident){
					DropDownElement.setStyle('display', 'block');
					//myVerticalSlide.show();
				}else{
					myVerticalSlide.cancel();
					myVerticalSlide.slideIn();	
				}		
			});
			menuentry.addEvent('mouseleave', function() {
				image.set('src',src);
				if(Browser.Engine.trident){
					//myVerticalSlide.hide();
					DropDownElement.setStyle('display', 'none');
				}else{
					myVerticalSlide.cancel();
					myVerticalSlide.slideOut();
				}
			});
		}else{
			menuentry.addEvent('mouseenter', function() { image.set('src',src.replace(extension,'_active' + extension)); });
			menuentry.addEvent('mouseleave', function() { image.set('src',src); }); 
		}
	});
	/*
	if($('payment_block')){
		$$($('payment_block').getElements('span')).each(function(object){
			if(object.hasClass('clickable')){
				initSlideInfoBox(object, object.getParent('table').getNext('table'));
			}
		});
	}*/
	
	if($('navbar_next')){
		mouseOver($('navbar_next'), '_active');
	}
	
	if($('navbar_prev')){
		mouseOver($('navbar_prev'), '_active');
	}
	
	if($('image_gallery')){
		$$($('image_gallery').getElements('div[class=image_container]')).each(function(thumbnail) {
			var image = thumbnail.getElement('a').getProperty('href');
			thumbnail.getElement('a').removeProperty('href');
			createChain(thumbnail, image, $('image_gallery'));
		});
		$('image_gallery').getElement('div[class=image_container]').fireEvent('click');
	}
	
	if($('shopping_cart')){
		$$($('shopping_cart').getElements('div[class=item]')).each(function(item) {
			createItemOptions(item);
		});
	}
	var NumberOfArticlesPerRow = 'width=' + Math.floor((window.getWidth() * 0.9)/200);
	sendScreenSize.send(NumberOfArticlesPerRow);
	
	if($('psc'))
	{
		var pscs = Array(),
			addButton = $('pscAdd'),
			index = 1,
			copy = $('psc').getFirst('fieldset').clone();
			
		$('psc').getElements('fieldset').each(function(item){
			
			pscs.push(new psc(item, item.getElements('input')));
			index++;
		});
		
		addButton.addEvent('click', function(e){
						
			e.stop();
			
			var injectCopy = copy.clone().inject($('psc'));
			
			injectCopy.getElements('input').each(function(item){
				item.set('name', 'psc['+index+'][]' );
			});
			index++;
			pscs.push(new psc(injectCopy, injectCopy.getElements('input')));
			
		});
		
		
	}
	
});