var HTMLPopup = new Class({
    url: null,
    left: 0,
    top: 0,
    width: 1,
    height: 1,
    hiderElement: null,
    popupElement: null,
    loadingPopupElement: null,

    isOpened: false,

    initialize: function(url,width,height){
        this.url = url;
        this.width = width;
        this.height = height;
    },
    open: function(){

        if( this.isOpened == true )
        {
            return;
        }
        this.isOpened = true;

        this.hiderElement = new Element("div");
        this.hiderElement.addClass("HTMLPopupHider");
        this.hiderElement.inject(document.body);
        this.hiderElement.setStyle("opacity",0);
        this.hiderElement.addEvent("click",this.onHiderElementClick.bind(this));

        this.loadingPopupElement = new Element("div");
        this.loadingPopupElement.addClass("HTMLPopupIsLoading");
        this.loadingPopupElement.inject(document.body);

        var windowSize = window.getSize();

        this.left = Math.round((windowSize.x/2)-(this.width/2));
        this.top = Math.round((windowSize.y/2)-(this.height/2))

        this.hiderElement.fx = new Fx.Tween(this.hiderElement,{
            link: "cancel",
            duration: 600,
            onComplete: this.onHiderElementFxComplete.bind(this)
        });
        this.loadingPopupElement.fx = new Fx.Tween(this.loadingPopupElement,{
            link: "cancel",
            duration: 500
        });

        this.hiderElement.fx.start("opacity",0.6);
        this.loadingPopupElement.fx.start("top",(windowSize.y/2)-25);

        this.popupElement = new Element("div");
        this.popupElement.HTMLPopupInstance = this;
        this.popupElement.addClass("HTMLPopup");
        this.popupElement.setStyle("top",-this.height*2);
        this.popupElement.inject(document.body);
        this.popupElement.fx = new Fx.Tween(this.popupElement,{link:"cancel"});

        var request = new Request.HTML({
            url: this.url,
            onSuccess: this.onRequestSuccess.bind(this)
        });
        request.send.delay(500,request);
    },
    close: function(){
        if( this.isOpened == false )
        {
            return;
        }
        this.isOpened = false;
        this.popupElement.fx.start("top",-(this.height+200));
        this.hiderElement.fx.start("opacity",0);
    },
    onHiderElementFxComplete: function(){
        if( parseFloat(this.hiderElement.getStyle("opacity")) == 0 )
        {
            this.hiderElement.dispose();
            this.popupElement.dispose();
            this.loadingPopupElement.dispose();

            this.hiderElement = null;
            this.popupElement = null;
            this.loadingPopupElement = null;
        }
    },
    onHiderElementClick: function(){
        this.close();
    },
    onRequestSuccess: function(responseTree,responseElements,responseHTML,responseJavaScript){
        this.popupElement.adopt(responseTree);

        this.popupElement.setStyles({
            "width": this.width,
            "height": this.height,
            "left": this.left
        });
        this.popupElement.fx.start("top",this.top);
        this.loadingPopupElement.fx.start("top",-200);
    }
});