if ( HP == null ) var HP={};
if ( HP.Screen == null ) HP.Screen = {};

HP.Screen.Viewer = new Class({
    // Implementierungen
    Implements: [Events,Options],
    
    // Defaultoptionen wenn nicht gesetzt
    options: {
        parent	        	: null,
        IdPrefix			: "ViewerBG"
    },

    //
    // Constructor
    //
    initialize: function(options) {
        this.setOptions(options);
        
        //
        // Hintergrund
        //
        this.Window = new Element("div", {
            "id"        : this.options.IdPrefix,
            "styles"    : {
                "display"       : "none",
                "visibility"    : "hidden",
                "opacity"		: 0
            },
            "events"		: {
            	"click"		: this.closeFrame.bindWithEvent(this)
            }            
        }); 
        
        //
        // Effekte 
        //
        this.Window.FadeIn = new Fx.Tween(this.Window, {
            duration        : "short",
            onStart      	: this.onWindowFadeInBegin.bindWithEvent(this),
            onComplete     	: this.onWindowFadeInComplete.bindWithEvent(this)
        }); 
        
        this.Window.FadeOut = new Fx.Tween(this.Window, {
            duration        : "short",
            onComplete      : this.onWindowFadeOutComplete.bindWithEvent(this)
        });   
        
        //
        // ContentArea
        //
        this.ContentArea = new Element("div",{
            "id"        : this.options.IdPrefix + "ContentArea",
            "styles"    : {
                "visibility"        : "hidden",
                "display"           : "none"
            }
        });  

       
        this.ContentArea.FadeOut = new Fx.Tween(this.ContentArea, {
        		duraction 		: 'normal',
                onComplete      : function(e) {
        			$(e).set("styles", { "display" :"none", "visibility" : "hidden" });
    			}
        });
        
        this.ContentArea.Resize = new Fx.Morph( this.ContentArea, { 
        	duration		: 'normal', 
        	transitions		: Fx.Transitions.linear,
        	onStart			: function(e) {
        		$(e).set('styles',{
        			"opacity"			: 0,
                    "visibility"        : "visible",
                    "display"           : "block"
        		});
        	},
        	onComplete		: this.onContentResizeComplete.bindWithEvent(this)
        }); 
        
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        // Buttons
        this.ButtonArea = new Element("div", {
            "id"        : this.options.IdPrefix + "ButtonArea"
        });
        
        this.BTN_Close = new Element("a", {
        	"id"    : this.options.IdPrefix+"CloseBTN", "href" : "#", "events": {
                "click" : this.closeFrame.bindWithEvent(this)
            }
        });
        
        
        //
        // iFrame
        //
        this.iFrame = new Element("iframe",{
        	"id"		: this.options.IdPrefix + "IFrame",
        	"styles"	: {
        		"opacity"		: 0,
        		"width"			: "100%",
        		"height"		: "100%"
        	}
        });
        
        this.iFrame.inject(this.ContentArea);
        this.BTN_Close.inject(this.ContentArea);
        this.Open = false;
        
        // Events
        window.addEvent("domready", this.setup.bindWithEvent(this));
    },

    //
    // wenn das Resizen abgeschlossen ist iframe einfaden lassen
    //
    onResizeComplete : function() {
        this.iFrame.href = this.Link;
        this.iFrame.tween("opacity",1);       
    },    
    
    //
    // sucht einen BildLink 
    //
    getLink : function(Link) {
        var Lnk = "";
        
        switch( typeof(Link) ) {
            case "string":
                Lnk = Link;
            break;
            
            case "object":
                if ( Link.nodeName == "A" ) {
                    Lnk = Link.href;
                }
            break;
            
            default:
                alert("ungültigen Objekttyp übergeben");
            break;
        }
        
        return Lnk;    
    },    
    
    //
    // setzt die größe des Containers neu
    //
    setContainerArea : function() {
    	var area;
        if ( this.options.parent == null ) {
			if ( Browser.Engine.webkit ) {
		        area = {
					x : "99%",
					y : document.body.getScroll().y + window.innerHeight
				};
			} else {
				area = $(document.body).getScrollSize();
			}
			sArea = $(document.body).getScroll();
        } else {
            area = $(this.options.parent).getScrollSize();
            sArea = $(this.options.parent).getScroll();
        }
    
        this.Window.set("styles",{
            "width"     : area.x,
            "height"    : area.y
        });    
    },    
    
    //
    // öffnet einen Frame mit dem Fenster
    //
    showFrame : function(HrefLink, width, height) {
    	var Link = this.getLink(HrefLink);
    	this.setContainerArea();
    	
    	this.Link = Link;
    	
    	if ( !this.Open ) {
    		this.ContentArea.tween("opacity",1);  
    		this.Window.FadeIn.start("opacity",0.8);
    		this.Params = { "Width": width, "Height" : height};
    		this.iFrame.src = Link;
    	} 
    	
    	this.Open = true;
    	return false;
    },
    
    //
    // schließt das Fenster
    //
    closeFrame : function() {
    	this.Open = false;
    	this.iFrame.src = "";
    	
    	this.ContentArea.FadeOut.start('opacity',0);  
		this.Window.FadeOut.start("opacity",0);
    },

    
    //
    // wenn FadeOut abgeschlossen ist
    //
    onWindowFadeOutComplete : function() {
        this.Window.set("styles",{
            "opacity"       : 0,
            "visibility"    : "hidden",
            "display"       : "none"
        });
    },
    
    //
    // wenn das Faden begint
    //
    onWindowFadeInBegin : function() {
        this.Window.set("styles",{
            "opacity"       : 0,
            "visibility"    : "visible",
            "display"       : "block"
        });
    },
    
    //
    // onWindowFadeOutBegin
    //
    onWindowFadeInComplete : function() {
    	this.ContentArea.set('styles',{
    		"background"	: ""
    	});

    	var sArea;
        if ( this.options.parent == null ) {
			sArea = $(document.body).getScroll();
        } else {
            sArea = $(this.options.parent).getScroll();
        }    	
    	
    	
    	this.ContentArea.Resize.start({
    		"width" 		: this.Params.Width,
    		"height"		: this.Params.Height,
    		"margin-left"	: this.Params.Width / 2 * -1 + sArea.x,
    		"margin-top"	: this.Params.Height / 2 * -1 + sArea.y,
    		"opacity"		: 1
    	});
    },
        
    //
    // Wenn ContentResize abgeschlossen ist
    //
    onContentResizeComplete: function() {
    	this.ContentArea.set('styles',{
    		"background"	: "#FFFFFF"
    	});
    	this.iFrame.tween('opacity', 1);
    },
    
    //
    // Setupfunktion wird nach dem laden der Seite aufgerufen
    //
    setup : function() {
        this.setContainerArea();
            
        if ( this.options.parent == null ) {
            document.body.appendChild( this.Window );
            document.body.appendChild( this.ContentArea );
        } else {
            $(this.options.parent).appendChild( this.PictureWindow );
            $(this.options.parent).appendChild( this.ContentArea);
        }    
    }    
});