jQuery(document).ready(function($) {
	/* STAGE IMAGE CYCLE */
	
	function initiate() {
		jQuery('.triggers div').hover(function() {
				var target = '#'+jQuery(this).attr('class');
				var position = jQuery(this).width()/2-10;
				jQuery(target).show();
				jQuery(this).find('blockquote').css('left', position).show();
			}, function() {
				var target = '#'+jQuery(this).attr('class');
				jQuery(target).hide();
				jQuery(this).find('blockquote').hide();
		});

		createOverlay('image_1');
		createOverlay('image_2');
		createOverlay('image_3');
		createOverlay('image_4');
	}
	function createOverlay(image) {
		/*
			Erstelt fuer jeden Trigger ein Div mit Hintergrundbild (und haengt diesen
			an den jeweilen Layer '.boxes' an) welches dann beim mouseover des
			entsprechenden Triggers eingeblendet und beim mouseout
			wieder ausgeblendet wird.
			
			Der Dateiname des erstellten Bildes leitet sich ab:
			Hauptbild ohne Dateierweiterung plus '_bg_wuerfel_' plus 
			Ordnungszahl (aufsteigend 1 bis X) plus Dateierweiterung
			
			Beispiel: _gfx/reichstag.jpg -> _gfx/reichstag_bg_wuerfel_1.png
		*/
		var mainImageSrc = jQuery('#'+image).find('img.main').attr('src');
		var mainImageExtension = '.'+mainImageSrc.split('.').pop();		
		jQuery('#'+image+' .triggers div').each(function(index) {
			var index = parseInt(index)+1;
			overlayImageSrc = mainImageSrc.replace(mainImageExtension, '_bg_wuerfel_'+index+'.png');
			/* fix fuer die internationalen Bilder */
			overlayImageSrc = overlayImageSrc.replace(/_en|_it|_tr|_lt|_ru|_cz|_fr/,'');
			var newImage = jQuery('<img>').attr({
				'src': overlayImageSrc,
				'id': image + '_' + index
			});
			jQuery('#' + image + ' .boxes').append(newImage);
		});
	}
	initiate();
	/* STAGE IMAGE CYCLE */
});