// Are all picture assets loaded?
var picsLoaded = 0;
var picturesLoaded = new Array();
var newPicPath = '';
var picWaitTO; //Timeout
var waitingPic = false;

function fadePicTo() {

	var fullPicPath = 'http://' + getHostname(window.location.href) + '/' +  newPicPath;

	if (picWaitTO != null) {
		window.clearTimeout(picWaitTO);
	}

	if( picturesLoaded.contains(fullPicPath) ) {

		hideWaitingPic();
	
		var rightPic = $E('img', 'content_right');
		var newPic = new Element('img', {
			'src': fullPicPath
		});

		// inject the new image "under" the old one
		var newPicEl = newPic.injectBefore(rightPic);
		rightPic.setStyle('position', 'absolute');
		newPicEl.setStyle('position', 'absolute');
	
		// assign fade effect to image
		if (rightPic) {
			var myFade = rightPic.effect('opacity', {
				duration: 400,
				fps: 25,
				onComplete: function() {
					if (rightPic) {
						rightPic.remove();
					}
					else {
						alert("no rightPic");
					}
				}
			});
			myFade.start(1,0);
		}
	}
	else {
		if (!waitingPic) {
			showWaitingPic();
		}
		picWaitTO = window.setTimeout(fadePicTo, '100');
		
	}
}

function showWaitingPic() {
	$('qtab-img-loading-bar').setStyle('display', 'block');
}

function hideWaitingPic() {
	$('qtab-img-loading-bar').setStyle('display', 'none');
}

function changePic(){
	newPicPath = picturePaths[this.picnum];
	fadePicTo();
}

/* init_header_pic
 * Befüllt pictures-Array mit den im Array picturePaths referenzierten Bild-Dateien
 */
function initPics(){
	if (picturePaths.length < 1) return;
	for (var i=0; i<picturePaths.length; i++) {
		new Asset.image(picturePaths[i], {src: picturePaths[i], onload: function() {
				picturesLoaded.push(this.src);
			}
		});
	}
	
	var menutabs = $('qtabs-' + qcom_tab_ce_id).getElements('li');

	for (var j=0; j<menutabs.length; j++) {
		menutabs[j].picnum = j;
		menutabs[j].addEvent('click', changePic.bind(menutabs[j]));
	}
	
	rightPic = $E('img', 'content_right');
	$('content_right').setStyle('height', rightPic.getProperty('height') + 'px');
	
	// init waiting pic
	var xRel = rightPic.getLeft();
	var yRel = rightPic.getTop();
	var xOffset = rightPic.getSize().size.x;
	var yOffset = rightPic.getSize().size.y;
	
	rightPic.setStyle('position', 'relative');
	$('qtab-img-loading-bar').setStyle('position', 'absolute');
	
	var wPW = $('qtab-img-loading-bar').getSize().size.x;
	var wPH = $('qtab-img-loading-bar').getSize().size.y;
	$('qtab-img-loading-bar').setStyle('left', parseInt(xRel + xOffset/2 - wPW/2) + 'px' );
	$('qtab-img-loading-bar').setStyle('top', parseInt(yRel + yOffset/2 - wPH/2) + 'px');
	
	if (default_tab != null) {
		newPicPath = picturePaths[default_tab];
		fadePicTo();		
	}
}


function getHostname(str) {
	var re = new RegExp('^(?:f|ht)tp(?:s)?\://([^/]+)', 'im');
	return str.match(re)[1].toString();
}


window.addEvent('domready', initPics);