/******************************************************************************/
/*                                                                            */
/*  MAHA Media-Gallery Script                                                 */
/*                                                                            */
/******************************************************************************/
/*                                                                            */
/*  Copyright 2008 by ATRIVIO GmbH media network                              */
/*  http://www.atrivio.de                                                     */
/*                                                                            */
/*  Author: Markus Schüler                                                    */
/*                                                                            */
/*  Creation Date: 2008/01/08                                                 */
/*  Last Changes: 2008/03/19                                                  */
/*                                                                            */
/*  Version: 1.20.14                                                          */
/*                                                                            */
/*  System Requirements (tested and recommended):                             */
/*  Microsoft Internet Explorer(C) Version 6.0 or higher                      */
/*  Mozilla Firefox(C) Version 1.5 or higher                                  */
/*                                                                            */
/******************************************************************************/
/*                                                                            */
/*  Description:                                                              */
/*  This Script provides a combination of tab browsing, a photo gallery       */
/*  with enlarging detailed images and a drag & drop function for those       */
/*  enlarged images. Even scrolling and downloading within the gallery is     */
/*  possible.                                                                 */
/*                                                                            */
/******************************************************************************/
/*                                                                            */
/*  Comments:                                                                 */
/*  2008/01/16: enhanced for drag & drop                                      */
/*  2008/01/21: enhanced for picture scrolling                                */
/*  2008/02/05: enhanced for downloading                                      */
/*                                                                            */
/******************************************************************************/

function StartZustand (img_trenner, img_back, img_ahead, img_close)
{
	// constants
	var tabDisplay = "block";
	
	var i = 0;  // counter
		
	if (window.document.getElementById("kleineReiter").firstChild){
		if (window.document.getElementById("subcontent").firstChild.className != "subcontent"){
			i = 1;
		}
		// define first tab state on load
		window.document.getElementById("kleineReiter").childNodes[0].className = "kleinerReiter_active";
		window.document.getElementById("subcontent").childNodes[i].style.display = tabDisplay;
	}	
	
	var Stage_Substitute  = "<img alt=\"\" />";
    Stage_Substitute = Stage_Substitute + "<div style=\"width:inherit;\"><span style=\"float:right;\">";
    Stage_Substitute = Stage_Substitute + "<img src=\""+img_trenner+"\" alt=\"\" style=\"border:0 transparent none;\" />";
    Stage_Substitute = Stage_Substitute + "<a href=\"javascript:StageRotate('rev');\">";
    Stage_Substitute = Stage_Substitute + "<img src=\""+img_back+"\" alt=\"\" style=\"border:0 transparent none;\" /></a>";
    Stage_Substitute = Stage_Substitute + "<a href=\"javascript:StageRotate('fwd');\">";
    Stage_Substitute = Stage_Substitute + "<img src=\""+img_ahead+"\" alt=\"\" style=\"border:0 transparent none;\" /></a>";
    Stage_Substitute = Stage_Substitute + "<a href=\"javascript:void(0);\" onclick=\"javascript:document.getElementById('stage').style.display='none'; document.getElementById('greyout').style.display='none';\">";
    Stage_Substitute = Stage_Substitute + "<img src=\""+img_close+"\" alt=\"\" style=\"border:0 transparent none;\" /></a></span>";
    Stage_Substitute = Stage_Substitute + "<span id=\"bildUnterschrift\"></span>";
    Stage_Substitute = Stage_Substitute + "</div>";
    
    document.getElementById("stage").innerHTML = Stage_Substitute;
    
    var StageVideo_Substitute = "<a href=\"\" style='display:block;width:520px;height:380px' id=\"player\"></a>";
    StageVideo_Substitute = StageVideo_Substitute + "<br />";
    StageVideo_Substitute = StageVideo_Substitute + "<div style=\"width:inherit;\">";
    StageVideo_Substitute = StageVideo_Substitute + "<span style=\"float:right;\">";
    StageVideo_Substitute = StageVideo_Substitute + "<img src=\""+img_trenner+"\" alt=\"\" style=\"border:0 transparent none;\" />";
    StageVideo_Substitute = StageVideo_Substitute + "<a href=\"javascript:void(0);\" onclick=\"Stage_VideoArise();\">";
    StageVideo_Substitute = StageVideo_Substitute + "<img src=\""+img_close+"\" alt=\"\" style=\"border:0 transparent none;\" /></a>";
    StageVideo_Substitute = StageVideo_Substitute + "</span>";
    StageVideo_Substitute = StageVideo_Substitute + "<span id=\"Video_Unterschrift\"></span>";
    StageVideo_Substitute = StageVideo_Substitute + "</div>";
    
    document.getElementById("stage_video").innerHTML = StageVideo_Substitute;
    
}

//Globale Variablen

var angeklickter_Reiter;

function getparent_Reiter (Parent_Element, Ebene)
{
	if (Parent_Element.className == "subcontent"){
		angeklickter_Reiter =  Parent_Element;
		//alert (Parent_Element.className);
		//alert ("Angeklickter Reiter: "+angeklickter_Reiter);
	}
	else if (Ebene > 5) 
	{
	
		angeklickter_Reiter = document.getElementById("subcontent").firstChild;
	
	}
	else
		getparent_Reiter(Parent_Element.parentNode, Ebene+1);
	
}

function StartZustand_reddotmode (img_trenner, img_back, img_ahead, img_close)
{	
	var i = 0;  // counter
	
	var keingeoffnetercontent = 1;
	
	// constants
	var tabNoDisplay = "none";
	var tabDisplay = "block";

	var anzahlalleKinderkleineReiter = 0; // number of tags
	var anzahlalleKinderkleineReiter = document.getElementById("kleineReiter").childNodes.length;  // number of subcontent areas
	
	var anzahlalleKinderSubcontent = 0;
	var anzahlalleKinderSubcontent = document.getElementById("subcontent").childNodes.length;
	
	var anzReiter = 0;  // number of tabs
	var parentReiter = document.getElementById("kleineReiter");
	var anzReiter = parentReiter.getElementsByTagName("span").length;
		
	var nummer_angeklickter_Reiter = 0;
	
	var Ebene = 0;
	
	for (var j = 0; j < document.images.length; j++) {
	
		if (document.images[j].src.indexOf('icon_reddot_closepage.gif') != -1) {
			
			//alert("Bild drin");
			
			keingeoffnetercontent = 0;
			
			getparent_Reiter(document.images[j].parentNode, Ebene);
			
			var subContents = new Array();
			
			for (var k = 0; k < anzahlalleKinderSubcontent; k++) 
			{
				if (document.getElementById("subcontent").childNodes[k].className == "subcontent" )
				{
					subContents.push(window.document.getElementById("subcontent").getElementsByTagName("div")[k/2]);
					
					if (window.document.getElementById("subcontent").childNodes[k] == angeklickter_Reiter){
						//alert ("Nummer angeklicketer Reiter: "+k/2);
						nummer_angeklickter_Reiter = k/2;					
					}
					
				}
			}

			
							
			var myCounter = 0;
			
			window.document.getElementById("stage").style.display = "none";  // set element invisible
			
			// reset all tabs and mark clicked tab, fade in referenced content
			while (myCounter < anzReiter) {
							
				parentReiter.getElementsByTagName("span")[myCounter].className = "kleinerReiter";
				subContents[myCounter].style.display = tabNoDisplay;
				
				if (myCounter == nummer_angeklickter_Reiter) {
					
					parentReiter.getElementsByTagName("span")[myCounter].className = "kleinerReiter_active";					
					angeklickter_Reiter.style.display = tabDisplay;
				}				

				myCounter++;
			}
					
		}
		
	}

	if (keingeoffnetercontent)
	{
		if (window.document.getElementById("kleineReiter").firstChild)
		{
			if (window.document.getElementById("subcontent").firstChild.className != "subcontent")
			{
				i = 1;
			}
			// define first tab state on load
			window.document.getElementById("kleineReiter").childNodes[0].className = "kleinerReiter_active";
			window.document.getElementById("subcontent").childNodes[i].style.display = tabDisplay;
		}
	}	
		
	
	var Stage_Substitute  = "<img alt=\"\" />";
    Stage_Substitute = Stage_Substitute + "<div style=\"width:inherit;\"><span style=\"float:right;\">";
    Stage_Substitute = Stage_Substitute + "<img src=\""+img_trenner+"\" alt=\"\" style=\"border:0 transparent none;\" />";
    Stage_Substitute = Stage_Substitute + "<a href=\"javascript:StageRotate('rev');\">";
    Stage_Substitute = Stage_Substitute + "<img src=\""+img_back+"\" alt=\"\" style=\"border:0 transparent none;\" /></a>";
    Stage_Substitute = Stage_Substitute + "<a href=\"javascript:StageRotate('fwd');\">";
    Stage_Substitute = Stage_Substitute + "<img src=\""+img_ahead+"\" alt=\"\" style=\"border:0 transparent none;\" /></a>";
    Stage_Substitute = Stage_Substitute + "<a href=\"javascript:void(0);\" onclick=\"javascript:document.getElementById('stage').style.display='none'; document.getElementById('greyout').style.display='none';\">";
    Stage_Substitute = Stage_Substitute + "<img src=\""+img_close+"\" alt=\"\" style=\"border:0 transparent none;\" /></a></span>";
    Stage_Substitute = Stage_Substitute + "<span id=\"bildUnterschrift\"></span>";
    Stage_Substitute = Stage_Substitute + "</div>";
    
    document.getElementById("stage").innerHTML = Stage_Substitute;
    
    var StageVideo_Substitute = "<a href=\"\" style='display:block;width:520px;height:380px' id=\"player\"></a>";
    StageVideo_Substitute = StageVideo_Substitute + "<br />";
    StageVideo_Substitute = StageVideo_Substitute + "<div style=\"width:inherit;\">";
    StageVideo_Substitute = StageVideo_Substitute + "<span style=\"float:right;\">";
    StageVideo_Substitute = StageVideo_Substitute + "<img src=\""+img_trenner+"\" alt=\"\" style=\"border:0 transparent none;\" />";
    StageVideo_Substitute = StageVideo_Substitute + "<a href=\"javascript:void(0);\" onclick=\"Stage_VideoArise();\">";
    StageVideo_Substitute = StageVideo_Substitute + "<img src=\""+img_close+"\" alt=\"\" style=\"border:0 transparent none;\" /></a>";
    StageVideo_Substitute = StageVideo_Substitute + "</span>";
    StageVideo_Substitute = StageVideo_Substitute + "<span id=\"Video_Unterschrift\"></span>";
    StageVideo_Substitute = StageVideo_Substitute + "</div>";
    
    document.getElementById("stage_video").innerHTML = StageVideo_Substitute;
    
}

function ChangeTab(reiter, GUID_Folgeseite)
{
	// constants
	var tabNoDisplay = "none";
	var tabDisplay = "block";

	var parentReiter = reiter.parentNode;  // parent node around tabs
	var anzReiter = parentReiter.getElementsByTagName("span").length;  // number of tabs
	var anzSubcontent = window.document.getElementById("subcontent").getElementsByTagName("div").length;  // number of subcontent areas
	var myCounter = 0;  // counter
	
	var subContents = new Array();  // array of subcontents
	
	// push only real subcontent divs to subcontent array
	while (myCounter < anzSubcontent) {
		if (window.document.getElementById("subcontent").getElementsByTagName("div")[myCounter].className == "subcontent") {
			subContents.push(window.document.getElementById("subcontent").getElementsByTagName("div")[myCounter]);
		}
		
		myCounter++;
	}
		
	myCounter = 0;  // reset counter
	
	window.document.getElementById("stage").style.display = "none";  // set element invisible
	
	// reset all tabs and mark clicked tab, fade in referenced content
	while (myCounter < anzReiter) {
		parentReiter.getElementsByTagName("span")[myCounter].className = "kleinerReiter";
		subContents[myCounter].style.display = tabNoDisplay;

		if (parentReiter.getElementsByTagName("span")[myCounter] == reiter) {
			reiter.className = "kleinerReiter_active";
			//window.document.getElementById("aktuellerReiter").innerHTML	= myCounter;		
			subContents[myCounter].style.display = tabDisplay;
		}

		myCounter++;
	}
}

// global variables
var imageGroup;  // variable for image array
var aktBild;	 // clicked image

function StageDive(thumbnail)
{
	var maxBreite = 600;  // constant defining maximum width of detail picture
	var minBreite = 160;  // constant defining minimum width of detail picture

	// constants for creating an image element containing basic attributes
	var bigPic = window.document.createElement("img");
	var bigPicSrc = window.document.createAttribute("src");
	var bigPicAlt = window.document.createAttribute("alt");
	var bigPicStyle = window.document.createAttribute("style");
	
	var thumbName = thumbnail.name;  // name attribute of clicked image
	var anzBilder = thumbnail.parentNode.parentNode.getElementsByTagName("span").length;  // number of images in gallery
	
	var bodyBreite;  // get width of html body
	var bodyHoehe;  // get height of html body

	if (window.document.body.offsetWidth > window.document.documentElement.clientWidth)
		bodyBreite = window.document.body.offsetWidth;
	else
		bodyBreite = window.document.documentElement.clientWidth;
	
	if (window.document.body.offsetHeight > window.document.documentElement.clientHeight)
		bodyHoehe = window.document.body.offsetHeight;
	else
		bodyHoehe = window.document.documentElement.clientHeight;
	
	window.document.getElementById("greyout").style.display = "block";
	window.document.getElementById("greyout").style.width = bodyBreite + "px";
	window.document.getElementById("greyout").style.height = bodyHoehe + "px";
	
	while (window.document.getElementById("stage").offsetWidth > 160) {
		window.document.getElementById("stage").style.width = "160px";
	}
		
	// unset variables
	aktBild = null;
	imageGroup = null;
	
	imageGroup = new Array();  // array for group of images
	
	var j = 0;  // counter
	
	// push images to array
	for (var i = 0; i < anzBilder; i++) {
		if (thumbnail.parentNode.parentNode.getElementsByTagName("span")[i].getElementsByTagName("img")[1].name == thumbName) {
			imageGroup[j] = new Object();
			imageGroup[j]["Bildindex"] = i;
			imageGroup[j]["Bildobjekt"] = thumbnail.parentNode.parentNode.getElementsByTagName("span")[i].getElementsByTagName("img")[1];
			imageGroup[j]["Bildpfad"] = thumbnail.parentNode.parentNode.getElementsByTagName("span")[i].getElementsByTagName("img")[1].src;
			imageGroup[j]["Bildhoehe"] = thumbnail.parentNode.parentNode.getElementsByTagName("span")[i].getElementsByTagName("img")[1].style.height;
			imageGroup[j]["Bildbreite"] = thumbnail.parentNode.parentNode.getElementsByTagName("span")[i].getElementsByTagName("img")[1].style.width;
			imageGroup[j]["Beschreibung"] = thumbnail.parentNode.parentNode.getElementsByTagName("span")[i].getElementsByTagName("dfn")[0].innerHTML;
			
			if (thumbnail.parentNode.parentNode.getElementsByTagName("span")[i].getElementsByTagName("img")[1] == thumbnail) {
				imageGroup[j]["Startbild"] = true;
				aktBild = j;
			}
			else
				imageGroup[j]["Startbild"] = false;

			j++;
		}
	}
	
	window.document.getElementById("stage").replaceChild(bigPic, window.document.getElementById("stage").firstChild);  // put created image element to stage

	// fill image attributes
	bigPicSrc.nodeValue = thumbnail.src;
	bigPicAlt.nodeValue = "";

	bigPic.setAttributeNode(bigPicSrc);
	bigPic.setAttributeNode(bigPicAlt);		
	bigPic.style.border = "0 none transparent";
	
	// make stage visible
	window.document.getElementById("stage").style.display = "block";
	
	// set stage size and adjust at window center
	if (bigPic.offsetWidth > maxBreite) {
		bigPic.style.height = Math.round(bigPic.offsetHeight / (bigPic.offsetWidth / maxBreite)) + "px";
		bigPic.style.width = maxBreite + "px";
	}
	else {
		bigPic.style.height = thumbnail.style.height;
		bigPic.style.width = thumbnail.style.width;
	}
	
	if (bigPic.offsetWidth < minBreite) {
		window.document.getElementById("stage").style.height = (bigPic.offsetHeight + 25) + "px";
		window.document.getElementById("stage").style.width = minBreite + "px";
	}
	else {
		window.document.getElementById("stage").style.height = (bigPic.offsetHeight + 25) + "px";
		window.document.getElementById("stage").style.width = (bigPic.offsetWidth) + "px";
	}
	
	var stageBreite = window.document.getElementById("stage").offsetWidth;
	var stageHoehe = window.document.getElementById("stage").offsetHeight;

	var myLeftValue = Math.round((bodyBreite / 2) - (stageBreite / 2));
	//var myTopValue = Math.round((bodyHoehe / 2) - (stageHoehe / 2));
	
	//if (myTopValue > 0)
	//	window.document.getElementById("stage").style.top = myTopValue + "px";
	//else
	//	window.document.getElementById("stage").style.top = "0px";
	
	window.document.getElementById("stage").style.top = "130px";
		
	window.document.getElementById("stage").style.left = myLeftValue + "px";
	// window.document.getElementById("stage").lastChild.style.width = stageBreite - 17 + "px";
	window.document.getElementById("bildUnterschrift").innerHTML = thumbnail.nextSibling.innerHTML;  // set image description as subheadline
	
	window.scrollTo(0, 0);
}

function Stage_videoDive(Video, Ueberschrift, flowplayer_swf)
{	
	document.getElementById("player").href = Video;
	document.getElementById("Video_Unterschrift").innerHTML = Ueberschrift;
	
	flowplayer("player", flowplayer_swf);
	
	// Breite der Webseite setzen	
	
	var bodyBreite;  // get width of html body
	var bodyHoehe;  // get height of html body
	
	if (window.document.body.offsetWidth > window.document.documentElement.clientWidth)
		bodyBreite = window.document.body.offsetWidth;
	else
		bodyBreite = window.document.documentElement.clientWidth;
		
	if (window.document.body.offsetHeight > window.document.documentElement.clientHeight)
		bodyHoehe = window.document.body.offsetHeight;
	else
		bodyHoehe = window.document.documentElement.clientHeight;
	
	// Hintergrund eingrauen
	
	window.document.getElementById("greyout").style.display = "block";
	window.document.getElementById("greyout").style.width = bodyBreite + "px";
	window.document.getElementById("greyout").style.height = bodyHoehe + "px";
		
	// make Video stage visible
	
	window.document.getElementById("stage_video").style.display = "block";
	
	// set stage size and adjust at window center
	
	var myLeftValue = Math.round((bodyBreite / 2) - 260);
		
	window.document.getElementById("stage_video").style.left = myLeftValue + "px";
		
	window.scrollTo(0, 0);
				
}

function Stage_VideoArise() {

	// Hintergrund entgrauen	
	
	document.getElementById("greyout").style.display='none';
	
	// make stage hidden
		
	document.getElementById("stage_video").style.display='none'; 

	//Flow player stoppen
	
	flowplayer().stop();
	
}
	
function StageRotate(direction)
{
	var anzBilder = imageGroup.length - 1;  // index number of images in array

	// scrolling images forward
	if (direction == "fwd") {
		if (aktBild < anzBilder)
			aktBild++;
		else
			aktBild = 0;
	}
	
	// scrolling images reverse
	if (direction == "rev") {
		if (aktBild > 0)
			aktBild--;
		else
			aktBild = anzBilder;
	}
	
	window.document.getElementById("stage").getElementsByTagName("img")[0].src = imageGroup[aktBild]["Bildpfad"];
	window.document.getElementById("stage").getElementsByTagName("img")[0].style.height = imageGroup[aktBild]["Bildhoehe"];
	window.document.getElementById("stage").getElementsByTagName("img")[0].style.width = imageGroup[aktBild]["Bildbreite"];
	window.document.getElementById("bildUnterschrift").innerHTML = imageGroup[aktBild]["Beschreibung"];
	window.document.getElementById("stage").style.height = (window.document.getElementById("stage").getElementsByTagName("img")[0].offsetHeight + 25) + "px";
	
	if (window.document.getElementById("stage").getElementsByTagName("img")[0].offsetWidth >= 160)
		window.document.getElementById("stage").style.width = (window.document.getElementById("stage").getElementsByTagName("img")[0].offsetWidth) + "px";
	else
		window.document.getElementById("stage").style.width = "160px";

	var bodyBreite;  // get width of html body
	var bodyHoehe;  // get height of html body

	if (window.document.body.offsetWidth > window.document.documentElement.clientWidth)
		bodyBreite = window.document.body.offsetWidth;
	else
		bodyBreite = window.document.documentElement.clientWidth;
	
	if (window.document.body.offsetHeight > window.document.documentElement.clientHeight)
		bodyHoehe = window.document.body.offsetHeight;
	else
		bodyHoehe = window.document.documentElement.clientHeight;
		
	var stageBreite = window.document.getElementById("stage").offsetWidth;
	var stageHoehe = window.document.getElementById("stage").offsetHeight;
	var myLeftValue = Math.round((bodyBreite / 2) - (stageBreite / 2));
	
	window.document.getElementById("greyout").style.width = bodyBreite + "px";
	window.document.getElementById("greyout").style.height = bodyHoehe + "px";

	//var myTopValue = Math.round((bodyHoehe / 2) - (stageHoehe / 2));
	
	//if (myTopValue > 0)
	//	window.document.getElementById("stage").style.top = myTopValue + "px";
	//else
	//	window.document.getElementById("stage").style.top = "0px";
	
	window.document.getElementById("stage").style.top = "130px";

	window.document.getElementById("stage").style.left = myLeftValue + "px";
	// window.document.getElementById("stage").lastChild.style.width = stageBreite - 17 + "px";
}

// global variables for drag & drop
var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;

function draginit()
{
	alert("draginit");
	document.onmousemove = drag;
	document.onmouseup = dragstop;
}

function dragstart(element)
{
	dragobjekt = element;
	dragx = posx - dragobjekt.offsetLeft;
	dragy = posy - dragobjekt.offsetTop;
}

function dragstop()
{
	alert("dragstop");
	document.getElementById("stage").className = null;
	dragobjekt=null;
}

function drag(ereignis)
{
	alert("drag");
	posx = document.all ? window.event.clientX : ereignis.pageX;
	posy = document.all ? window.event.clientY : ereignis.pageY;
		
	if (dragobjekt != null) {
		dragobjekt.className = "transparenz";
		dragobjekt.style.left = (posx - dragx) + "px";
		dragobjekt.style.top = (posy - dragy) + "px";
	}
}