Event.observe(window, 'load',
	function() {

	    $$('.zoomable').each(function(item) {
	        new ZoomImage(item);
	    });

	    $$('.zoomablepostcard').each(function(item) {
	        new ZoomPostcard(item);
	    });

	    $$('.zoomablesmall').each(function(item) {
	        new ZoomImageSmall(item);
	    });
	}
);

function getXYpos(elem) {
    if (!elem) {
        return { "x": 0, "y": 0 };
    }
    var xy = { "x": elem.offsetLeft, "y": elem.offsetTop }
    var par = getXYpos(elem.offsetParent);
    for (var key in par) {
        xy[key] += par[key];
    }
    return xy;

}

var ZoomImage = Class.create();
Object.extend(
	ZoomImage.prototype, {
	    initialize: function(img) {
	        this._img = img;
	        this._width = img.width; //ACHTUNG NEU NUN FEST AUF 122 PIXEL
	        this._height = img.height;
	        this._selected = false;
	        this._over = false;
	        this._eL2 = this.mouseOver.bindAsEventListener(this);
	        this._eL3 = this.mouseOut.bindAsEventListener(this);
	        Event.observe(this._img, 'mouseover', this._eL2);
	        //			Event.observe(this._img, 'mouseout', this._eL3);			

	    },
	    mouseOver: function(mouseEvent) {
	        if ((!this._selected) && (!this._over)) {
	            Event.stopObserving(this._img, 'mouseover', this._eL2);
	            Event.observe(this._img, 'mouseout', this._eL3);
	            var x = Math.abs(Math.min(0, Position.cumulativeOffset(this._img)[0] - 65));
	            this._img.addClassName('ontop');
	            this._img.up().addClassName('ontop');
	            this._img.up(1).addClassName('ontop');
	            this._img.up(2).addClassName('ontop');
	            this._img.up(3).addClassName('ontop');
	            this._img.up(4).addClassName('ontop');
	            this._img.up(5).addClassName('ontop');

	            this._over = true;

	            style = 'width:' + (2 * this._width) + 'px;height:' + (2 * this._height) + 'px;top:' + (-this._width / 2) + 'px;left:' + (x + (-this._width / 2)) + 'px;';
	            //this._img.setStyle(style);
	            try {
	                this._effect.cancel()

	            } catch (e) {

	            }

	            this._effect =
					new Effect.Morph(
						this._img,
						{ duration: 0.5, style: style }
					);


	        }
	    },
	    mouseOut: function(mouseEvent) {
	        if ((!this._selected) && (this._over)) {
	            Event.observe(this._img, 'mouseover', this._eL2);
	            Event.stopObserving(this._img, 'mouseout', this._eL3);
	            this._img.removeClassName('ontop');
	            this._img.up().removeClassName('ontop');
	            this._img.up(1).removeClassName('ontop');
	            this._img.up(2).removeClassName('ontop');
	            this._img.up(3).removeClassName('ontop');
	            this._img.up(4).removeClassName('ontop');
	            this._img.up(5).removeClassName('ontop');

	            this._over = false;

	            style = 'width:' + (this._width) + 'px;height:' + (this._height) + 'px;top:0px;left:0px;';

	            try {
	                this._effect.cancel()
	            } catch (e) {

	            }
	            this._effect =
					new Effect.Morph(
						this._img,
						{ duration: 0.5, style: style }
					);

	        }
	    }
	}
);

var ZoomPostcard = Class.create();
Object.extend(
	ZoomPostcard.prototype, {
	    initialize: function(img) {
	        this._img = img;
	        this._width = this._img.width; //ACHTUNG NEU NUN FEST AUF 122 PIXEL
	        this._height = this._img.height;
	        this._selected = false;
	        this._over = false;
	        this._eL2 = this.mouseOver.bindAsEventListener(this);
	        this._eL3 = this.mouseOut.bindAsEventListener(this);
	        this._eL4 = this.mouseClick.bindAsEventListener(this);
	        this.LinkFront = "";
	        this.LinkBack = "";
	        Event.observe(this._img, 'mouseover', this._eL2);
	        Event.observe(this._img, 'click', this._eL4);

	        //Links auslesen und Anchor Href entfernen
	        var MyAnchor = $("link_" + this._img.id);
	        if (MyAnchor != null) {
	            this.LinkFront = MyAnchor.readAttribute('href');
	            this.LinkBack = MyAnchor.readAttribute('rel');

	            MyAnchor.setAttribute('href', 'javascript:void(0);');
	        }

	    },
	    mouseClick: function(mouseEvent) {
	        Event.stopObserving(this._img, 'click', this._eL4);

	        //Ermitteln wo auf der Website geklickt wurde
	        var PosXClick = Event.pointerX(mouseEvent);
	        var PosYClick = Event.pointerY(mouseEvent);

	        //Bild Position ermitteln
	        var xy = getXYpos(this._img);
	        var PosXImg = xy["x"];
	        var PosYImg = xy["y"];

	        //Ermitteln des Wertes aus Klick und Bild um den Wert auf dem Bild zu erhalten
	        var PosXOnImg = PosXClick - PosXImg;
	        var PosYOnImg = PosYClick - PosYImg;

	        //Bild hoeher ermitteln
	        var ClickImgHeight = this._img.offsetHeight;

	        //Diese Variable definiert den Bereich fuer die untere haelfte
	        var BottomArea = ClickImgHeight / 3;
	        BottomArea = BottomArea * 2;

	        if (PosYOnImg > BottomArea) {
	            //alert('Umleitung zur Rueckseite der Postkarte.');
	            window.location.href = this.LinkBack;
	        }
	        else {
	            //alert('Umleitung zur Vorderseite der Postkarte.');
	            window.location.href = this.LinkFront;
	        }
	    },
	    mouseOver: function(mouseEvent) {
	        if ((!this._selected) && (!this._over)) {
	            Event.stopObserving(this._img, 'mouseover', this._eL2);
	            Event.observe(this._img, 'mouseout', this._eL3);
	            var x = Math.abs(Math.min(0, Position.cumulativeOffset(this._img)[0] - 65));
	            this._img.addClassName('ontop');
	            this._img.up().addClassName('ontop');
	            this._img.up(1).addClassName('ontop');
	            this._img.up(2).addClassName('ontop');
	            this._img.up(3).addClassName('ontop');
	            this._img.up(4).addClassName('ontop');
	            this._img.up(5).addClassName('ontop');

	            this._over = true;

	            style = 'width:' + (2 * this._width) + 'px;height:' + (2 * this._height) + 'px;top:' + (-this._width / 2) + 'px;left:' + (x + (-this._width / 2)) + 'px;';
	            //this._img.setStyle(style);
	            try {
	                this._effect.cancel()

	            } catch (e) {

	            }

	            this._effect =
					new Effect.Morph(
						this._img,
						{ duration: 0.5, style: style }
					);


	        }
	    },
	    mouseOut: function(mouseEvent) {
	        if ((!this._selected) && (this._over)) {
	            Event.observe(this._img, 'mouseover', this._eL2);
	            Event.stopObserving(this._img, 'mouseout', this._eL3);
	            this._img.removeClassName('ontop');
	            this._img.up().removeClassName('ontop');
	            this._img.up(1).removeClassName('ontop');
	            this._img.up(2).removeClassName('ontop');
	            this._img.up(3).removeClassName('ontop');
	            this._img.up(4).removeClassName('ontop');
	            this._img.up(5).removeClassName('ontop');

	            this._over = false;

	            style = 'width:' + (this._width) + 'px;height:' + (this._height) + 'px;top:0px;left:0px;';

	            try {
	                this._effect.cancel()
	            } catch (e) {

	            }
	            this._effect =
					new Effect.Morph(
						this._img,
						{ duration: 0.5, style: style }
					);

	        }
	    }
	}
);

var ZoomImageSmall = Class.create();
Object.extend(
	ZoomImageSmall.prototype, {
	    initialize: function(img) {
	        this._img = img;
	        this._width = this._img.width;
	        this._selected = false;
	        this._over = true;
	        this._eL2 = this.mouseOver.bindAsEventListener(this);
	        this._eL3 = this.mouseOut.bindAsEventListener(this);
	        Event.observe(this._img, 'mouseover', this._eL2);
	        //			Event.observe(this._img, 'mouseout', this._eL3);			

	    },
	    mouseOver: function(mouseEvent) {
	        if ((!this._selected) && (!this._over)) {
	            Event.stopObserving(this._img, 'mouseover', this._eL2);
	            Event.observe(this._img, 'mouseout', this._eL3);
	            var x = Math.abs(Math.min(0, Position.cumulativeOffset(this._img)[0] - 65));
	            this._img.addClassName('ontop');
	            this._img.up().addClassName('ontop');
	            this._img.up(1).addClassName('ontop');
	            this._img.up(2).addClassName('ontop');
	            this._img.up(3).addClassName('ontop');
	            this._img.up(4).addClassName('ontop');
	            this._img.up(5).addClassName('ontop');

	            this._over = true;

	            style = 'width:' + (3 * this._width) + 'px;height:' + (3 * this._width) + 'px;top:' + (-this._width) + 'px;left:' + (x + (-this._width)) + 'px;';
	            //this._img.setStyle(style);
	            try {
	                this._effect.cancel()

	            } catch (e) {

	            }

	            this._effect =
					new Effect.Morph(
						this._img,
						{ duration: 0.5, style: style }
					);


	        }
	    },
	    mouseOut: function(mouseEvent) {
	        if ((!this._selected) && (this._over)) {
	            Event.observe(this._img, 'mouseover', this._eL2);
	            Event.stopObserving(this._img, 'mouseout', this._eL3);
	            this._img.removeClassName('ontop');
	            this._img.up().removeClassName('ontop');
	            this._img.up(1).removeClassName('ontop');
	            this._img.up(2).removeClassName('ontop');
	            this._img.up(3).removeClassName('ontop');
	            this._img.up(4).removeClassName('ontop');
	            this._img.up(5).removeClassName('ontop');

	            this._over = false;

	            style = 'width:' + (this._width) + 'px;height:' + (this._width) + 'px;top:0px;left:0px;';

	            try {
	                this._effect.cancel()
	            } catch (e) {

	            }
	            this._effect =
					new Effect.Morph(
						this._img,
						{ duration: 0.5, style: style }
					);

	        }
	    }
	}
);

function showCommentBox() {
    if (!$('writeComment').visible()) {
        new Effect.SlideDown(
			'writeComment', {
			    queue: 'end',
			    duration: 0.7,
			    afterFinish: function() {
			        $('comment').focus();
			    }
			}
		);
    } else {
        new Effect.SlideUp(
			'writeComment', {
			    queue: 'end',
			    duration: 0.7
			}
		);
    }
}
function showAnswerBox() {
    if (!$('writeAnswer').visible()) {
        new Effect.SlideDown(
			'writeAnswer', {
			    queue: 'end',
			    duration: 0.7,
			    afterFinish: function() {
			        $('comment').focus();
			    }
			}
		);
    } else {
        new Effect.SlideUp(
			'writeAnswer', {
			    queue: 'end',
			    duration: 0.7
			}
		);
    }
}
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();