var cardSmallWidth = 225, cardSmallHeight = 180;
var cardMediumWidth = 248, cardMediumHeight = 198;
var reflectionHeight = 57;
var largePanelTop = 80, largePanelLeft = 60;

var clearGif = 'Weihnachtswelt09/images/clear.gif';
var baseTitle = 'FLEUROP - Weihnachtswelt';
var windowTitle = baseTitle;

var slideshows = {};

var slideImg0 = {
	0: [
		'WeihnachtsWelt09/images/trends_01.jpg',
		'WeihnachtsWelt09/images/trends_02.jpg',		
		'WeihnachtsWelt09/images/trends_03.jpg',		
		'WeihnachtsWelt09/images/trends_04.jpg',		
		'WeihnachtsWelt09/images/trends_05.jpg',		
		'WeihnachtsWelt09/images/trends_06.jpg'
	]
};

var slideImg3 = {
	0: [
		'WeihnachtsWelt09/images/verpackung_01.jpg',
		'WeihnachtsWelt09/images/verpackung_02.jpg',		
		'WeihnachtsWelt09/images/verpackung_03.jpg',		
		'WeihnachtsWelt09/images/verpackung_04.jpg',		
		'WeihnachtsWelt09/images/verpackung_05.jpg',		
		'WeihnachtsWelt09/images/verpackung_06.jpg'
	]
};


var swfs = [];
var durl = document.URL;
var activeCard = false;
var activeCardNum = false;
var startWithLargePanel = (durl.indexOf("panel=") > 0) ? true : false;
var startWithLargePanelId = startWithLargePanel ? durl.substr(durl.indexOf("panel=")+6,1) : false;
var animatePopin = (startWithLargePanel) ? false : true;
var scrollbox = {};
var h; //HistoryManager

var fxDuration = 200;
var fxCardL0; //effect for large panel
var fxPanelList;

var soundIsPlaying = false;

window.addEvent('domready', function() {
    slideshows[0] = new TinySlideshow(slideImg0[0], $('emo0'));
	slideshows[3] = new TinySlideshow(slideImg3[0], $('emo3'));		
	
	h = new HistoryManager();
	h.addEvent('onHistoryChange', historyNavigate);
	
	var imgCount = 1; //keep track of image count
	//showProgress is called each time a image finished loading.
	var showProgress = function(){
	  $('loading').set('html', imgCount++ + ' image(s) loaded...');
	};

	//var img = new Array(); //initialize image array needed in finishedLoading
	//finishedLoading is called when all images are finished loading.
	var finishedLoading = function(){
		$('loading').set('html', 'done! ' + imgCount + ' image(s) loaded!');
		$('loadingbar').style.display='none';
		startTheShow();
		
		/* preload additional images for later use in panel contents */
		var images = [];
		var reBackground = new RegExp('[^\(\)"\']+\\\.[^\(\)"\']+', 'i');
		/*preloading for slideshow-images - optional*/
		//$each(slideImg, function(a){ images.combine(a) });
		var img2 = new Asset.images(images);
	};
	
	/* preload first images for startup */	
	var images = new Array();
	$$('img').each(function(e){images.push(e.src)});

	var img = new Asset.images(images, {
	  onProgress: showProgress,
	  onComplete: finishedLoading
	});
	
	fxCardL0 = new Fx.Morph($('card0_l'), {duration:500, wait:false});
	fxPanelList = new Fx.Morph($('panelList'), {duration:500, wait:false});
	var fxCardContent = new Fx.Morph($('card0_Content'), {duration:200, wait:false});
	$$('.cardContent').setStyle('display', 'none').setStyle('opacity', 1);

	var popinChain = new Chain();
	
	$$('#panelList li').each(function(element, i) {
		var fx = new Fx.Morph(element, {duration:fxDuration, wait:true});
		var fxHead = new Fx.Morph($('head' + i + '_s'), {duration:fxDuration, wait:false});
		var fxImg = new Fx.Morph($('card' + i + '_s'), {duration:fxDuration, wait:false});
		var sw = cardSmallWidth;
		var mw = cardMediumWidth;
		var sh = cardSmallHeight;
		var mh = cardMediumHeight;
		
		$('card' + i + '_s').setStyles({
			'visibility': 'hidden',
			'margin-left': Math.round((sw - mw/2)/2),
			'margin-top': Math.round((sh - mh/2)/2),
			height: mh/2,
			width: mw/2
		}); 
		
		popinChain.chain(function(){ popinPanel(i); });

		element.addEvent('mouseenter', function(){
			if(activeCard) return;
			
			fxImg.start({
				'margin-left': Math.round((sw - mw)/2),
				'margin-top': Math.round((sh - mh)/2),
				height: mh,
				width: mw
			});
		});
		
		element.addEvent('mouseleave', function(){
			fxImg.start({
				'margin-left': 0,
				'margin-top': 0,
				height: sh,
				width: sw
			});
		});

		element.addEvent('click', function(){
			if(activeCard) return;
			if(i == 4){
			    document.location = "http://www.fleurop.de/Adventskalender.aspx";
			} else {
			    activeCard = element.firstChild;
			    //alert(activeCard);
			    activeCardNum = i;
			    openPanel();
			    h.addState('panel='+i);
			}
		});
		
	});
	
	$$('.closebutton').each(function(element, i) {
		element.addEvent('click', function(e){
			if(e) {
				e = new Event(e);
				e.stop();
			}
			closePanel();
			h.addState('');
		});
	});
	
	var openPanel = function() {
			$('card0_l').setStyle('opacity', 0);
			$('card0_l').style.display = 'block';
			var element = activeCard.getParent();
			//element.effect('opacity', {duration: 200}).start(0);
			//new Fx.Tween(element, 'opacity', {duration:200}).start('0');
			//fxPanelList.start({'opacity': 0}); // IE doesn't like animating the transparency
			fxCardL0.start({
				'background-color': ['#eeeeee','#ffffff'],
				height: [activeCard.getStyle('height').toInt() - reflectionHeight, 386],
				width: [activeCard.getStyle('width').toInt(), 820],
				top: [activeCard.getStyle("top").toInt(), largePanelTop],
				left: [activeCard.getStyle("left").toInt(), largePanelLeft],
				'opacity': 1
			}).chain(function(){
				if(!$('card' + activeCardNum + '_Content').innerHTML.trim()) {
					$('loadingbar').setStyle('display', 'block');
					var url = "panel" + activeCardNum + ".htm";
					
					var req = new Request.HTML({
						url: url,
						method: 'get',
						evalScripts: true,
						update: $('card' + activeCardNum + '_Content'),
						onComplete: preloadPanelImages,
						onFailure: loadingFailed
					});
					req.send();
				}
				else {
					initPanelContent();
				}
				$('panelList').setStyle('opacity', 0);// IE doesn't like animating the transparency
				//$E('.largeBorderLeft').setStyle('display','block');
				//$E('.largeBorderRight').setStyle('display','block');
				$E('.closebutton').setStyle('display','block');
			});
	}	
	
	fixPng();	
	
	var runChain = function() {
		popinChain.callChain();
		if (popinChain.$chain.length == 0) { 
			runChain = $clear(popinTimer);
			if(!startWithLargePanel) {
				activeCard = false;
			}			
		}
	};
	
	var popinTimer;
	var startTheShow = function() {
		if(startWithLargePanel) {
			$$('#panelList li')[startWithLargePanelId].fireEvent('click');
		}
		else {
			activeCard = true;
		}
			$('panelList').setStyle('display','block');
			popinTimer = runChain.periodical(200);
	};	
		
	function preloadPanelImages() {
		i = activeCardNum; 
		var images = null;
		/* preload for dynamic slideshows - not needed atm */
		//if(slideImg[i] && !slideshows[i]) { //new slideshow (wasn't loaded before), so  we have to preload its images
		//	images = slideImg[i];
		//}
		
		if(images) { //preload images, then show content
			var pnlImg = new Asset.images(images, {
			  onProgress: showProgress,
			  onComplete: initPanelContent
			});
		}
		else { //no preload, show content immediately
			initPanelContent();
		}
	}

	function historyNavigate() {
		var state = h.getCurrentLocation();
		//console.log('currentLocation=' + state);
		if(activeCard) closePanel();
		if(state.indexOf('panel') != -1) {
			var pnl = state.substr(-1,1);
			if(!isNaN(pnl)) {
				activeCard = $$('#panelList li')[pnl].firstChild;
				activeCardNum = pnl;
				openPanel(pnl);
			}
			
		}
	};
}); 


var closePanel = function(dontAnimate) {
	/* let's try without stopping the slideshow while closing */
	//if(slideshows[activeCardNum]) slideshows[activeCardNum].stop();
		
	if(activeCardNum == 0){
	    slideshows[0].stop();
	}
		
	if(activeCardNum == 3){
	    slideshows[3].stop();	
	}
	
		
	//$E('.largeBorderLeft').setStyle('display','none');
	//$E('.largeBorderRight').setStyle('display','none');
	$E('.closebutton').setStyle('display','none');
	if(dontAnimate) {
		$('card' + activeCardNum + '_Content').setStyle('display','none');
		$('card0_l').setStyles({
				opacity: 0,
				height: activeCard.getStyle("height").toInt() - reflectionHeight,
				width: activeCard.getStyle("width").toInt(),
				top: activeCard.getStyle("top").toInt(),
				left: activeCard.getStyle("left").toInt()
		});
		activeCard.getParent().setStyle('opacity', 1);
		activeCard = false;
	}
	else {
		//$('card' + activeCardNum + '_Content').effect('opacity', {duration: 200}).start(0)
		new Fx.Tween($('card' + activeCardNum + '_Content'), 'opacity', {duration: 200}).start('0')
		.chain(function(){
			$('card' + activeCardNum + '_Content').setStyle('display','none');
			//fxPanelList.start({'opacity': 1}); //reshow panels
			$('panelList').setStyle('opacity', 1);
			fxCardL0.start({
				height: [386, activeCard.getStyle("height").toInt() - reflectionHeight],
				width: [820, activeCard.getStyle("width").toInt()],
				top: [largePanelTop, activeCard.getStyle("top").toInt()],
				left: [largePanelLeft, activeCard.getStyle("left").toInt()]
			}).chain(function(){
				this.start({
					'opacity': 0
				});
				//new Fx.Tween(activeCard.getParent(), 'opacity', {duration: 100}).start('1');
				activeCard = false;
				resetPanels();
			});
		});
	}
		
	setTitle( baseTitle );
};	

function resetPanels() {
	showSubContent(0,0);
}

function hideLoader() {
	$('loadingbar').setStyle('display', 'none');
}

function loadingFailed() {
	hideLoader();
	$('card' + activeCardNum + '_Content').set('html', '<div class="errorbox">Die Seite konnte nicht geladen werden</div>');
}

function initPanelContent() {
	hideLoader(); 
	i = activeCardNum;
	$('card' + i + '_Content').setStyle('display','block');
	new Fx.Tween($('card' + i + '_Content'), 'opacity', {duration: 200}).start('1');

	//if(activeCardNum == 4 || activeCardNum == 5) initScroller(); //workaround for main-/sub-content scrollers
	
	if(activeCardNum == 0){
	    slideshows[0].start();	
	}
		
	if(activeCardNum == 3){
	    slideshows[3].start();	   
	}
	
		
	//if(slideshows[i]) slideshows[i].start();
	/* init dynamic slideshow - not need atm */
	//else if(slideImg[i]) { //new slideshow, so  we have to create it
	//	slideshows[i] = new TinySlideshow(slideImg[i], $('emo'+i));
	//	slideshows[i].start()
	//}	
}

function initScroller(elPath) {
	if($E(elPath + ' div.scroller')) {
		scrollbox = new MooScroller(
			$E(elPath + ' div.scroller div.content'), 
			$E(elPath + ' div.scroller .scrollKnob'), {
			mode: 'vertical',
			scrollSteps: 20,
			scrollLinks: {
				forward: $E(elPath + ' div.scroller div.scrollForward'),
				back: $E(elPath + ' div.scroller div.scrollBack')
			}
		});
	}
}

var lastSubContent = [];
function showSubContent(card, subContent) {
	if(lastSubContent[card] == undefined) {
		lastSubContent[card] = 0;
		if(subContent != 0 && $('scl' + card + '_0')) $('scl' + card + '_0').removeClass('active');
	}
	else if($('scl' + card + '_' +  lastSubContent[card])) {
		$('scl' + card + '_' +  lastSubContent[card]).removeClass('active');
	}
	$('sc' + card + '_' +  lastSubContent[card]).setStyle('display','none');
	$('sc' + card + '_' +  subContent).setStyle('display','block');
	if($('scl' + card + '_' +  subContent)) $('scl' + card + '_' +  subContent).addClass('active');
	
	//if($E('#card' + i + '_Content div.scroller')) scrollbox.update();
	//$('sc' + card + '_' +  subContent)
	var elPath = '#sc' + card + '_' + subContent;
	initScroller(elPath);
	
	lastSubContent[card] = subContent;
	//track(card, subContent);
}

function popinPanel(i){
	if(animatePopin) {
		var fxHead = new Fx.Morph($('head' + i + '_s'), {duration:300, wait:false});
		var fxImg = new Fx.Morph($('card' + i + '_s'), {duration:300, wait:false});

		//$('card' + i + '_s').getParent().effect('opacity', {duration: 300}).start(1);
		$('card' + i + '_s').setStyle('visibility', 'visible');
		
		var sw = cardSmallWidth;
		var mw = cardMediumWidth;
		var sh = cardSmallHeight;
		var mh = cardMediumHeight;

		fxImg.start({
			'margin-left': Math.round((sw - mw)/2),
			'margin-top': Math.round((sh - mh)/2),
			height: mh,
			width: mw
		}).chain(function(){
			this.start({
				'margin-left': 0,
				'margin-top': 0,
				height: sh,
				width: sw
			});
		});
	}
	else {
		$('card' + i + '_s').setStyles({
			'visibility': 'visible',
			'margin-left': 0,
			'margin-top': 0,
			height: sh,
			width: sw
		});
	}
}

function sendForm(id) {
	var ok = true;
	var msg = [];
	$(id).getElements("input, textarea").each(function(el){
		if(el.value.trim() == '' && el.id!='textcounter2' && el.id!='textcounter') {
			if(ok) {
				msg.push("Bitte f&uuml;llen Sie die rot markierten Felder aus.");
				ok = false;
			}
			$(el).addClass('inputError');
		}
		else {
			$(el).removeClass('inputError');
		}
	});
	$(id).getElements("select").each(function(el){
		if(el.value.trim() == '') {
			if($(el).get('name') == 'anrede')
				msg.push("Bitte w&auml;hlen Sie Ihre Anrede aus.");
			ok = false;
			$(el).addClass('inputError');
		}
		else {
			$(el).removeClass('inputError');
		}
	});
	$(id).getElements("input[name$=email]").each(function(el){
		if(el.value.trim() != '') {
			if(el.value.indexOf('@') < 1) {
				msg.push("Sie haben eine ung&uuml;ltige eMail-Adresse eingegeben.");
				$(el).addClass('inputError');
			}
			else {
				$(el).removeClass('inputError');
			}
		}
	});

	if(!$('cb_accept').checked) {
		ok = false;
		msg.push('Sie m&uuml;ssen den Teilnahmebedingungen zustimmen.');
	}

	
	if(ok) {
		var req = new Request.HTML({
			url: formSaveUrl,
			onComplete: dankeFormComplete,
			onFailure: dankeFormFail
		});
		req.get($(id));
		$('btnSubmit').addClass('btnSubmitLoading');
	}
	else {
		var html = "<h3>Fehler</h3>";
		$each(msg, function(m) {
			html += "<p>" + m + "</p>";
		});
		showMessagebox(html);
	}
}
function dankeFormComplete(responseTree, responseElements, responseHTML, responseJavaScript) {
	$('btnSubmit').removeClass('btnSubmitLoading');
	if(responseHTML && responseHTML.trim() == 'OK') dankeFormSuccess();
	else dankeFormFail();
}
function dankeFormFail() {
	$('btnSubmit').removeClass('btnSubmitLoading');
	showMessagebox('<h3>Fehler beim Senden</h3><p>Ihre Daten konnten nicht gespeichert werden.</p>');
}
function dankeFormSuccess() {
	showMessagebox('<h3>Ihre Dankesgr&uuml;&szlig;e wurden versendet</h3><p>In K&uuml;rze werden Sie eine Best&auml;tigung erhalten</p>');
	setTimeout("closeMessagebox();showDankeFlash()", 5000);
}
function showMessagebox(msg) {
	$('messageboxText').set('html', msg);
	$('messagebox').setStyle('display','block');
}
function closeMessagebox() {
	$('messagebox').setStyle('display','none');
}


function fixPng() {
	if(Browser.Engine.trident) {
		var msf = 'progid:DXImageTransform.Microsoft.AlphaImageLoader';
		$$('#panelList img').each(function(img){
			img.setStyles({
				'filter': msf + "(enabled='true',src='" + img.getProperty('src') + "',sizingMethod='scale')",
				width: img.getProperty('width'),
				height: img.getProperty('height')
			});
			img.setProperty('src', clearGif);
		}.bind(this));
		if(Browser.Engine.trident4) {
			$$('.cardContent img[src$=png]').each(function(img){
				img.setStyles({
					'filter': msf + "(enabled='true',src='" + img.getProperty('src') + "',sizingMethod='scale')",
					width: img.getProperty('width'),
					height: img.getProperty('height')
				});
				img.setProperty('src', clearGif);
			}.bind(this));
		}
	}
}

if(!console) var console={log:function(){}} //compatibility
var $E = function(selector, filter){
	return ($(filter) || document).getElement(selector);
};

var TinySlideshow = new Class({
    initialize: function(imgs, container){
		this.imgs = imgs;
		this.container = container;
		this.delay = 3500; //time between slides
		this.duration = 1000; //duration of the fade effect
		this.activeLayer = '';
		this.activeSlide = 0;
		this.slidePeriodical = 0;
		this.layer0 = container.getElements('img')[0];
		this.layer1 = container.getElements('img')[1];
		this.layer1.setProperty('src', this.imgs[0]);
		//this.fx0 = new Fx.Tween(this.layer0, 'opacity', {'duration': this.duration});
		//this.fx1 = new Fx.Tween(this.layer1, 'opacity', {'duration': 500});
		this.fx1 = new Fx.Morph(this.layer1, { 'duration': this.duration });

    },
	start: function() {
		this.stop();
		//this.slidefx();
		this.slidePeriodical = this.slidefx.periodical(this.delay, this);
	},
	stop: function() {
		this.slidePeriodical = $clear(this.slidePeriodical);
	},
	slidefx: function() {
		slen = this.imgs.length - 1;
		if(this.activeSlide >= slen) this.activeSlide = 0;
		else this.activeSlide++;
			
		if (this.activeLayer == 1) {
			this.layer1.setProperty('src', this.imgs[this.activeSlide]);
			//this.layer1.effect('opacity', {duration: this.duration}).start(0, 1);
			this.fx1.start({'opacity':1});
		}
		else {
			this.layer0.setProperty('src', this.imgs[this.activeSlide]);
			//this.layer1.effect('opacity', {duration: this.duration}).start(1, 0);
			this.fx1.start({'opacity':0});
		}
		this.activeLayer = (this.activeLayer == 1) ? 2 : 1;
	}
});

function setTitle(t) {
	windowTitle = t;
	document.title = windowTitle;
}

function fixAnchorTitleBug() {
	document.title = windowTitle;
	if(Browser.Engine.trident) setTimeout('fixAnchorTitleBug()',100);
}

fixAnchorTitleBug();