var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
var funcQueue = new Array("0");

function fixPNG(myImage) {
    if ((version >= 5.5) && (version < 7) && (document.body.filters)) {
       var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
	   var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
	   var imgTitle = (myImage.title) ? "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' ";
	   var imgStyle = "display:inline-block;" + myImage.style.cssText;
	   var strNewHTML = "<span " + imgID + imgClass + imgTitle
                  + " style=\"" + "width:" + myImage.width 
                  + "px; height:" + myImage.height 
                  + "px;" + imgStyle + ";"
                  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
	   myImage.outerHTML = strNewHTML;
    }
}

// Stapelverarbeitung für JavaScript
function StartFuncQueue(functionID){
	if (functionID < funcQueue.length){
		if (funcQueue[0] == "0"){
			funcQueue[0] = "1";
			eval(funcQueue[functionID]);
			StartFuncQueue(functionID + 1);
		} else {
			setTimeout("StartFuncQueue(" + functionID + ")", 10);
		}
	} else {
		// Stapelverarbeitung beenden
		funcQueue = new Array();
	}
}


/*
AnimatedPNG - A Javascript library for animated PNG images 
Copyright (C) 2007-2008 Steve Jones (steve@squaregoldfish.co.uk)
Version 1.01
Web: http://www.squaregoldfish.co.uk/software/animatedpng
Email: animatedpng@squaregoldfish.co.uk

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details:
http://www.gnu.org/licenses/gpl.txt
*/

// Global variable for holding animated images
animatedPNGs = new Array();

// Constructor for an Animated PNG. This takes only the essential
// parameters for the animation; other options may be specified
// using other functions.
//    imageName - The name of this animation
//    firstImage - The filename of the first image
//    imageCount - The number of frames in the animation
//    delay - The default delay between frames
function AnimatedPNG(imageName, firstImage, imageCount, delay, top, left, zindex)
	{
	/** Instance Variables **/
	
	// Position Absolute Top
	this.posTop = top;
	
	// Position Absolute Left
	this.posLeft = left;

	// Position Absolute Z-Index
	this.zIndex = zindex;
	
	// The name of this animation object
	this.animName = imageName;

	// The array of images for this animation
	this.images = new Array();
	
	// The frame-specific delays
	this.delays = new Array();
	
	// The amount of padding required in image numbers
	this.padCount = 0;
	
	// The number of the first image in the sequence
	this.firstImageNumber = 0;
	
	// The number of the last image in the sequence
	this.lastImageNumber = 0;
	
	// The number of the image currently being displayed
	this.currentImage = 0;
	
	// Indicates whether or not the animation repeats
	this.repeat = true;
	
	// Indicates whether or not the animation is currently active
	this.animationRunning = false;
	
	// Indicates whether or not the animation has been displayed
	// on the page
	this.animationDrawn = false;

	/** FUNCTIONS **/
	
	// Draw the animation after it has been set up
    // Setting delayStart to true will prevent the animation from starting -
    // it can be started manually by calling startAnimation
	this.draw = function(delayStart)
		{
		// Draw the first image html, then call doDraw to continue
		var html = new Array();
		html[html.length] = '<img id="' + this.animName + '" src=""';
		
		html[html.length] = ' style="position:absolute;top:' + this.posTop + 'px;left:' + this.posLeft + 'px;z-index:' + this.zIndex + '" onload="fixPNG(this)"';

		html[html.length] = '/>';

		document.write(html.join(''));
		document.getElementById(this.animName).src = this.images[this.firstImageNumber].src;
		
        if (!delayStart)
            {
            setTimeout('animatedPNGs[\'' + this.animName + '\'].drawFrame()', this.delays[this.firstImageNumber]);
            this.animationRunning = true;
            }

        this.drawn = true;
		}
		
	// Set the delay for a specific frame in the animation.
	//   frame - The frame number
	//   delay - The delay in milliseconds
	//
	// If the frame number does not correspond to a frame in the animation,
	// this will have no effect.
	this.setFrameDelay = function(frame, delay)
		{
		this.delays[frame] = delay;
		}
		
	// Indicate whether or not the animation should repeat.
	// If the animation has been drawn, but is not running,
	// it will be started automatically.
	//   repeat - Flag to indicate whether or not the animation should repeat.
	this.setRepeat = function(repeat)
		{
		this.repeat = repeat;
		if (repeat && !this.animationRunning)
			this.startAnimation();
		}
		
	// Starts or resumes the animation if it is not running.
	this.startAnimation = function()
		{
		if (!this.animationRunning)
			{
			this.animationRunning = true;
			this.drawFrame();
			}
		}
	
	// Animation bekommt neue Position
	this.setPos = function(left, top) {
		this.posLeft = left;
		this.posTop = top;
		document.getElementById(this.animName).style.top = this.posTop + 'px';
		document.getElementById(this.animName).style.left = this.posLeft + 'px';
	}
	
	this.setNewImageSource = function(src) {
		
		// ImageSource jetzt sofort wechseln
		document.getElementById(this.animName).src = 'http://localhost/test/PNG_Animation/' + src;

		this.images[1] = new Image();
		this.images[1].src =  'http://localhost/test/PNG_Animation/' + src;
		
		funcQueue[0] = "0";
	}
	
	// Animation wird in Richtung verschoben (neg. Werte verschieben in Richtung Nullpunkt)
	this.move = function(shiftX, shiftY, counter) {

		this.shiftX = shiftX;
		this.shiftY = shiftY;
		this.counter = counter;
		
		this.posTop += this.shiftY;
		this.posLeft += this.shiftX;

		this.setPos(this.posLeft, this.posTop);
		this.counter--;

		if (this.counter > 0) {
			setTimeout('animatedPNGs[\'' + this.animName + '\'].move(' + this.shiftX + ', ' + this.shiftY + ', ' + this.counter + ')', 50);
		} else {
			clearTimeout('animatedPNGs[\'' + this.animName + '\'].move()');
   			funcQueue[0] = "0";
		}

	}
	
	// Stops the animation at the current frame.
	this.stopAnimation = function()
		{
		this.animationRunning = false;
		}
		
	// Draws a single frame of the animation.
	// This is an internal function, and should not
	// be called directly.
	this.drawFrame = function()
		{
		var drawImage = true;
		this.currentImage++;

		// If the frame is past the last image in the sequence,
		// either return to the start of the animation (if repeating),
		// or stop.
		if (this.currentImage > this.lastImageNumber)
			{
			if (this.repeat)
				this.currentImage = this.firstImageNumber;
			else
				{
				drawImage = false;
				this.animationRunning = false;
				}
			}
			
		// If we're going to draw the frame....
		if (drawImage)
			{
			// Draw the frame in the HTML documemt
			document.getElementById(this.animName).src = this.images[this.currentImage].src;
			
			// Calculate the delay before drawing the next frame
			if (this.delays[this.currentImage])
				delay = this.delays[this.currentImage];
			
			// Draw the next frame after the calculated delay
			if (this.animationRunning)
				setTimeout('animatedPNGs[\'' + this.animName + '\'].drawFrame()', delay);
			}
		}
	
	
	
	/** CONSTRUCTOR **/
	
	var head = null;
	var numbers = '';

	// Check that the suffix for the image is .png
	var suffix = firstImage.substring(firstImage.length - 4, firstImage.length);
	if (suffix.search(/\.png/i) != 0 && suffix.search(/\.jpg/i) != 0)
		throw 'Invalid suffix for first image in animated PNG ' + imageName + ' - must be .png or .jpg';

	// Extract the number from the filename
	var finishedNumbers = false;
	var curIndex = firstImage.length - 5;
	for (; curIndex >= 0 && !finishedNumbers; curIndex--)
		{
		if (/[0-9]/.test(firstImage.charAt(curIndex)))
			{
			numbers = firstImage.charAt(curIndex) + numbers;
			if (firstImage.charAt(curIndex) == '0')
				this.padCount++;
			}
		else
			finishedNumbers = true;
		}

	// Extract the number of the first image from the filename
	numbers = parseInt(numbers);
	this.firstImageNumber = numbers;
	this.currentImage = numbers;
	head = firstImage.substring(0, curIndex + 2);
		
	// Build the array of images
	for (var i = numbers; i < imageCount + numbers; i++)
		{
		this.images[i] = new Image;
		this.images[i].src = head + pad(i, this.padCount) + suffix;
		this.lastImageNumber = i;
		this.delays[i] = delay;
		}
		
	// Add ourselves to the list of known animated PNGs
	animatedPNGs[imageName] = this;
	}
	
// Zero-pads a number to a specified length
//   number - The number to be padded
//   padCount - The length of the padded number
function pad(number, padCount) {
	var result = '' + number;
	while (result.length < padCount + 1)
		result = '0' + result;
	
	return result;
}

function AnimatedSprite(imageName) {
	
	// Bezechner für ID des Bildelementes
	this.ImageID = imageName;
	this.objName = imageName;
	
	// Array aller Bildobjekte
	this.Images = new Array();
	
	// Aktuelles Bild
	this.ImageNumber = 1;
	
	// Wiederholung moveTo()
	this.delay = 20;
	
	// Absolute Position Left
	this.posLeft = 0;
	
	// Absolute Position Top
	this.posTop = 0;
	
	// Opacity Value
	this.opacity = 0;
	
	// zIndex
	this.zIndex = 2;
	
	// Debugmodus on/off
	this.debug = false;
	
	// Add ourselves to the list of known animated PNGs
	animatedPNGs[imageName] = this;
	
	this.preLoadImages = function(imageList) {
		/*
		 * Lädt alle Images vor, damit Animation flüssig läuft
		 */
		
		// Array aller Pfade zu den Bildern
		this.picList = imageList; 
		
		for (i = 1; i < this.picList.length; i++) {
		    this.Images[i] = new Image();
		    this.Images[i].src = this.picList[i];
		  }
		
		// Funktion beendet
		this.funcQueueEnd();
	}
	
	this.draw = function() {
		/*
		 * Leeres Bildelement in DOM hängen
		 */
		html = '<img id="' + this.ImageID + '" src="" style="position:absolute;top:' + this.posTop + 'px;left:' + this.posLeft + 'px;z-index:' + this.zIndex + '"/>';

		document.write(html);	
	}
	
	this.setImage = function(number, left, top) {
		/*
		 * Setze Bild an Position
		 */
		this.ImageNumber = number;
		this.posLeft = (typeof left != 'undefined') ? left : this.posLeft;
		this.posTop = (typeof top != 'undefined') ? top : this.posTop;
		
		document.getElementById(this.ImageID).src = this.Images[this.ImageNumber].src;
		
		this.setPos(this.posLeft, this.posTop);
		
		// Funktion beendet
		this.funcQueueEnd();
	}

	this.setPos = function(left, top) {
		/*
		 * Animation bekommt neue Position
		 */
		this.posLeft = (typeof left != 'undefined') ? left : this.posLeft;
		this.posTop = (typeof top != 'undefined') ? top : this.posTop;
		
		document.getElementById(this.objName).style.top = Math.round(this.posTop) + 'px';
		document.getElementById(this.objName).style.left = Math.round(this.posLeft) + 'px';
	}

	this.move = function(shiftX, shiftY, counter) {
		/*
		 * Animation wird in Richtung verschoben (neg. Werte verschieben in Richtung Nullpunkt Links/Oben)
		 */
		this.shiftX = shiftX;
		this.shiftY = shiftY;
		this.counter = counter;
		
		this.posTop += this.shiftY;
		this.posLeft += this.shiftX;

		this.setPos(this.posLeft, this.posTop);
		this.counter--;


		if (this.counter > 0) {
			setTimeout('animatedPNGs[\'' + this.objName + '\'].move(' + this.shiftX + ', ' + this.shiftY + ', ' + this.counter + ')', this.delay);
		} else {
			clearTimeout('animatedPNGs[\'' + this.objName + '\'].move()');
			
			// Funktion beendet
			this.funcQueueEnd();
		}

	}
	
	this.moveTo = function(newPosX, newPosY, duration) {
		/*
		 * Sprite wandert von aktueller Position innerhalb duration zu Zielposition
		 */
		this.newPosX = newPosX;
		this.newPosY = newPosY;
		this.duration = duration; // Dauer bis Sprite am Ziel sein muss
		
		this.counter = this.duration / this.delay; 
		
		this.shiftX = (this.newPosX - this.posLeft) / this.counter;
		this.shiftY = (this.newPosY - this.posTop) / this.counter;

		this.move(this.shiftX, this.shiftY, this.counter);
	}
	
	this.fade = function(inout, steps, opacity) {
	    /*
	     * Wenn opacity angegeben, dann wird der opacity Wert in X Steps auf diesen Wert geändert
	     */
		
		if (typeof opacity == 'undefined') {
			// Wenn kein opacity angegeben, dann entweder voll einblenden, oder ganz ausblenden
			opacity = (inout == 'in') ? 0 : 100;
		}
		
		this.obj = document.getElementById(this.ImageID);
	    this.opacity = opacity;
	    this.steps = steps; // Schrittweite für Ausblenden (je kleiner, desto weicher das Ausblenden)
	    this.inout = inout;
	    
	    this.obj.style.MozOpacity = this.opacity / 100;
		this.obj.style.opacity = this.opacity / 100;
		this.obj.style.filter = "alpha(opacity=" + this.opacity + ")";

   		if (this.opacity - this.steps >= 0 && this.inout == 'out') {
   			setTimeout('animatedPNGs[\'' + this.objName + '\'].fade(\'' + this.inout + '\', ' + this.steps + ', ' + (this.opacity - this.steps) + ')', 100);
   		} else if(this.opacity + this.steps <= 100 && this.inout == 'in') {
   			setTimeout('animatedPNGs[\'' + this.objName + '\'].fade(\'' + this.inout + '\', ' + this.steps + ', ' + (this.opacity + this.steps) + ')', 100);
   		} else {
			// Funktion beendet
   			animatedPNGs[this.objName].funcQueueEnd();
   		}
	}

	this.setZIndex = function(zIndex) {
		this.obj = document.getElementById(this.ImageID);
	    this.zIndex = zIndex;
	    
	    this.obj.style.zIndex = this.zIndex;
	    
		// Funktion beendet
		this.funcQueueEnd();
	}
	
	this.setOpacity = function(opacity) {
		this.obj = document.getElementById(this.ImageID);
	    this.opacity = opacity;
	    
	    this.obj.style.MozOpacity = this.opacity / 100;
		this.obj.style.opacity = this.opacity / 100;
		this.obj.style.filter = "alpha(opacity=" + this.opacity + ")";
		
		// Funktion beendet
		this.funcQueueEnd();
	}
	
	this.pause = function(ms) {
		this.wait = ms;
		
		if (this.wait > 0) {
			setTimeout('animatedPNGs[\'' + this.objName + '\'].pause(0)', this.wait);
		} else {
			clearTimeout('animatedPNGs[\'' + this.objName + '\'].pause(0)');
			
			// Funktion beendet
			this.funcQueueEnd();

		}
	}

	// Stapelverarbeitung für JavaScript
	this.startFuncQueue = function(functionID){
		
		this.functionID = parseInt(functionID);
		
		if (this.functionID < this.funcQueue.length){
			if (this.funcQueue[0] == "0"){
				this.funcQueue[0] = "1";
				
				if (this.debug == true) {
					alert('Funktion[' + this.functionID + ' von ' + this.funcQueue.length + '] (' + this.funcQueue[this.functionID] + ') wird gestartet.');
				}
				
				if (this.funcQueue[this.functionID].search("JUMP") != -1) {
					var value = this.funcQueue[this.functionID].split(" ");
					this.funcQueue[0] = "0"
					this.startFuncQueue(value[1]);
				} else {
					eval('animatedPNGs[this.objName].' + this.funcQueue[this.functionID]);
					this.startFuncQueue(this.functionID + 1);
				}

			} else {
				
				setTimeout('animatedPNGs[\'' + this.objName + '\'].startFuncQueue(\'' + this.functionID + '\')', 10);

			}
		} else {
			
			if (this.debug == true) {
				alert('ENDE Stapelverarbeitung, functionID => ' + this.functionID);
			}
			
			// Stapelverarbeitung beenden
			this.funcQueue = new Array();
		}
	}
	
	// Einen neuen Befehl hinzufügen
	this.funcQueuePush = function(order) {
		
		if (this.debug == true) {
			alert('Push[' + this.funcQueue.length + '] => ' + order)
		}

		this.funcQueue.push(order);
	}
	
	// Funtion ist zuende
	this.funcQueueEnd = function() {
		
		if (this.debug == true) {
			alert('Funktion[' + (this.functionID - 1) + ' von ' + this.funcQueue.length + '] (' + this.funcQueue[(this.functionID - 1)] + ') beendet.');
		}
		
		this.funcQueue[0] = "0";
	}
	
	// Constructor
	this.draw();
	
	// Stapelverabeitungswarteschlange
	this.funcQueue = new Array("0");

}