var gCurrentView = global.start;
var gRolloutPanel = new Array();
var gCurrentThumbs = new Array();
var gCurrentThumbIndex = 0;
var gTimer;
var gOffsetX;
var gOffsetY;
var gMovieWindow;
var gMovie;
var gSaveThumb;
var gSaveThumbPosition;
var gThumbsMoved = false;
var gActiveCategorie = null;


function init(){
         var fname = "init";
         showDebug(fname, "start");

         initImages();
         initNavi();
         initMovies();
         initLinks();
         initTitles();
         initRollOuts();
         showStatic();
         showStart();

         
         gOffsetX = $("div[id=mainDiv]").position().left + $("div[id=moveDiv]").position().left;
         gOffsetY = $("div[id=mainDiv]").position().top + $("div[id=moveDiv]").position().top;
         showDebug(fname,  "end");
         
}


function initTitles(){
	for(var i=0; i<jsonData.titel.length; i++){
		var title = jsonData.titel[i];
		title.id += ":TITLE"
		var cmd = "<div id=\"" +title.id+ "\"><nobr><font class=\"title\" id=\""+title.id+"_font\" >" + title.caption + "</font></nobr></div>";
		$("div[id=moveDiv]").append(cmd);
		var domObject =  document.getElementById(title.id);//$("div[id="+title.id+"]").get();

		$("div[id="+title.id+"]").hide();
		domObject.style.fontfamily = global.fontFamily;
		domObject.style.fontface = global.fontSize;
		domObject.style.position = "absolute";
		domObject.name = i;
		$(domObject).click(titleOnClickHandler);	
	}
}
function showStatic(){
         // show all head content
	loadImages($("*[id*="+global.head+"]").get());
        loadImages($("*[id*="+global.foot+"]").get());
         

}

function showStart(){
         loadImages($("*[id*="+global.start+"]").get());
          // FIXME: Specific stuff
         showNaviButtons(false);
}

// Load all images from JsonFile but dont show them
function initImages(){

	for(var i=0; i<jsonData.bilder.length; i++){
		var image = jsonData.bilder[i];
		createDomObject("img", image.id);
		var domObject =  document.getElementById(image.id);
		// load image but dont show
		$("img[id="+image.id+"]").hide();
		// set Values for image
		domObject.name =  i;


		//domObject.src = image.src;
		domObject.src = "NOTSETNULL";
		domObject.style.position = "absolute";
		domObject.style.left = image.posX + "px";
		domObject.style.top = image.posY + "px";
		$(domObject).mouseover(imageOnMouseOverHandler);			
		$(domObject).mouseout(imageOnMouseOutHandler);			
		$(domObject).click(imageOnClickHandler);
		
		// init targets
		if(image.show != null && typeof image.show == "string" && image.show.length > 0 ){
			var target = image.show;
			image.show = new Array();
			
			if(target.match("/.+(?=#)*/") != null){ // split 
				var buffer = target.split("#");
				for(var x = 0; x < buffer.length; x++){
					image.show[image.show.length] = buffer[x];
					
				}
			} else {
				image.show[0] = target;
			}
		} else{
			image.show = new Array();
		}
		

	} // for all images

	

} // init images

function initRollOuts(){
	for(var i=0; i<jsonData.bilder.length; i++){
		// check if Rollout Panel is needed and create
		checkForRollOutPanel(jsonData.bilder[i]);
	}
}
function checkForRollOutPanel(image){
	
	
	for(var index = 0; index < image.show.length; index++){
		imageTarget = image.show[index];
		if(imageTarget == null || imageTarget == undefined)
			continue;
			
		if(imageTarget.length > 0 && imageTarget.match("ROLLOUT:*")){
			//alert(imageTarget);
			pattern = getValue(imageTarget);
			if(pattern != null){

				/** FIXME: Nur Titles möglich - und auch da abfrage methode riskant 
				 * da auch noch andere div dem pattern matchen könnten
				*/
				var buffer = $("div[id*="+pattern+"]").get();
				//alert(buffer.length);
				var objects = new Array();
				var count = 0;
				// check if all objects exists
				for(var i = 0; i < buffer.length; i ++){
					// FIXME: Abfrage ob es sich um ein Movie handelt - type einführen

					//alert(buffer[i]);
					if(buffer[i] != null && buffer[i].id.match(".+:MOVIE\*") == null){
						objects[count] = buffer[i];
						count++;
					}
				}
				// create id:
				if(objects.length > 0){
						 //var id = objects[0].id.replace("/:TITLE\*",":ROLLOUT");
						 var id = objects[0].id;
						 id = id.replace(":TITLE",":ROLLOUT");
						 var domObject = document.getElementById(image.id);
						 //$(domObject).show();
						 domObject.src = image.src;

						 var x = image.posX;
						 var y = (getNumber(image.posY) + getNumber(domObject.height) ); 


						 //alert(domObject.height);


						// sort objects
						objects = sortToFoldersNumbers(objects, 1, false);
						for(var i = 0; i< objects.length; i++){
							//alert(objects[i].id);
						}


						if(image.src_linie != null && image.src_linie.length > 0){
									createDomObject("img", image.src_linie);
									var bgImage = document.getElementById(image.src_linie);
									bgImage.src = image.src_linie;	
									bgImage.style.position = "absolute";
									bgImage.style.top = "0px";
									bgImage.style.left = "0px";


									image.show[index] = new RollOutPanel(domObject, x, y, objects, id, domObject, global.rollOutSpacing,global.rollOutSpaceLeft, bgImage, bgImage.height, global.animSpeed, imageOnMouseOutHandler);

						} else {
							image.show[index] = new RollOutPanel(x, y, objects, id, domObject, global.rollOutSpacing);
						}


				}

			} // if pattern != null
		} // if Match Rollout
	} // for all
}

function getValue(string){
	var buffer = string.split(":");
	if(buffer.length > 0){
		return buffer[1];
	} else {
		showDebug("Error parsing Value from: " + string);
		return null;
	}	
}
function openRollOut(pattern, posX, posY){
       var fname = "openRollOut";
       


}

function initMovies(){
         var fname = "initMovies";
          for(var i=0; i<jsonData.filme.length; i++){
                var movie = jsonData.filme[i];
                // FIXME: type einführen
                movie.id += ":MOVIE";
                //alert(movie.id);
                createDomObject("div", movie.id);
                var domObject =  document.getElementById(movie.id);
                // load image but dont show
                $("div[id="+movie.id+"]").hide();
                // set Values for image
                domObject.style.position = "absolute";
                domObject.style.left = movie.posX + "px";
                domObject.style.top = movie.posY + "px";
                domObject.name = i; // save embedded player infos
                $("div[id="+movie.id+"]").append("<img name=\""+i+"\" src=\""+movie.thumb+"\" id=\""+movie.id+"_imageThumb\"></img>");
                $("div[id="+movie.id+"]").append("<font class=\"title\"  id=\""+movie.id+"_font\">"+movie.caption+"</font>");
                $("img[id="+movie.id+"_imageThumb]").click(movieOnClickHandler);
                $("font[id="+movie.id+"_font]").click(movieOnClickHandler);
                $("font[id="+movie.id+"_font]").get(0).name = i;
                $("font[id="+movie.id+"_font]").get(0).style.position = "relative";
                $("font[id="+movie.id+"_font]").get(0).style.top = "-3px";
                $("font[id="+movie.id+"_font]").get(0).style.left = "5px";
               // alert(movie.id);


       }
}

function initNavi(){
	
  
  for(var i=0; i<jsonData.thumbs.length; i++){
		  var image = jsonData.thumbs[i];
		  createDomObject("img", image.id);
		  var domObject =  document.getElementById(image.id);
		  // load image but dont show
		  $("img[id="+image.id+"]").hide();
		  // set Values for image
		  domObject.name =  i;
		  domObject.src = image.src;
		  domObject.style.position = "absolute";
		  domObject.style.top = global.naviPosY + "px";

		  //domObject.style.top = image.posY + "px";
		  // FIXME : onMouseOver einführen
		  
		 if(global.naviAnimation == "On"){
		 	$(domObject).mouseover(thumbOnMouseOverHandler);			
		  	$(domObject).mouseout(thumbOnMouseOutHandler);			
		  }
		  $(domObject).click(thumbOnClickHandler);
		  
	} // for all images

}



function initLinks(){
         var fname = "initLinks";
}




function createDomObject(type, id){
         //create HTML command
         var cmd = "<" + type + " id=\"" +id+ "\">";
         //var newObject = document.createElement(type);
         if(global.debug > 2)
                  showDebug("createDomObject", cmd);
         // add DOM Object
         $("div[id=moveDiv]").append(cmd);
         
         
}

function showDebug(functionName, msg){
         if(global.debug > 0)
         	;//alert("DebugMessage from Function: " + functionName + "\n" + msg);

}

function movieOnClickHandler(event){
	var fname = "movieOnClickHandler";
	var movie = jsonData.filme[Number(event.currentTarget.name)];
	//movieWindow = window.open(movie.embedded,"movieWindow","width=400,height=310","scrollbars=no", "toolbar=no", "location=no", "directories=no", "status=no", "menubar=no", "copyhistory=no");
	//movieWindow = window.open(movie.embedded,"movieWindow","width=400,height=310");
	//checkFlash();
	
	gMovie = movie;
	gMovieWindow = window.open("movieWindow.html","movieWindow","width=400,height=310","scrollbars=yes", "toolbar=yes", "location=yes", "directories=yes", "status=yes", "menubar=yes", "copyhistory=no");
	
	//movieWindow.moveTo(global.moviePlayerPosX,global.moviePlayerPosY);
	

         
}

function movieCallback(){
	
	gMovieWindow.load(gMovie.embedded);
	gMovieWindow.focus();
	gMovieWindow.moveTo(global.moviePlayerPosX,global.moviePlayerPosY);
}

function titleOnClickHandler(event){

	var fname = "titleOnClickHandler";
	var title = jsonData.titel[event.currentTarget.name];
		
	//alert(title.id);
	// FIXME: keine Verschachtelung von RollOuts möglich
	
	/*var hide = getStepUp(gCurrentView, 1);
	var last = getStepUp(gCurrentView, 2);
	var current = getStepUp(title.show, 2);
	$("*[id*="+hide+"]").hide();*/
	
	var objects = $("div[id*=:ROLLOUT]").get();
	
	for(var i = 0; i < objects.length; i++){
		
		if(objects[i].name != null && objects[i].name.mId != "undefined"){
			objects[i].name.hide(event);
		}
	}
	/*$("*[id*="+hide+"][id*=:TITLE]").show();
	$("*[id*="+title.show+"]").show();
	var headtext = getStepUp(title.show, 1)//;  + global.headtextName;
	showLocalImages(headtext);
	$("*[id*=" + headtext+"]").show();
	gCurrentView = title.show;*/
	updateCurrentView(title.show,1 );
	loadNavi();
	
}


	
	
function showNaviButtons(flag){
	//alert(flag);
	if(flag){
		loadImages($("*[id*=head/linielang.jpg]").get());
		loadImages($("*[id*=head/vorbutton.jpg]").get());
		loadImages($("*[id*=head/backbutton.jpg]").get());
	} else{
		$("*[id*=head/linielang.jpg]").hide();
		$("*[id*=head/vorbutton.jpg]").hide();
		$("*[id*=head/backbutton.jpg]").hide();
	}
	
}

function loadNavi(){

	
	// Set last selection back to normal image
	if(gSaveThumbPosition < gCurrentThumbs.length){
		gCurrentThumbs[gSaveThumbPosition].src = gSaveThumb;
	}
		
	$("img[id*=thumb]").hide();	
	
	//alert(gCurrentView);
	if(gCurrentView == global.start)
		return;
	var categorie = "";
	var step = 2;
	if(gCurrentView[gCurrentView.length-1] == "/")
		step = 3;
		
	while(categorie.length == 0 && step >=0 ){
		categorie =  getStepUp(gCurrentView, step);
		//alert(categorie);
		step--;
	}
	//alert(categorie);
	
	
	
	var thumbObjects = $("img[id*=thumb][id*="+categorie+"]" ).get();
	
	//FIXME: Specific stuff
	showNaviButtons( (thumbObjects.length != 0)  );
	
		
	
	var knownPages = new Array();
	var knownPagesCount = new Array();
	// sort to pages
	//sortToPages(knownPagesCount);
	thumbObjects = sortToPages(thumbObjects);
	thumbObjects = sortToFoldersNumbers(thumbObjects);
	var showObjects = new Array();
	var showObjectsPos = new Array();
	
	
	
	var posX = global.naviPosX;
	for(var i=0; i < thumbObjects.length; i++){
		
		var type = getStepUp(thumbObjects[i].src, 2) + "\*";
		//alert(type);
		
		for(var x=0; x < thumbObjects.length; x++){
			 //alert(thumbObjects[x].src + " XXX " + type+" XXX "+thumbObjects[x].src.match(type));
			 if( thumbObjects[x].src.match(type) != null && !isElementOf(thumbObjects[x], showObjects)){
				showObjects[showObjects.length] = thumbObjects[x];
				thumbObjects[x].style.left = posX + "px";
				loadImages($(thumbObjects[x]).get());
				//alert("test");
				//showObjectsPos[showObjectsPos.length] = posX;
				posX += global.thumbsize;
				//alert("True");
			 	// get currentThumb Index
			 	if(thumbObjects[x].id.match(".+"+gCurrentView+"*/")){
			 		gCurrentThumbIndex = showObjects.length -1;
			 		//alert(showObjects[showObjects.length-1].src);
			 		
			 		
			 	}
			 }
			 
					 
		}
		posX += global.naviSpacing;
	
		
	
	}
	
	if(global.naviAnimation == "On"){ // Set Background for animation to avoid fliockering
		var domBlank = $("img[id*=head/quadratweiss.png]").get(0);		
		$(domBlank).show();
		domBlank.style.width = posX + global.thumbsize;
		domBlank.style.height = global.thumbsize + "px";
		domBlank.style.left =global.naviPosX;
		domBlank.style.top = global.naviPosY;
		
		/*alert(domBlank.style.height);
		alert(domBlank.style.width);
		alert(domBlank.style.left);
		alert(domBlank.style.top);*/
		
		$(domBlank).mouseover(thumbOnMouseOverHandler);
	}
	
	
	gCurrentThumbs = showObjects;

	changeNaviImages(false);
	
	
	
	
	
}

function changeNaviImages(rebuildOld){
	if(rebuildOld== null)
		rebuildOld= true;
		
	// Set last selection back to normal image
	if(gSaveThumbPosition < gCurrentThumbs.length && rebuildOld){
		gCurrentThumbs[gSaveThumbPosition].src = gSaveThumb;
	}
	
	// Set Current thumb to selection image
	if(gCurrentThumbIndex < gCurrentThumbs.length){
		gSaveThumb = gCurrentThumbs[gCurrentThumbIndex].src;
		gSaveThumbPosition = gCurrentThumbIndex;
		gCurrentThumbs[gCurrentThumbIndex].src =  global.naviSelectionImage;
	}
}
	
function sortToFoldersNumbers(array, stepUp, checkPageFlag){
	
	if(stepUp == null)
		stepUp = 2;
	if(checkPageFlag == null)
		checkPageFlag = true;
	// sort ShowObjects for Folder numbers
	//alert(array.length);
	var result = new Array();
	var indikator = new Array();
	for(var i = 0; i < array.length; i++){
		// Get Categorie Folder
		
		//alert(array[i].id);
		
		var categorie= getStepUp(array[i].id,stepUp);
		
		var buffer = categorie.split("/");
		if(buffer.length > 0)
			categorie= buffer[ (buffer.length-2) ];
		
		// Get Page
		var page = getStepUp(array[i].id,(stepUp-1));
		buffer = page.split("/");
		if(buffer.length > 0)
			page= buffer[ (buffer.length-2) ];
		
		
		var buffer = categorie.split("_");
		var x = 0;
		var number = Number(buffer[0]);
		
		if(result.length == 0){
			result.splice(x,0,array[i]);
			indikator.splice(x,0,number);			
		} else {
			while(x <  result.length){
				var currPage = getStepUp(result[x].id,(stepUp-1));
				buffer = currPage.split("/");
				if(buffer.length > 0)
					currPage= buffer[ (buffer.length-2) ];
				
				//alert("Number " + number);
				//alert("Indikator: " + indikator[x])
				//alert("Page " + page);
				//alert("Current Page " + currPage);
				
				if(indikator[x] <= number && checkPageFlag == false){
					break;
				} else if(indikator[x] <= number && page.toLowerCase() == currPage.toLowerCase() ){
					break;
					
				}
				
				x++;
			}
			result.splice(x,0,array[i]);
			indikator.splice(x,0,number);			
		}
		
	}
	
	
		
	return result;
	
	
}

function sortToPages(array){
	result = new Array();
//	alert(array[0].src);
	for(var i = 0; i < array.length; i++){
		var ci =  getIndikator(array[i].src);
		var li = 1;
		var x = 0;
		while(ci > li && x < result.length){
			 li = getIndikator(result[x].src);
			// alert(li + " " + ci);
			 if(li >= ci)
			 	break;
			 x++;
		}
		if(x == result.length)
			result[x] = array[i];
		else{
			//alert("Insert . " + result[x].src);
			result.splice(x,0,array[i]);
			//alert(result[x].src);
		}
	}
	//alert(result[0].src);
	return result;
}

function getIndikator(string){
	//alert(string);
	var indikator = getStepUp(string, 1);
	indikator = indikator[indikator.length-3] + indikator[indikator.length-2];
	return Number(indikator);
	
}
function sum(array, index){

	var result = 0;
	for(var i = 0; i <= index; i++){
		result += array[i];	
	}
	return result;
}

function isElementOf(element, array){
	//alert(element);
	for(var i = 0; i < array.length; i++){
		if(array[i].src == element.src){
			return true;
		}
	}
	
	return false;
}

function thumbOnClickHandler(event){
	var fname = "imageOnClickHandler";
	var image = jsonData.thumbs[event.target.name];
	
	var target = getStepUp(image.src, 1);
	
	for(var i= 0; i<gCurrentThumbs.length; i++){
		if(image.id == gCurrentThumbs[i].id) {
			gCurrentThumbIndex = i;
		}
	}
	//alert(image.id);
	if(target.length > 0){ // No Rollout but target
		updateCurrentView(target,2,false );

	}

}

function updateCurrentView(target, stepUp, updateNavi){
	
	
	if(stepUp == null)
		stepUp = 1;
	
	if(updateNavi == null)
		updateNavi = true;
		
		
	if(target.match("http://*")){
		window.open(target);
		return;
	}
	
	
	
	if(target.match("MAILTO:*") != null){
		target = target.replace("MAILTO:", "");
		
		window.location = ("mailto:"+ target);
		return;
	}
		
	
	var hide = getStepUp(gCurrentView, 1);
	if(gCurrentView[gCurrentView.length-1] == "/" && gCurrentView != global.start ){
		hide = getStepUp(gCurrentView, 2);	
		if(hide.length == 0)
			hide = getStepUp(gCurrentView, 1);
	}
	
	
		
	//alert(hide);
	$("*[id*="+hide+"]").hide();
	
	// Hide all images in root Folder
	//alert(gCurrentView);
	//alert(hide);
	var headtext = getStepUp(gCurrentView, stepUp);
	showLocalImages(headtext, false);
	
	
	//alert(target);
	//alert(global.start);
	if(target == global.start){
		showStart();
		changeActiveCategorie(target)
		gCurrentView = global.start;
		// Show Special images
		loadImages($("*[id*="+hide+"][id*=:TITLE]").get());
		loadImages($("*[id*=thumb][id*="+hide+"]" ).get());
		loadNavi();
		
		return;
	}
	
	// Show all images in root Folder
	var headtext = getStepUp(target, stepUp);
	showLocalImages(headtext);
	changeActiveCategorie(headtext);	
	
	
	// Show Special images
	loadImages($("*[id*="+hide+"][id*=:TITLE]").get());
	loadImages($("*[id*=thumb][id*="+hide+"]" ).get());
	
	
	//show Target Images
	loadImages( $("*[id*="+target+"]").get());
	
	updateMovies(target);
	
	gCurrentView = target;
	
	if(updateNavi)
		loadNavi();

	changeNaviImages();
	
		
}

function updateMovies(target){
	
	//alert(target);
	var page = getStepUp(target, 1);
	if(target[target.length-1] == "/")
		page = getStepUp(target, 2);
	stepUp =2;
	while(page.length == 0 && stepUp >=0){
		page = getStepUp(target, stepUp);
		stepUp--;
	}
	//alert(page);
	// FIXME: in unload status einbauen
	// show movie thumbs
	$("*[id*=:MOVIE][id*="+page+"]").show();
	//var movies= $("div[id*=:MOVIE][id*="+target+"]").get();
	
	//for(var i= 0; i < movies.length; i++)
	//	alert(movies[i].id);
		
	//loadMovies(movieThumbs);
	
}


function loadImages(images){

	if(images.length == 0)
		return;
	
	//alert(images.length);
	for(var i = 0; i < images.length; i++){
		
		
		//alert(images[i].src);
		if(images[i].src == undefined){
			
		} else if(images[i].src.match(".+NOTSETNULL*") != null){
			images[i].src = jsonData.bilder[images[i].name].src;
			//alert(images[i].src);
		}
		//alert(images[i].id);
		$(images[i]).show();
		
		
	}
}

function showLocalImages(folder, flag){

	if(flag == null)
		flag = true;
		
	//alert(folder);
	if(folder.length == 0)
		return;
		
	//alert(folder);
	var elements = $("*[id*="+folder+"]").get();
	
	for(var i = 0; i < elements.length; i++){
		//alert(elements[i].id);
		if(elements[i].id.match(folder+"[a-zA-Z_0-9]*\.(jpg|png|gif)$") != null){
			//alert(elements[i].id);
			if(flag)
				loadImages($(elements[i]).get());
			else
				$(elements[i]).hide();
		}
	}
	
}
function thumbOnMouseOverHandler(event){
	//clearTimeout(gTimer);
	if(event.target.id.match(".+head/quadratweiss.png*") != null){
		// get nearest thumb
		var distance = 500;
		var nearest = 0;
		for(var i=0; i < gCurrentThumbs.length; i++){
			//alert(gCurrentThumbs[i].style.left);
			//alert(event.pageX);
			var delta = getNumber(event.pageX) -getNumber(gCurrentThumbs[i].style.left);
			//alert(delta);
			if(delta < distance){
				//alert(delta);
				distance = delta;
				nearest = i;
				//alert(nearest);
			}
				
		}
		thumb = gCurrentThumbs[nearest];
		//alert(thumb.id);
	} else {
		var thumb = jsonData.thumbs[event.target.name];	
	}
	
	for(var i=0; i < gCurrentThumbs.length; i++){
		if(thumb.id == gCurrentThumbs[i].id){
			var mainDom = $("*[id="+thumb.id+"]").get(0);
			var div = global.thumbSizePlus;
			var mult = div;
			// Set currentOnMouseOver Image
			//alert(mainDom.style.left);
			mainDom.style.width = Number(global.thumbsize)+Number(div)+ "px";
			mainDom.style.height = Number(global.thumbsize)+Number(div) + "px";
			
			mainDom.style.left = getNumber(mainDom.style.left) - div/2  + "px";
			mainDom.style.top = getNumber(mainDom.style.top) - div  + "px";
			// move all on left side
			
			// Move Neighbour Images 
			var x = i-1;
			var object = gCurrentThumbs[x];
			var lastObject = gCurrentThumbs[x+1];
			var extension = div;
			// Move left
			while(x >= 0  ){
				object = gCurrentThumbs[x];
								
				if( ( div-global.naviFallOff) >= 0 )
					div -= global.naviFallOff;
					
				object.style.width = Number(global.thumbsize) + Number(div) + "px";
				object.style.height = Number(global.thumbsize) + Number(div)+ "px";
				
				object.style.top = getNumber(object.style.top) - Number(div)  + "px";
				//alert(object.style.left);
				object.style.left = ( getNumber(object.style.left) - ( Number((extension / 2)) + Number(div) ) ) + "px";
				//alert(object.width);
				//alert(object.style.left);
				lastObject = object;
				extension += 2*div;
				
				x--;
				
			}
			
			div = global.thumbSizePlus;
			var x = i+1;
			var object = gCurrentThumbs[x];
			var lastObject = gCurrentThumbs[x-1];
			var extension = div;
			// Move left
			while(x < gCurrentThumbs.length  ){
				object = gCurrentThumbs[x];

				if( ( div-global.naviFallOff) >= 0 )
					div -= global.naviFallOff;
					
				object.style.width = Number(global.thumbsize) + Number(div) + "px";
				object.style.height = Number(global.thumbsize) + Number(div)+ "px";

				object.style.top = getNumber(object.style.top) - Number(div)  + "px";
				object.style.left = getNumber(object.style.left) + Number((extension / 2)) + "px";

				lastObject = object;
				extension +=2*div;
				x++;

			}
			//mainDom.style.top = mainDom.style.top - global.thumbsize;
			//var left1Dom = $("*[id="+gCurrentThumbs[i-1].id+"]").get(0);
			
			//var rightDom = $("*[id="+gCurrentThumbs[i+1].id+"]").get(0);
			
		}
	}
	
	gThumbsMoved = true;

}

function getNumber(value){
	if(typeof value != "string")
		return Number(value);
		
	if(value.match(".+px*"))
		value = value.replace("px", "");
	
	return Number(value);
}


function thumbOnMouseOutHandler(event){/*
	gTimer=setTimeout(function(){thumbOnMouseOutReact(event)}, global.mouseOverDelay);
	gThumbsMoved = false;
}

function thumbOnMouseOutReact(event){*/
	
	
	//if(!gThumbsMoved)
	//	return;
	
	var thumb = jsonData.thumbs[event.target.name];	
		
		for(var i=0; i < gCurrentThumbs.length; i++){
			if(thumb.id == gCurrentThumbs[i].id){
				var div = global.thumbSizePlus;
				
			
				var mainDom = $("*[id="+thumb.id+"]").get(0);
				mainDom.style.width = global.thumbsize + "px";
				mainDom.style.height = global.thumbsize + "px";
				mainDom.style.left = getNumber(mainDom.style.left) + div/2  + "px";
				mainDom.style.top = getNumber(mainDom.style.top) + div  + "px";
			
				// Move Neighbour Images 
				var x = i-1;
				var object = gCurrentThumbs[x];
				var lastObject = gCurrentThumbs[x+1];
				var extension = div;
				// Move left
				while(x >= 0  ){
					object = gCurrentThumbs[x];

					if( ( div-global.naviFallOff) >= 0 )
						div -= global.naviFallOff;
					
					object.style.width = Number(global.thumbsize) +"px";
					object.style.height = Number(global.thumbsize) + "px";

					object.style.top = getNumber(object.style.top) + Number(div)  + "px";
					//alert(object.style.left);
					object.style.left = ( getNumber(object.style.left) + ( Number((extension / 2)) + Number(div) ) ) + "px";
					//alert(object.width);
					//alert(object.style.left);
					lastObject = object;
					extension += 2*div;

					x--;

				}

				div = global.thumbSizePlus;
				var x = i+1;
				var object = gCurrentThumbs[x];
				var lastObject = gCurrentThumbs[x-1];
				var extension = div;
				// Move left
				while(x < gCurrentThumbs.length  ){
					object = gCurrentThumbs[x];

					if( ( div-global.naviFallOff) >= 0 )
						div -= global.naviFallOff;
					object.style.width = Number(global.thumbsize)  + "px";
					object.style.height = Number(global.thumbsize) + "px";

					object.style.top = getNumber(object.style.top) + Number(div)  + "px";
					object.style.left = getNumber(object.style.left) - Number((extension / 2)) + "px";

					lastObject = object;
					extension +=2*div;
					x++;

				}
			}
		}

}

function imageOnClickHandler(event){
	var fname = "imageOnClickHandler";
	var image = jsonData.bilder[event.target.name];
	
	//alert(image.id);
	for(var index = 0; index < image.show.length; index++){		imageTarget =image.show[index];
		if(imageTarget != null && typeof imageTarget == "string" && imageTarget.length > 0 && imageTarget.match("NAVI:\*") == null){ // No Rollout but target			
			updateCurrentView(imageTarget);


		}

		imageSpecificOnClickHandler(event);
	}

}

function changeActiveCategorie(target){
	
	
	if(gActiveCategorie != null){ // active categorei exists
		lastImage = gActiveCategorie;
		domLastObject =$("img[id="+lastImage.id+"]").get(0);
		$("img[id="+lastImage.id+"]").get(0).src = lastImage.src;
	}
	if(target == global.start)
		return;
		
	var currCategorie = getStepUp(target, 2);
	var buffer = currCategorie.split("/");
	if(buffer.length > 1)
		currCategorie = buffer[buffer.length-2];
	
	var stepUp = 2;
	while(currCategorie.length == 0){
		currCategorie = getStepUp(target, stepUp);
		stepUp--;
	}
	//alert(currCategorie);
	
	currCategorie = currCategorie.replace("/", "");
	currCategorie = currCategorie.substring(0,3);
	//alert(currCategorie);
	var buffer = $("img[id*=head/][id*="+currCategorie+"]").get();
	if(buffer.length == 0)
		buffer = $("img[id*=foot/][id*="+currCategorie+"]").get();
		
	for(var i= 0; i< buffer.length; i++){
		//alert(buffer[i].name);
		var image = jsonData.bilder[buffer[i].name];
		if(image != undefined && image.src_aktiv.length > 0){
			buffer[i].src = image.src_aktiv;
			//alert(buffer[i].src);
			gActiveCategorie = image;
		}
		
	}
	
		
}

function imageOnMouseOverHandler(event){
	
	gTimer=setTimeout(function(){imageOnMouseOverReact(event)}, global.mouseOverDelay);
	
}

function imageOnMouseOverReact(event){
	//alert("hallo");
	fname = "imageOnMouseOverHandler";
	var image = jsonData.bilder[event.target.name];
	var domImage = document.getElementById(image.id);
	
	// image is holding rolloutObject
	
	for(var index = 0; index < image.show.length; index++){
		imageTarget =image.show[index];
		if(imageTarget != null &&  typeof imageTarget != "string"){  
			//alert(imageTarget.mId);
			$("*[id*=:ROLLOUT]").hide();
			imageTarget.mPy = getNumber(domImage.height) + getNumber(image.posY) + "px";
			imageTarget.updatePosition();
			imageTarget.slideDown();


		} 

		if ( imageTarget != null && typeof imageTarget == "string" && imageTarget.length > 0){ 
			//change MouseCursor
			document.body.style.cursor = "pointer";

		}

		// change onMouseOverImage
		if(image.src_mouseover.length > 0){
			 domObject = document.getElementById(image.id);
			 domObject.src = image.src_mouseover;
		}
	}
	
	// call specific Handler
	/*if(imageOnMouseOverSpecialHandler != null)
		imageOnMouseOverSpecialHandler(imageId);*/
}



function imageOnMouseOutHandler(event){

	clearTimeout(gTimer);
	var fname = "imageOnMouseOutHandler";
	var image = jsonData.bilder[event.target.name];

	// reconstruct cursor
	document.body.style.cursor = "default";
	// images show contains the Rollout object or null
	for(var index = 0; index < image.show.length; index++){
		imageTarget =image.show[index];
		if(imageTarget != null && typeof imageTarget != "string"){
			var mousePosX = event.pageX;
			var mousePosY = event.pageY;
			var domObject = $(event.target);
			var height = domObject.height();
			var width = domObject.width();

			var objectY = domObject.position().top + gOffsetY ;
			var objectX = domObject.position().left + gOffsetX;
			//alert(parentDom.position().left);
			//alert(domObject.position().left);
			//alert(mousePosX);
			var lowerRight = objectX + width;
			var below  = (objectY + height);

			if( mousePosX >= objectX && mousePosX <=  lowerRight && mousePosY >= below ){

				// do nothuing
			} else {
				$("*[id*=:ROLLOUT]").hide();
				if(gActiveCategorie != image){
					domObject = document.getElementById(image.id);
					domObject.src = image.src;
				}
				//imageTarget.hide();
			}

		} else  if(image.src_mouseover.length > 0 && gActiveCategorie != image){
			domObject = document.getElementById(image.id);
			domObject.src = image.src;
		}
        }

}

function getStepUp(path, steps){
         if(steps == 0)
         	return path;
         //alert(path);
         // add last /
         //if(path[path.length-1] != "/")
         //	path = path+"/";
         	
         var buffer = path.split("/");
         if(buffer.length == 1){
                 return path;
         }

         var result = "";
         for(var i = 0;  i<(buffer.length - steps); i++){
                 result = result + buffer[i] + "/";
         }

         return result;

}