var ppcImageContainer, ppcTextContainer
var ppcStatus, ppcOptions;
var ppcFillingTextDefault;
var ppcFillingTextSelected;
var autoSwitchTimer, manualSwitchTimer;

var AUTOSWITCH_FADE_DURATION = 3.0;
var MANUALSWITCH_FADE_DURATION = 0.3;
var AUTOSWITCH_TIMEOUT = 2.0;
var MANUALSWITCH_TIMEOUT = 15.0;
var IMAGES_DIR = "/images/promopral_configurator/";
var IMAGES_EXT = ".png";

function PromoPralConfiguratorInit() {
	
	// Check if container exists
	var placeholder = $('promopral');
	if (!placeholder) return false;
	var table = new Element('table', {'id':'promopral'});
	table.update('<tr><td class="image"></td><td></td></tr>');
	placeholder.replace(table);
	
	// Clean up container
	ppcImageContainer = table.getElementsByTagName('td')[0].appendChild( new Element('div', {'id':'products_fader_container'}) );
	ppcTextContainer = table.getElementsByTagName('td')[1];
	
	// Get language
	var url = window.location.href;
	var slashPos = url.indexOf("/", url.indexOf(".") );
	var nextSlashPos = url.indexOf("/", slashPos + 1);
	var lang = url.substring(slashPos + 1, nextSlashPos > 0 ? nextSlashPos : url.length ).toLowerCase();
	
	new Ajax.Request( '/promopral_configurator.xml', { 
		method: 'get',
		onSuccess: function( transport ) {
			
			var topNode = transport.responseXML.getElementsByTagName( 'PromopralConfigurator' )[0];
			
			// Find language
			var configs = topNode.getElementsByTagName('Config');
			var config;
			for (var c = 0; c < configs.length; c++) {
				if (configs[c].getAttribute('lang').toLowerCase() == lang ) {
					config = configs[c];
					break;
				}
			}
			
			// No lang found in config
			if (!config) return;
			
			ppcStatus = {
				'logo': null,
				'chocolate': null,
				'filling': null
			};
			ppcOptions = {
				'logo': new Array(),
				'chocolate': new Array()
			};
			ppcTextContainer.innerHTML = "";
			
			var texts = config.getElementsByTagName('Text');
			var stepCount = 1;
			var e;
			for (var t = 0; t < texts.length; t++) {
				var text = texts[t];
				var type = text.getAttribute('type');
				var headerTag = 'h3';
				
				ppcTextContainer.appendChild( new Element(headerTag, {'style': ( stepCount == 1 ? 'margin-top:-5px;' : '') } ).update( stepCount + ". " + text.getAttribute('title') ) );
				if (text.getAttribute('value'))
					ppcTextContainer.appendChild( new Element('p', {'id': type + '_text'}).update( text.getAttribute('value') ) );
				
				switch(type) {
					
					case 'logo':
						var logos = topNode.getElementsByTagName('Logo');
						var logosDiv = new Element('div', {'id' : 'logos'});
						ppcTextContainer.appendChild(logosDiv);
						for (var l = 0; l < logos.length; l++) {
							e = logosDiv.appendChild( new Element('div', {'style':'background-image:url(' + IMAGES_DIR + logos[l].getAttribute('value') + '_logo' + IMAGES_EXT + ');', 'title':logos[l].getAttribute('title'), 'value':logos[l].getAttribute('value')}));
							Event.observe(e, 'mouseover', function() { ppcMouseOver(this, 'logo'); });
							ppcOptions.logo.push( logos[l].getAttribute('value') );
						}
						
						break;
					
					case 'chocolate':
						var chocolates = config.getElementsByTagName('Chocolate');
						var chocolatesDiv = new Element('div', {'id' : 'chocolates'});
						ppcTextContainer.appendChild(chocolatesDiv);
						for (var c = 0; c < chocolates.length; c++) {
							e = chocolatesDiv.appendChild(
									new Element('div', {'id':'chocolate_'+chocolates[c].getAttribute('type'), 'value':chocolates[c].getAttribute('type'), 'title':chocolates[c].getAttribute('shortValue')})).update( '<span style="background:' + chocolates[c].getAttribute('color') + ' url(' + IMAGES_DIR + 'chocolate_' + chocolates[c].getAttribute('type') + IMAGES_EXT + ')"></span>' + chocolates[c].getAttribute('shortValue')
							);
							Event.observe(e, 'mouseover', function() { ppcMouseOver(this, 'chocolate'); });
							ppcOptions.chocolate.push( chocolates[c].getAttribute('type') );
						}
						break;
					
					case 'filling':
						var chocolates = config.getElementsByTagName('Chocolate');
						var fillingsDiv = new Element('div', {'id' : 'fillings'});
						ppcTextContainer.appendChild(fillingsDiv);
						for (var c = 0; c < chocolates.length; c++) {
							var fillings = chocolates[c].getElementsByTagName('Filling');
							var fillingDiv = new Element('div', {'id' : 'filling_'+chocolates[c].getAttribute('type'), 'value':chocolates[c].getAttribute('type')}).hide();
							fillingsDiv.appendChild(fillingDiv);
							var fillingArray = new Array();
							for (var f = 0; f < fillings.length; f++)
								fillingArray.push( fillings[f].getAttribute('value') );
							
							if (fillingArray.length == 1)
								fillingDiv.update( fillingArray[0] + " (" + chocolates[c].getAttribute('shortValue') + ")" );
							else {
								var last = fillingArray.pop();
								fillingDiv.update( fillingArray.join(", ") + " & " + last );
							}
						}
						ppcFillingTextDefault = text.getAttribute('value');
						ppcFillingTextSelected = text.getAttribute('valueSelected');
						break;
				}
				stepCount++;
			}
			
			// Move image into ppcImageContainer, remove the rest and set height (for centering)
			ppcImageContainer.siblings().each(function(obj){
				if (obj.tagName.toLowerCase() == 'img')
					ppcImageContainer.appendChild(obj);
				else
					obj.parentNode.removeChild(obj);
			});
			var height = $(ppcImageContainer.parentNode).getDimensions().height + 'px';
			$(ppcImageContainer).setStyle({
				'height': height,
				'lineHeight': height,
				'cursor': 'pointer'
			});
			
			// Preload images
			var im;
			for (var i = 0; i < ppcOptions.chocolate.length; i++) {
				for (var j = 0; j < ppcOptions.logo.length; j++) {
					im = new Image();
					im.src = IMAGES_DIR + ppcOptions.logo[j] + "_" + ppcOptions.chocolate[i] + IMAGES_EXT;
				}
			}
			
			autoSwitchTimer = setTimeout("ppcAutoSwitch();", AUTOSWITCH_TIMEOUT * 1000);
		}
	} );
}

function ppcMouseOver(el, type) {
	$(el).siblings().each(function(obj){
		obj.removeClassName('selected');
	});
	el.addClassName('selected');
	var val = el.getAttribute('value');
	if (ppcStatus[type] == val)
		return false;
	ppcStatus[type] = val;
	
	if (type == 'chocolate') {
		$('fillings').childElements().each(function(obj){
			if (obj.readAttribute('value') == val) {
				ppcStatus['filling'] == val;
				obj.show();
				$('filling_text').update( ppcFillingTextSelected.replace('%s', el.getAttribute('title') ) );
			}
			else
				obj.hide();
		});
	}
	ppcManualSwitch();
}

function ppcAutoSwitch() {
	// Clear timer
	if (manualSwitchTimer) clearTimeout(manualSwitchTimer);
	
	// Remove all selected classes
	$(ppcTextContainer).getElementsBySelector('.selected').each(function(obj){
		obj.removeClassName('selected');
	});
	
	// Get new image src
	var l = ppcOptions.logo[ Math.round( Math.random() * ppcOptions.logo.length - 0.5 ) ];
	var c = ppcOptions.chocolate[ Math.round( Math.random() * ppcOptions.chocolate.length - 0.5 ) ];
	var src = IMAGES_DIR + l + "_" + c + IMAGES_EXT;
	
	// Set image
	ppcSwitchImage(src, AUTOSWITCH_FADE_DURATION);
	
	// Set filling text
	$('filling_text').update( '<i>' + ppcFillingTextDefault + '</i>' );
	$('fillings').childElements().each(function(obj){
		obj.hide();
	});
	
	// Next turn
	autoSwitchTimer = setTimeout("ppcAutoSwitch();", (AUTOSWITCH_TIMEOUT + AUTOSWITCH_FADE_DURATION) * 1000);
}

function ppcManualSwitch() {
	// Clear timers
	if (autoSwitchTimer) clearTimeout(autoSwitchTimer);
	if (manualSwitchTimer) clearTimeout(manualSwitchTimer);
	
	// Get new image src
	var l = ppcStatus.logo ? ppcStatus.logo : ppcOptions.logo[ Math.round( Math.random() * ppcOptions.logo.length - 0.5 ) ];
	var c = ppcStatus.chocolate ? ppcStatus.chocolate : ppcOptions.chocolate[ Math.round( Math.random() * ppcOptions.chocolate.length - 0.5 ) ];
	var src = IMAGES_DIR + l + "_" + c + IMAGES_EXT;
	
	// Set image
	ppcSwitchImage(src, MANUALSWITCH_FADE_DURATION);
	
	// Set timer for continuation of auto-switching
	manualSwitchTimer = setTimeout("ppcAutoSwitch();", MANUALSWITCH_TIMEOUT * 1000);
}

function ppcSwitchImage(image, duration) {
	// Hide current image
	var img;
	if (img = ppcImageContainer.getElementsByTagName('img')[0]) {
		img.absolutize();
		img.style.zIndex = 1;
		//new Effect.Fade(img, {duration: duration, afterFinish: function(obj) { obj.element.parentNode.removeChild(obj.element); } });
	}
	
	// Fadein new image
	var nextImg = new Element('img', {'src':image});
	ppcImageContainer.insertBefore(nextImg, img);
	nextImg.absolutize().hide();
	nextImg.style.zIndex = 2;
	if (img)
		new Effect.Appear(nextImg, {duration: duration, afterFinish: function(obj) { img.parentNode.removeChild(img); } } );
	else
		new Effect.Appear(nextImg, {duration: duration});
}

Event.observe(window, 'load', function() {
  PromoPralConfiguratorInit();
});