var dragging = false;
var ieNaviOpen = false;
function initNaviForIE(){
	var sel = $('navigation').down('select');
	if(sel){
		sel.onfocus = function(){
			ieNaviOpen = true;
		};
		sel.onblur = function(e){
			ieNaviOpen = false;				
		};
	}
	$('navigation').select('li.level1').each(function(el){
		if(el.down('ul')){
			el.onmouseover = function(){
				this.addClassName('open');
			};
			el.onmouseout = function(){
				if(!ieNaviOpen){
					this.removeClassName('open');
				}
			};
		}
	});
}
function initProductImage(){
	var imageContainer			= $('product-image');
	var a						=  imageContainer.down('a');
	if(a){
		var img					= a.down('img');
		var imageObj			= {
			bigImage			: new Image(),
			bigSource			: '',
			smallImage			: img,
			smallImageSize		: [img.getWidth(), img.getHeight()],
			smallSource			: '',
			zoomed				: false,
			parent				: imageContainer
		}
		
		
		imageContainer.setStyle({height: img.getHeight()+'px'});
		
		imageObj.bigSource			= a.href;
		imageObj.smallImage.src		= img.src;
		imageObj.smallSource		= img.src;
		
		img.onclick					= zoomProduct.bind(imageObj);
		
		imageObj.bigImage.onload	= function(){
//			alert('ja');
			percentage = (this.bigImage.width / this.smallImage.width) * 100;
			if(percentage < 110){
				this.smallImage.onclick = function(){return false;}
				this.smallImage.setStyle({cursor: 'default'});
				return false;
			}
		}.bind(imageObj);
		
		imageObj.bigImage.src		= a.href;
		
		a.onclick				= function(){
			return false;
		}
	}
}

function zoomProduct(){
	if(dragging){
		return;
	}
	if(this.zoomed){
		/*auszoomen*/
		this.drag.destroy();
		this.smallImage.morph('height: '+this.smallImageSize[1]+'px; width: '+this.smallImageSize[0]+'px; top: 0px; left: 0px;', {duration: 0.4, afterFinish: function(){
			this.smallImage.removeClassName('zoomed');
			this.parent.setStyle({position: 'static'});
			this.smallImage.setStyle({position: 'static'});
			this.smallImage.src = this.smallSource;
			this.zoomed = false;
		}.bind(this)});
	} else{
		/*einzoomen*/
		if(this.bigImage.complete){
			percentage = (this.bigImage.width / this.smallImage.width) * 100;
			if(percentage > 100){
				this.parent.setStyle({position: 'relative', height: (this.parent.getHeight() - 12)+'px', width: (this.parent.getWidth() - 12)+'px'});
				this.smallImage.setStyle({position: 'relative'});
				this.smallImage.parent = this.parent;
				new Effect.Scale(this.smallImage, percentage, {duration: 0.4, scaleFromCenter: true, afterFinish: function(){
					this.smallImage.src = this.bigImage.src;
					this.zoomed = true;
					this.smallImage.addClassName('zoomed');
					this.drag = new Draggable(this.smallImage,{
						onDrag: function(){
							dragging = true;
						},
						onEnd: function(){
							window.setTimeout("dragging = false", 500);
						},
						starteffect: '',
						endeffect : '',
						snap: contain.bind(this)
					});
				}.bind(this)});
			}
		} else{
			window.setTimeout(zoomProduct.bind(this), 1000);
		}
	}
}
function contain (x,y,draggable) {
	var dim = Element.getDimensions(draggable.element);

//	alert(parseInt(draggable.element.parent.getStyle('borderWidth')));
	var xMin = 0, xMax = (draggable.element.parent.getWidth() < dim.width) ? (draggable.element.parent.getWidth() - parseInt(draggable.element.parent.getStyle('paddingLeft')) - parseInt(draggable.element.parent.getStyle('paddingRight')) - 2) - dim.width : 0;
	var yMin = 0, yMax = (draggable.element.parent.getHeight() - parseInt(draggable.element.parent.getStyle('paddingTop')) - parseInt(draggable.element.parent.getStyle('paddingBottom')) - 2) - dim.height;
	
	x = x > xMin ? xMin : x;
	x = x < xMax ? xMax : x;
	y = y > yMin ? yMin : y;
	y = y < yMax ? yMax : y;
	
	return [x,y];
}

/*sets*/
function initSets(componentsDiv){
	componentsDiv.select('h3.component').each(function(el){
		el.child	= el.next('div.component-section');
		el.child.setStyle({display: 'none'});
		el.onclick	= function(){
			Effect.toggle(this.child, 'blind', { duration: 0.6 });
		}
		el.addClassName('component-js');
		el.child.addClassName('component-section-js');
	});
}

/*comparison*/
function setupComparison(){
	var p	= $$('p.product-comparison');
	if(p && p.length){
		comparisonDiv = new Element('div',{'id': 'comparison-layer'});
		$$('body')[0].appendChild(comparisonDiv);
		comparisonDiv.setStyle({display: 'none'});
		p.each(function(el){
			a = el.down('a');
			a.onclick = function(){
				var params = {
					url: this.href,
					method: 'get',
					adParams: '',
					type: 667,
					extract: '',
					extractById: 'comparison-chart',
					container:	comparisonDiv,
					callback: comparison
				}
				$('ZoomSpin').setStyle({
					left: 		'50%',
					top:		(document.viewport.getScrollOffsets()[1] + document.viewport.getHeight() / 2)+'px',
					visibility:	'visible'
				});
				alAjaxRequest(params);
				return false;
			};
		});
	}
}
function comparison(params){
	params.container.update(params.res.result);
	params.container.setOpacity(0);
	params.container.setStyle({display: 'block', height: $('page').getHeight()+'px'});
	var h1		= params.container.down('h1').remove();
	var close	= new Element('a',{'href': '#', 'id': 'close-comparison'}).update(h1.innerHTML+' schließen');
	var p		= $('comparison-print').remove();
	var print	= new Element('a',{'href': p.down('a').href, 'id': 'print-comparison', target: '_blank'}).update(p.down('a').innerHTML);
	close.onclick = function(){
		new Effect.Opacity(this.container, {
			from: 1,
			to: 0,
			duration: 0.8,
			afterFinish: function(){
				this.container.setStyle({display: 'none'});
			}.bind(this)
		});
		return false;
	}.bind(params);
	params.container.appendChild(close);
	params.container.appendChild(print);
	
	params.container.select('th.comparison-value').each(function(el){
		el.setStyle({width: '210px'});
		var a = new Element('a',{'href': '#', 'class': 'close-col'}).update('X');
		a.onclick = toggleComparisonCol.bind(el);
		el.down('div').insert({before: a});
	});
	
	//window.location.href = window.location.href+'#close-comparison';
	//close.scrollTo();
	new Effect.ScrollTo(close, {
		duration: 0.3,
		afterFinish: function(){
			/*centering comparison table*/
			var table = $('comparison');
			if(table.getWidth() < document.viewport.getWidth()){
				$('comparison-chart').setStyle({
					position:	'absolute',
					left:		((document.viewport.getWidth() / 2) - (table.getWidth() / 2))+'px',
					width:		table.getWidth()+'px'
				});
				close.setStyle({
					left:		((document.viewport.getWidth() / 2) - (table.getWidth() / 2))+'px'
				});
				print.setStyle({
					left:		((document.viewport.getWidth() / 2) - (table.getWidth() / 2) + close.getWidth() + 10)+'px'
				});
			}
			
			if(table.getHeight() < document.viewport.getHeight()){
				$('comparison-chart').setStyle({
					top:		((document.viewport.getHeight() / 2) - (table.getHeight() / 2) - 1)+'px',
					height:		table.getHeight()+'px'
				});
				close.setStyle({
					top:		((document.viewport.getHeight() / 2) - (table.getHeight() / 2) - close.getHeight())+'px'
				});
				print.setStyle({
					top:		((document.viewport.getHeight() / 2) - (table.getHeight() / 2) - close.getHeight())+'px'
				});
			}else{
				$('comparison-chart').setStyle({
					top:		(close.getHeight() + 10)+'px',
					height:		table.getHeight()+'px'
				});
				close.setStyle({
					top:		'10px'
				});
				print.setStyle({
					top:		'10px'
				});
			}
			
			new Effect.Opacity(params.container, {
				from: 0,
				to: 1,
				duration: 0.8
			});
		}
	});
	$('ZoomSpin').setStyle({
		left: 		'0',
		top:		'0',
		visibility:	'hidden'
	});
}
function toggleComparisonCol(){
	if(this.toggled){
		$$('.'+this.id).each(function(td){
			td.down('div').setStyle({display: 'block'});
			td.setStyle({width: '200px', whiteSpace: 'normal', overflow: 'visible'});
		});
		this.toggled = false;
	} else{
		this.toggled = true;
		$$('.'+this.id).each(function(td){
			td.down('div').setStyle({display: 'none'});
			td.setStyle({width: '20px', whiteSpace: 'nowrap', overflow: 'hidden'});
		});
	}
	return false;
}
function setUpArtists(){
	var container		= $('product-artists');
	if(container){
		var artistChanger = {
			artists		: [],
			current		: 0,
			container	: container
		};
		
		/*get all artists*/
		container.select('li.artist').each(function(el){
			var info	= {
				a		: el.down('a'),
				link	: el.down('a').href,
				img		: el.down('a').down('img'),
				caption	: el.down('a').down('span.name')
				
			}
			artistChanger.artists.push(info);
		});
		
		/*set up new container*/
		artistChanger.container.id	= 'product-artists-js';
		container.down('ul').remove();
		artistChanger.img1			= new Element('img');
		artistChanger.img1.onclick	= function(){
			window.location			= this.artists[this.current].link;
		}.bind(artistChanger);
		
		artistChanger.caption1		= new Element('span');
		artistChanger.div1			= new Element('div').update(artistChanger.img1);
		artistChanger.div1.appendChild(artistChanger.caption1);
		
		artistChanger.img2			= new Element('img');
		artistChanger.caption2		= new Element('span');
		artistChanger.div2			= new Element('div').update(artistChanger.img2);
		artistChanger.div2.appendChild(artistChanger.caption2);
		
		/*set the first content*/
		artistChanger.img1.src		= artistChanger.artists[0].img.src;
		artistChanger.caption1.update(artistChanger.artists[0].caption.innerHTML);
		
		artistChanger.div2.hide();
		
		container.appendChild(artistChanger.div1);
		container.appendChild(artistChanger.div2);
		
		window.setTimeout(changeArtistImage.bind(artistChanger), 10000);
	}
}
function changeArtistImage(){
	if(this.current == this.artists.length - 1){
		this.current = 0;
	} else{
		this.current++; 
	}
	
	this.img2.src		= this.artists[this.current].img.src;
	this.caption2.update(this.artists[this.current].caption.innerHTML);
	
	this.div2.setOpacity(0);
	this.div2.show();
	
	new Effect.Opacity(this.div2, {
		duration: 1,
		afterFinish: function(){
			this.img1.src = this.img2.src;
			this.caption1.update(this.caption2.innerHTML);
			this.div2.hide();
			window.setTimeout(changeArtistImage.bind(this), 10000)
		}.bind(this)
	});
}

function setupTama(){
	var ts = $$('div.tama-special');
	if(ts && ts.length){
		ts.each(function(el){
			el.select('h4.ts-head').each(function(h4){
//				alert(h4.next().className);
				h4.div = h4.next();
				h4.div.hide();
				h4.onclick = function(){
					Effect.toggle(this.div, 'blind', {duration: 1});
				}
			});
		});
	}
}

function initVideolist(videoList){
	var videos				= [];
	var act					= 0;
	var videoListing		= new Element('ul');
	videoListing.addClassName('videolist-js-listing');
	videoList.select('dl.csc-textpic-image').each(function(el, index){
		if(index > 0){
			el.hide();
		}
		videos.push(el);
		if(el.down('dd') && el.down('dd').innerHTML.length){
			var li			= new Element('li').update(el.down('dd').innerHTML);
			li.parent		= index;
			li.onclick		= function(){
				if(act != this.parent){
					videos[act].hide();
					videos[this.parent].show();
					act		= this.parent;
				}
			};
			videoListing.appendChild(li);
		}
	});
	videoList.insert({after: videoListing});
}

function initRaffle(){
	var newCheckbox = new Element('input', {'id': 'powermailcheckbox-notused', 'type': 'checkbox', 'style': 'margin-right: 7px;border:none;'});
	$('powermaildiv_uid11').down('label').insert({before: newCheckbox});
	
	$('uid11').onfocus = function(){
		$('powermailcheckbox-notused').checked = true;
	}
	var checkBlogs = $('check_uid10_3');
	for(var i = 4; i < 16; ++i){
		var box = $('check_uid10_' + i);
		box.parent = checkBlogs;
		box.onfocus = function(){
			this.parent.checked = true;
		}
	}
	
	var checkMags = $('check_uid10_16');
	for(var i = 17; i < 35; ++i){
		var box = $('check_uid10_' + i);
		box.parent = checkMags;
		box.onfocus = function(){
			this.parent.checked = true;
		}
	}
}

document.observe('dom:loaded', function(){
	/*if(Prototype.Browser.IE){
		initNaviForIE();
	}*/
	
	setupZoom();
	if($('product-image')){
		initProductImage();
	}
	if($('product-components')){
		initSets($('product-components'));
	}
	setupComparison();
	setUpArtists();
	setupTama();
	
	if($('raffle')){
		initRaffle();
	}
});