var picture = new Image();
var prelPic = new Image();

var currentPosition = 0;

var gesamt, playinterval, intervalinstanz, bildsrc, zielId, waitPic, rahmenId;

prelPic.src = "img/loadingAnimation.gif";

var waitId = "waitPic";

var linkTxt = 'Vergrößern';
var eleId = 'downloadlink';

var startPageImages = new Array();

//Für Bildermarkieren und Anfrage
var markedImgs = new Array();
var markId = 'marked';
var formId = 'marker';

var FILEURL;

var activeFader =false;

// für Cookie
var myCookiePrefix = 'checkedIMG_';

// Id des Exif Anzeige (Ziel) containers
var exifContainer = 'exifInfo';

var container, propH, propW;


function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function getCookieNamesByPrefix(prefix) {
	var ca = document.cookie.split(';');
	var names = new Array();
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(prefix) == 0) {
			var tmpcook = c.split('=');
			names[names.length] = tmpcook[0];
		}
		
	}
	return names;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

function setPageCount( PageCount ){
	gesamt = PageCount;
}

function getMarkedImgs(){
	var savedMarkedImgs = getCookieNamesByPrefix( myCookiePrefix );
	
	for( var i = 0; i <= savedMarkedImgs.length; i++ ){
		var key = 0;
		if(  savedMarkedImgs[i] ){
			key = savedMarkedImgs[i].replace(myCookiePrefix, '' );
			//eval( "key = savedMarkedImgs[" + i + "].replace(/" + myCookiePrefix +"/g, '' );" );
			markedImgs[key] = 1;
		}
	}
	return markedImgs;
}

//Ruft die loadgaleryPic Funktion in einem Zeitinterval immer wieder auf. Rekursiv funktionierte nicht. (too much recursion)
function startinterval( bild, id, frameid, fileUrl, current, exifId ) {
	
	if (!activeFader){

			//document.getElementById('checkedPics').innerHTML = countAllCookies();

		
		activeFader = true;
		currentPosition = current;
		picture = new Image();
		
		rahmenId = frameid;
		bildsrc = bild;
		zielId = id;
			
		intervalinstanz = setInterval( 'loadGaleryPic()', 200 );
		
		//DateiLink setzen
		if( fileUrl ){
			setFileLink( eleId, fileUrl, linkTxt );
		}
		if(exifId){
			getExifForImg( exifId );
		} else {
			getExifForImg( 'thmb1' );
		}
	}
}
// Galerie Bild laden und positionieren
function loadGaleryPic() {

	
	
	bild = bildsrc;
	
	container = document.getElementById(rahmenId);
	
	propH = container.offsetHeight;
	propW = container.offsetWidth;
	
	if( !picture.src ) {
		picture.src = bild;		
	}	
	if( !picture.complete ){
		
			//Ladebalken
			//wenn kein waitPic gesetzt, waitpic setzen
			if( !waitPic ) {
				
				waitPic = document.getElementById(waitId);
				waitPic.style.display="block";
				waitPic.height = prelPic.height;
				waitPic.width = prelPic.width;
				waitPic.src = prelPic.src;
				
				//Positionierung
				propH = propH - waitPic.height;
				
				if( propH % 2 != 0 ){
					propH--;
				}
				
				waitPic.style.marginTop = propH / 2 + 'px';				
				
			}
			
	} else {

		//wenn bild geladen, bild der box zuweisen
		var newpic = document.getElementById(zielId);
		
		
		

		
		// WaitPic auf unsichtbar schalten
		waitPic = document.getElementById(waitId);
		waitPic.style.display="none";
		
		fadeFromTo(picture.src,newpic);
		
		
		//newpic.style.position = 'inherit';
	
		
		
		
		//newpic.src = picture.src;
		//newpic.height = picture.height;
		//newpic.width = picture.width;
		
		
		//waitpic clearen für nächsten Ladevorgang, sonst wirds net beim nächsten mal angezeigt
		waitPic = null;
		
		checkMarker();
		clearInterval( intervalinstanz );
	}
	

}

function setPosition(newpic){
		
		//Positionierung
		propH = propH - picture.height - 4;

		if( picture.width / picture.height > 1 ){
			//Querformat
			
			if( propH % 2 != 0 ){
				propH--;
			}

			newpic.style.marginTop = propH / 2 + 'px';
			
			//falls Querformat, aber zu schmal
			
		} else {
			//Hochformat
			newpic.style.marginTop = '0px';
		}
}

// Aktuelle "Seitenzahl" anzeigen
function showCurrentBlock(){
	
	allBlocks = gesamt;
	
	for( var i = 1; i < allBlocks; i++ ){
		
		if( document.getElementById( "galIndex" + i ).style.display == "block" )
			break;
			
	}
	
	document.getElementById( "number" ).innerHTML = i + ' / ' + allBlocks;
	
}

// Downloadlink setzen / aktualisieren
function setFileLink( eleId, url, txt ){
	
	document.getElementById( eleId ).innerHTML = '<a target="_blank" href="' + url + '">' + txt + '</a>';
	FILEURL = url;
		
}

// Zwischen Display NONE und BLOCK wechseln vom ausgewählten Element
function changeToBlock( id ){
	
	allBlocks = gesamt;
	for( var i = 1; i < allBlocks+1; i++ ){
		
		document.getElementById( "galIndex" + i ).style.display = "none";
	}
	
	document.getElementById( "galIndex" + id ).style.display = "block";
	
	showCurrentBlock();	
	
}

// Index Vorwärts Blättern
function nextBlock(){

	allBlocks = gesamt;
	allBlocks = Math.round( allBlocks ) + 1;
	for( var i = 1; i < allBlocks; i++ ){
		if( document.getElementById( "galIndex" + i ).style.display == "block" && ( i + 1 <= allBlocks - 1 ) ) {
			changeToBlock( i + 1 );
			break;
		}
	}
}

// Index Rückwärts Blättern
function prevBlock(){
	
	allBlocks = gesamt;
	allBlocks=Math.round( allBlocks );
	
	for( var i = 1; i <= allBlocks; i++ ){
		if( document.getElementById( "galIndex" + i ).style.display == "block") {
			if(i == 1) break;
			changeToBlock( i - 1 );
			break;
		}
	}
}

function playPics(){		
	
	document.getElementById('play').src = '../img/play_a.gif';
	
	playinterval = setInterval( 'nextPic()',5000);
			
}
function pausePics (){
	
	clearInterval( playinterval );
	document.getElementById('play').src = '../img/play.gif';
	
}
function nextPic() {
	if( currentPosition <= hrefs.length ) {
		//currentPosition += 1;
		if( ( currentPosition ) % perPage == 0) {
			 nextBlock();
		}
		
		location.href= hrefs[currentPosition].href;		
	}
}

function prevPic() {
	if( currentPosition - 2 >= 0 ) {
		currentPosition -= 2;
		if( ( currentPosition + 1 ) % perPage == 0 ) {
			 prevBlock();
		}
		location.href= hrefs[currentPosition].href;
	}
}

//Bild markieren - abwählen falls markiert - je nach Status der Checkbox
function markthis(){
	myMark = document.getElementById( markId );
	//falls nicht markiert, markieren und an Formular zum absenden anhängen
	if( myMark.checked == true ){
		addElement();
	} 
	//falls markiert, markierung entfernen und Formularfeld entfernen
	else {
		myMark.checked = false;
		killAssociatedFormField();
	}
	document.getElementById('checkedPics').innerHTML = countAllCookies();
}

//Bildnamen in Array speichern
function addElement(){
	markedImgs[FILEURL] = 1;
	createCookie( myCookiePrefix+FILEURL, 1, 1 );
}

//Bildnamen aus Array rausschmeißen
function killAssociatedFormField(){
	var lookForKey = FILEURL;
	for( var i = 0; i <= markedImgs.length; i++ ){
		if( markedImgs[lookForKey] ){
			markedImgs[lookForKey] = false;
			eraseCookie( myCookiePrefix+lookForKey );
		}		
	}
}

function countAllCookies(){
	var x = -1;
	var allCookies = document.cookie.split(';');
	for(var i=0;i < allCookies.length;i++) {
		x++;
	}
	return x;
}


//Beim Laden des Bildes checken ob es markiert ist
function checkMarker(){
	
	markedImgs = getMarkedImgs();
	
	for( var i = 0; i <= markedImgs.length; i++ ){
		if( markedImgs[FILEURL] && markId != '' ){
			document.getElementById( markId ).checked = true;
		} else {
			document.getElementById( markId ).checked = false;
		}
	}
}

//Markierte Bilder anhängen und Nextstep laden (also das mini Form abschicken)
function appendCheckedFilesAndSubmit(){
	var eleCount = markedImgs.length;
	
	markedImgs = getMarkedImgs();
	
	for( var i in markedImgs ){
		if( markedImgs[i] ) {
			var hiddenField = document.createElement( "input" );
			
			hiddenField.setAttribute( "type", "hidden" );
			hiddenField.setAttribute( "name", "checkedFiles[]" );
			hiddenField.setAttribute( "value", i );
			
			document.getElementById( formId ).appendChild( hiddenField );
		}
	}
	document.getElementById( formId ).submit();
	return;
}

// lädt Exifinfos vom 'myImg'-container in den Anzeige Container
function getExifForImg( myImg ){
	if( document.getElementById( myImg ).innerHTML ) { document.getElementById( exifContainer ).innerHTML = document.getElementById( myImg ).innerHTML; }
	return;
}
// Blendet ExifInfo Container ein und aus.
function showExifForImg(){
	var container = document.getElementById( exifContainer );
	container.style.display = 'block';
	return;
}
function hideExifForImg(){
	var container = document.getElementById( exifContainer );
	container.style.display = 'none';
	return;
}

/*
*
* BILDER FADER ... MUSS NOCH AUSGELAGERT WERDEN....
* Ruckelt leider noch a bisserl, weil die Positionierung schon vorher vorgenommen wird.. mach ich morgen oder so
* Ich krich nen anfall.. scheiss IE.. klappt noch nich.. beheben!!
*/

/*
endPic ->EndBild (Pfad zu dem Bild)
picObj -> Objekt des Bildes
*/
function fadeFromTo(endPic,picObj){
 
	var transparenz = .99;
	var endPicObj = new Image();
	endPicObj.src = endPic;
	fadeOut();
	
	
	function fadeOut(){
		transparenz-=.10;
		setOpacity(picObj,transparenz);
		if(transparenz<=0) {
			picObj.src = endPic;
			picObj.height = endPicObj.height;
			picObj.width = endPicObj.width;
			setPosition(picObj);
			fadeIn();
		} else {
			setTimeout(fadeOut,20);
		}
	}
	
	function fadeIn(){
		transparenz+=.10;
		setOpacity(picObj,transparenz);
		if(transparenz>.99) {
			activeFader = false;
		} else {
			setTimeout(fadeIn,20);
		}
	}
	
	function setOpacity(picObj,transparenz) {
		if(transparenz>.99) {
			transparenz = .99;
			return;
		}
		picObj.style.opacity = transparenz;
		picObj.style.MozOpacity = transparenz;
		picObj.style.filter = "alpha(opacity=" + (transparenz*100) + ")";
	}
}