// properties
var intBorderRightSlide = 0;
var strBorderRightOpened = '1px solid #C4C4C4';
var strMarginRightOpened = '32px';
var strMarginRightReset = '20px';
var intMarginRightSlide = 0;
var intSlideDuration = 350;
var intSlideOutDuration = intSlideDuration;
var	strImageOpen = "images/img_arrow.gif"; 
var	strImageClose = "images/img_arrow_back.gif";
var box1OpenerLink = "javascript:resetLinks(); void($('startlink1').className='boxlink_active'); loadContent('fidelio-laden','box1', true);";
var box2OpenerLink = "javascript:resetLinks(); void($('startlink2').className='boxlink_active'); loadContent('fidelio2-laden', 'box2', true);";
var box3OpenerLink = "javascript:resetLinks(); void($('startlink3').className='boxlink_active'); loadContent('fidelio3-laden', 'box3', true);";
var box4OpenerLink = "javascript:resetLinks(); void($('startlink4').className='boxlink_active'); loadContent('rabatt-laden', 'box4', true);";
var box1OpenerLinkFalse = "javascript:resetLinks(); void($('startlink1').className='boxlink_active'); loadContent('fidelio-laden','box1', false);";
var box2OpenerLinkFalse = "javascript:resetLinks(); void($('startlink2').className='boxlink_active'); loadContent('fidelio2-laden', 'box2', false);";
var box3OpenerLinkFalse = "javascript:resetLinks(); void($('startlink3').className='boxlink_active'); loadContent('fidelio3-laden', 'box3', false);";
var box4OpenerLinkFalse = "javascript:resetLinks(); void($('startlink4').className='boxlink_active'); loadContent('rabatt-laden', 'box4', false);";

var tweenWidth = "";

// preload background images for faster usage
window.onload = function() {
	
	// preload backgrounds
	bgimg01 = new Image();
	bgimg01.src = "images/bg/1.jpg";
	bgimg02 = new Image();
	bgimg02.src = "images/bg/2.jpg";
	bgimg03 = new Image();
	bgimg03.src = "images/bg/3.jpg";
	bgimg04 = new Image();
	bgimg04.src = "images/bg/4.jpg";
	bgimg05 = new Image();
	bgimg05.src = "images/bg/5.jpg";
	
	// preload hover images
	bgimg06 = new Image();
	bgimg06.src = "images/img_logo_eyekon_over.png";
	bgimg07 = new Image();
	bgimg07.src = "images/img_arrow_over.gif";
	bgimg08 = new Image();
	bgimg08.src = "images/img_arrow_back_over.gif";
	bgimg09 = new Image();
	bgimg09.src = "images/img_googlemaps_over.gif";
	
	
	
}

function resetBoxes(boxid) {
	resetBox('box1');
	resetBox('box2');
	resetBox('box3');
	resetBox('box4');
}

function resetBox(boxid) {
	$(boxid + 'openerlink').setAttribute("onmouseover", "document.getElementById('" + boxid + "opener').src='images/img_arrow_over.gif';");
	$(boxid + 'openerlink').setAttribute("onmouseout", "document.getElementById('" + boxid + "opener').src='images/img_arrow.gif';");

	// reset boxes to start view (each box has 210px)
	$(boxid).set('tween', {}).tween('width', '210px');
	// $(boxid + 'opener').src = strImageOpen;
	
	$(boxid + 'livecontent').style.display = 'none';

	resetLinks();
	
	// reset opener links of boxes	
	if (boxid == 'box1') {
		$(boxid + 'openerlink').href = box1OpenerLink;
		$(boxid + 'openertitlelink').href = box1OpenerLinkFalse;
	}
	if (boxid == 'box2') {
		$(boxid + 'openerlink').href = box2OpenerLink;
		$(boxid + 'openertitlelink').href = box2OpenerLinkFalse;
	}
	if (boxid == 'box3') {
		$(boxid + 'openerlink').href = box3OpenerLink;
		$(boxid + 'openertitlelink').href = box3OpenerLinkFalse;
	}
	if (boxid == 'box4') {
		$(boxid + 'openerlink').href = box4OpenerLink;
		$(boxid + 'openertitlelink').href = box4OpenerLinkFalse;
	}
	
	if (boxid != 'box4') {
		$(boxid + 'clear').style.display = 'none';
		// $(boxid + 'clear').style.visiblity = 'hidden';
		$(boxid).style.marginRight = strMarginRightReset;
		$(boxid).style.borderRight = strBorderRightOpened;
	}
	else
	{
		$(boxid).style.marginLeft = 0;	
	}
	
	$(boxid + 'opener').src = strImageOpen;
}

function openBox(boxid) {
	// Close other Boxes
	if (boxid == 'box1') {
		closeBox('box4');
		closeBox('box3');
		closeBox('box2');
	}
	
	if (boxid == 'box2') {
		closeBox('box4');
		closeBox('box3');
		closeBox('box1');	
	}

	if (boxid == 'box3') {
		closeBox('box4');
		closeBox('box2');
		closeBox('box1');	
	}
	
	if (boxid == 'box4') {
		closeBox('box3');
		closeBox('box2');
		closeBox('box1');	
	}
	
	// change box link
	$(boxid + 'openerlink').setAttribute("onmouseover", "document.getElementById('" + boxid + "opener').src='images/img_arrow_back_over.gif';");
	$(boxid + 'openerlink').setAttribute("onmouseout", "document.getElementById('" + boxid + "opener').src='images/img_arrow_back.gif';");
	$(boxid + 'openerlink').href = "javascript:resetBoxes('" + boxid + "'); void(document.getElementById('" + boxid + "opener').src='images/img_arrow_over.gif');";	
	$(boxid + 'openertitlelink').href = "javascript:resetBoxes('" + boxid + "');";
	$(boxid + 'livecontent').style.display = 'block';

	// set tween width of boxes (last box has width of 723px because longer than other boxes
	if (boxid == 'box4') {
		tweenWidth = "723px";
	}
	else
	{
		tweenWidth = "690px";		
	}
																		 
	// initialize and fire tween of selected box	
	$(boxid).set('tween', {
		duration: intSlideDuration,
		// transition: Fx.Transitions.Circ.easeOut // This could have been also 'bounce:out'
		transition: Fx.Transitions.linear
	}).tween('width', tweenWidth);	
	
	// set new box properties
	if (boxid == 'box4') {
		$(boxid).style.marginLeft = 0;
	}
	else
	{
		$(boxid).style.marginRight = strMarginRightOpened;
		$(boxid + 'clear').style.display = 'block';
		$(boxid).style.marginLeft = 0;			
		$(boxid).style.marginRight = 0;
		$(boxid).style.borderRight = strBorderRightOpened;
	}
}

function closeBox(boxid, openboxid) {
	var width = $(boxid).style.width;
	
	if (boxid == 'box1') {
		$(boxid + 'openerlink').href = box1OpenerLink;
		$(boxid + 'openertitlelink').href = box1OpenerLinkFalse;
	}
	if (boxid == 'box2') {
		$(boxid + 'openerlink').href = box2OpenerLink;
		$(boxid + 'openertitlelink').href = box2OpenerLinkFalse;
	}
	if (boxid == 'box3') {
		$(boxid + 'openerlink').href = box3OpenerLink;
		$(boxid + 'openertitlelink').href = box3OpenerLinkFalse;
	}
	if (boxid == 'box4') {
		$(boxid + 'openerlink').href = box4OpenerLink;
		$(boxid + 'openertitlelink').href = box4OpenerLinkFalse;
	}

	if (width != '60px') {
		$(boxid).set('tween', {
			duration: intSlideOutDuration,
			// transition: Fx.Transitions.Circ.easeOut // This could have been also 'bounce:out'
			transition: Fx.Transitions.linear
		}).tween('width', '60px');
		$(boxid).style.marginRight = 0;
		if (boxid != 'box4') {
			$(boxid + 'clear').style.display = 'none';
			// $(boxid + 'clear').style.visiblity = 'hidden';
			$(boxid).style.marginRight = 0;
		}
		if ((openboxid == 'box4') && (boxid == 'box3')) {
			$('box3').style.borderRight = strBorderRightOpened;
		}
		else
		{
			$(boxid).style.borderRight = 0;
			$('box4').style.borderRight = strBorderRightOpened;
		}		
	}
}

function changeOpenerImage(opener_img) { 
	if (document[opener_img].src.indexOf(strImageOpen)!= -1) {
		document[opener_img].src = strImageClose;
	}
	else 
	{
		document[opener_img].src = strImageOpen; 
	} 	
}

function loadContent(contentelement, boxid, openerimage) {
	openerimage = Boolean(openerimage);
	if (!openerimage) {	
		$(boxid + 'opener').src = strImageClose;
	}
	
	var xmlhttp = false; //Clear our fetching variable
    try {
    	xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); //Try the first kind of active x object…
    } catch (e) {
        try {
	        xmlhttp = new
	        ActiveXObject('Microsoft.XMLHTTP'); //Try the second kind of active x object
        } catch (E) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
            xmlhttp = new XMLHttpRequest(); //If we were able to get a working active x object, start an XMLHttpRequest
    } else {
		//alert('error');
	}
    xmlhttp.open('GET', 'ajax.php?path=' + contentelement + '.php', true); //Open the file through GET, and add the page we want to retrieve as a GET variable **
    xmlhttp.onreadystatechange=function() {
	    if (xmlhttp.readyState == 4) { 
	            var content = xmlhttp.responseText; 
	            if(content){ 
  					  document.getElementById(boxid + 'livecontent').innerHTML = content; //Change the inner content of your div to the newly retrieved content ****
					  openBox(boxid);
										
					  // initialize squeezebox
					  SqueezeBox.initialize();
						
					  // assign ajax loaded content to squeezebox
					  SqueezeBox.assign($$('a[rel=boxed]'));
						
					  // assign google maps as squeezebox content
					  SqueezeBox.assign($$('a.boxed'), {
					  	  parse: 'rel'
					  });
										

	            	}
			}
    }
	xmlhttp.send(null) //Nullify the XMLHttpRequest
    return;
}

function displayPicture(id, path, portalid, imagenumber, largeimage, x, y) {
	$(id + portalid).src = path;
	setCurrentPage(imagenumber, portalid);
	width = parseInt(x + 40);
	height = parseInt(y + 90);
	$('destination' + portalid).href = largeimage;
	$('destination' + portalid).rel = "{handler:'iframe',size:{x:" + width + ",y:" + height + "},iframePreload:true}";
}

function displayLabels(group, id, portalid) {
	if (group == "m") {
		$(portalid + '_labels_m').style.display = 'block';
		$(portalid + '_labels_w').style.display = 'none';
		selectPagerLink(2, portalid);
		resetPagerLink(1, portalid);
	}
	else
	{
		$(portalid + '_labels_w').style.display = 'block';
		$(portalid + '_labels_m').style.display = 'none';
		selectPagerLink(1, portalid);
		resetPagerLink(2, portalid);
	}
}

function getElementsByClassName(classname, node)  {
	if(!node) node = document.getElementsByTagName("body")[0];
	var a = [];
	var re = new RegExp('\\b' + classname + '\\b');
	var els = node.getElementsByTagName("*");
	for(var i=0,j=els.length; i<j; i++)
	if(re.test(els[i].className))a.push(els[i]);
	return a;
}

function resetLinks() {
	var links = getElementsByClassName('boxlink_active');
	for (i = 0; i < links.length; i++) {
		links[i].className = 'boxlink';	
	}
}



function setCurrentPage(imagenumber, portalid) {
	var elements = getElementsByClassName('page_active');
	if (elements.length > 0) {
		resetPagerLink(1, portalid);
		resetPagerLink(2, portalid);
		resetPagerLink(3, portalid);
	}
	selectPagerLink(imagenumber, portalid);
}

function selectPagerLink(id, portalid) {
	$(portalid + '_link' + id).className = "page_active";
}

function resetPagerLink(id, portalid) {
	$(portalid + '_link' + id).className = "page";
}