document.observe("dom:loaded", function() {
	
	initProductOverlay();
	/**
	 * 	Cufon
	 */
	// Buttons
	/*
	addClasses( $$('a.button', 'span.button', 'button.button span'), 'button-replaced' );
	Cufon.replace( $$('a.button', 'span.button', 'button.button span'), { forceHitArea:true } );
	*/
	// Headlines
	/*
	addClasses( $$('#content h2, #content h3'), 'replaced' );
	Cufon.replace($$('#content h2, #content h3'), { hover:true });
	*/
	// Fehlermeldungen
	/*
	addClasses( $$('ul.messages li ul'), 'replaced' );
	Cufon.replace($$('ul.messages li ul'));
	*/
	// Main-Navi und Währungsauswahl
	/*
	addClasses( $$('#navi ul, #currency ul'), 'replaced' );
	addClasses( $$('#navi a, #currency a, #currency span.active'), 'replaced' );
	Cufon.replace($$('#navi a, #currency a, #currency span.active'), { hover:true });
	*/
	// Kategorie-Navi und User-Dashboard
	/*
	Cufon.replace($$('#categories > li > a, #categories > li > span.current'));
	Cufon.replace($$('#categories > li > ul> li > a'));
	*/
	addClasses( $$('#categories > li > a, #categories > li > span.current'), 'bigcat' );
	addClasses( $$('#categories > li > ul> li > a'), 'smallcat' );
	// Preise
	//Cufon.replace($$('.price-box span, .cart-price span, td.price span'), { separate:'none' });
	// Sonstiges
	//Cufon.replace($$('.replace'));

	/**
	 * Praktische Body-Klasse als JS-Weiche
	 */
	var body = $$('body');
	$( body[0] ).removeClassName('nojs');

	/**
	 * E-Mails
	 */
	var links = $$('span.mail');
	links.each(function(el) {
		var mail = el.innerHTML.split('[AT]').join('@').split('[PUNKT]').join('.');
		el.update('<a href="mailto:'+ mail +'">'+ mail +'</a>');
	});

	/**
	 * Tooltips
	 */
	$$('a.tips').findAll( function(node) {
		return node.getAttribute('title');
	}).each( function(node){
		new Tooltip(node,node.title);
		node.removeAttribute("title");
	});

	/**
	 * Klappfunktion für Headerboxen
	 */
	var boxes = $$('#topbox .headbox');
	boxes.each( function(box) {
		box.addClassName('slidebox');
		//
		var id = box.identify();
		if(id == 'loginbox'){
			var slidelinkText = ['Schnellanmeldung öffnen', 'Schnellanmeldung schließen'];
		} else if(id == 'cartbox'){
			var slidelinkText = ['Warenkorb öffnen', 'Warenkorb schließen'];
		} else if(id == 'logoutbox'){
			var slidelinkText = ['Aktionen', 'Aktionen schließen'];
		} else {
			var slidelinkText = ['Ausklappen', 'Einklappen'];
		}
		// Initialer Linktext
		var slidelink = new Element( 'div', {
		}).update(slidelinkText[0]);
		slidelink.addClassName('slidelink');
//		box.down('.slidecontainer').insert({ before: slidelink });
		// Initiales Sliding (Hide);
//		box.down('.slide').hide();
		// Event Click
//		box.observe('click', function(event) {
//			var el = box.down('.slide');
//			if( !Element.visible( el ) ) {
//				slidelink.addClassName('open');
//				Effect.BlindDown(el, { duration: 0.2 } );
//				slidelink.update(slidelinkText[1]);
//			} else {
//				slidelink.removeClassName('open');
//				Effect.BlindUp(el, { duration: 0.2 } );
//				slidelink.update(slidelinkText[0]);
//			}
//		});
	});
	
	/**
	 * Labels fürs Login
	 */
	var inputs =  $$('#minilogin-mail, #minilogin-pass');
	inputs.each( function(el) {
		var val = el.getValue();
		el.observe('focus', function(event) {
			if( el.getValue() == val ) {
				el.setValue('');
			}
		});
		el.observe('blur', function(event) {
			if( el.getValue() == '' ) {
				el.setValue(val);
			}
		});
	});

		//image.remove();


	
	
	/**
	 * Höhen-Resizing für Boxen
	 */
	var rows = $$('.rowwrapper');
	rows.each( function(row) {
		var maxheight = 0;
		var boxwrapper = row.childElements('div');
		boxwrapper.each( function(wrapper) {
			if( wrapper.hasClassName('boxwrapper' ) ) {
				var internalmaxheight = 0;
				var boxes = wrapper.select('.boxcontainer .box');
				boxes.each( function(box) {
					var size = box.getHeight() - 3;
					if( internalmaxheight < size ) {
						internalmaxheight = size - box.getStyle('padding-bottom').toInt() * 2;
					}
				});
				boxes.each( function(box) {
					var layer  = box.down();
					var myheight = internalmaxheight;
					if( layer.hasClassName('calloutbox') ) {
						myheight = internalmaxheight + 11;
					}
					if( layer.identify() == 'countdown' ) {
						//myheight = internalmaxheight - 47;
						myheight = internalmaxheight - 11;
					}
					box.setStyle({ height: myheight + 5 + 'px' });
				});
				var boxcount = boxes.length;
				var combinedinternalmaxheight = internalmaxheight * boxcount;
				if( boxcount > 1 ) {
					combinedinternalmaxheight = combinedinternalmaxheight * (boxcount-1);
				}
				if(maxheight < combinedinternalmaxheight){
					maxheight = combinedinternalmaxheight;
				}
			} else {
				// Bei Boxcontainer direkt die Höhe der Box nehmen
				var box = wrapper.down('div.box');
                               
                                if(box!=undefined) var size = box.getHeight();
                               
				if( maxheight < size ) {
					maxheight = size;
				}
			}
		});
		// Boxhöhe anwenden. Alle Boxen, die nicht in einem Boxwrapper stecken, müssen die neue Höhe kriegen
                if(maxheight>0){
                    var targetboxes = row.childElements('div.boxcontainer');
                    targetboxes.each( function(target) {
                            if( !target.hasClassName('boxwrapper') ) {
                                    var el = target.down();
                                        var elheight = maxheight - el.getStyle('padding-top').toInt() - el.getStyle('padding-bottom').toInt() * 2;
                                        elheight = elheight +9;
                                        el.setStyle({ height: elheight + 'px' });
                            }
                    });
                }
	});

});
	


String.prototype.toInt = function() {
	if( this != null && this.length > 0 ) {
		var a = new Array();
		for (var i = 0; i < this.length; i++) {
			if( this.charAt(i) != 'p' && this.charAt(i) != 'x' ) {
				a[i] = this.charAt(i);
			}
		}
		if( a.length > 0 ) {
			return a.join('');
		} else {
			return 0;
		}
	} else {
		return 0;
	}
}
/**
 * 	Helper Functions
 */
function addClasses( elements, className ) {
	for(var c=0; c < elements.length; c++) {
		var e = $(elements[c]);
		e.addClassName( className );
	}
}

function makeOuterContainer( image ) {
	var outerContainer = new Element( 'div', {
	});
	outerContainer.addClassName('imageRollover-outerContainer');
	outerContainer.setStyle({
		width: image.getWidth() + 'px',
		height: image.getHeight() + 'px',
		position: image.getStyle('position'),
		top: image.getStyle('top'),
		left: image.getStyle('left'),
		bottom: image.getStyle('bottom'),
		right: image.getStyle('right'),
		cssFloat: image.getStyle('cssFloat'),
		zIndex: image.getStyle('zIndex'),
		background: '#FFF url(' + image.readAttribute('src') +') center center no-repeat'
	});
	return outerContainer;
}

function makeInnerContainer() {
	var innerContainer = new Element( 'div', {
	});
	innerContainer.addClassName('imageRollover-innerContainer');
	innerContainer.setStyle({
		position: 'relative',
		height: '100%',
		width: '100%'
	});
	return innerContainer;
}

function makeOverlay() {
	var overlay = new Element( 'div', {
	});
	overlay.addClassName('imageRollover-overlay');
	overlay.setStyle({
		position: 'absolute',
		top: 0,
		left: 0,
		height: '100%',
		width: '100%',
		zIndex: 100,
		opacity: 0.000001 
	});
	return overlay;
}

function makeContentContainer( prod_content, thumb ) {
	var content = new Element( 'div', {
	});
	content.addClassName('imageRollover-contentContainer');
	content.setStyle({
		position: 'absolute',
		top: 0,
		left: 0,
		height: '100%',
		width: '100%',
		zIndex: 300,
		opacity: 0.000001
	});
	content = addContent( content, thumb );
	content = addContent( content, prod_content );
	return content;
}

function addContent( content, prod_content ) {
	content.insert(prod_content);
	return content;
}

function initProductOverlay(postInit){

		if(postInit==true){
			var productBoxes = $$('.category-products.new .product-box .box');
		}else{
			var productBoxes = $$('.category-products .product-box .box');
		}
	/**
	 * Produktbilder-Rollover
	 */
	productBoxes.each( function(el) {
		var image = el.down('img.product-image');
		var content = el.down('div.product-specs');
		content.setStyle({ cursor: 'pointer' });
		var headline = el.down('h3 a');
		//
		content.observe('click', function(event) {
			window.location = headline.readAttribute('href');
		});
		//
		var contenthead = new Element( 'h4', {
		}).update( '<a href="' + headline.readAttribute('href') +'">' + headline.innerHTML + '</a>' );
		content.insert({ top: contenthead });
		//
		var link = new Element( 'a', {
			href: headline.readAttribute('href')
		});
		//
		var thumb = new Element( 'img', {
			src: image.readAttribute('src')
		});
		thumb.addClassName('thumbnail');
		link.insert(content);
		link.insert(thumb);
		// 
		var outerContainer = makeOuterContainer(image);
		var innerContainer = makeInnerContainer();
		var contentContainer = makeContentContainer(content,link);
		var overlay = makeOverlay();
		//
		contentContainer.observe( 'mouseenter', function() {
			new Effect.Opacity(overlay, { 
				duration: 0.4,
				transition: Effect.Transitions.linear,
				from: 0, 
				to: 0.9
			});
			new Effect.Opacity(contentContainer, { 
				duration: 0.4,
				transition: Effect.Transitions.linear,
				from: 0, 
				to: 1
			});
		});
		contentContainer.observe( 'mouseleave', function() {
			new Effect.Opacity(overlay, { 
				duration: 0.4,
				transition: Effect.Transitions.linear,
				from: 0.9, 
				to: 0
			});
			new Effect.Opacity(contentContainer, { 
				duration: 0.4,
				transition: Effect.Transitions.linear,
				from: 1, 
				to: 0
			});
		});
		//
		outerContainer.insert(innerContainer);
		innerContainer.insert(overlay);
		innerContainer.insert(contentContainer);
		el.insert(outerContainer);
		});
}