var WS_Popup = new Class({
    Implements: [Events, Options],

    options: {
        container: 'document',
        onReturn: false,
        width: 400,
        overlay: 0.7,
        overlayClass : 'overlay',
        popupClass : 'popup',
        textOk : 'OK',
        textCancel : 'Annuler',
        onShow: function(type, popup) {
            popup.setStyle('display', 'block');

            popup.set('styles', {
                'left': (window.getScroll().x + (window.getSize().x - popup.getSize().x) / 2).toInt(),
                'top': (window.getScroll().y + (window.getSize().y - popup.getSize().y) / 2).toInt(),
                'opacity': 1
            });

            if(type == 'alert')
                this.actionOk.focus();
            else if(type == 'confirm')
                this.actionCancel.focus();
            else if(type == 'prompt')
                this.actionInput.focus();
        },
        onClose: $empty,
        ajax: null,
        data: {}
    },

    initialize: function(type, el, options){
        this.setOptions(options);
        this.container = $(this.options.container) || $(document.body);

        if(this.options.overlay.toFloat() == 0)
            this.options.overlay = false;

        if(this.options.overlay) {
            this.overlay = new Element('div', {
                    'class': this.options.overlayClass,
                    'styles': {
                        'display': 'block',
                        'z-index': 10000,
                        'position': 'absolute',
                        'top': '0',
                        'left': '0',
                        'opacity': this.options.overlay.toFloat(),
                        'height': window.getScrollSize().y + 'px',
                        'width': window.getScrollSize().x + 'px'
                    }
            });
            $(document.body).adopt(this.overlay);
        }

        this.popup = new Element('div', {
            'class': this.options.popupClass,
            'styles': {
                'display': 'none',
                'z-index': 100000,
                'position': 'absolute',
                'width': this.options.width.toInt(),
                'opacity': 0
            }
        });
        this.container.adopt(this.popup);

        if($type(el) == 'string')
            this.popup.set('html', el);
        else if($type(el) == 'element')
            this.popup.adopt(el);

        this.actions = new Element('div', {
            'class': 'actions'
        });
        this.popup.adopt(this.actions);

        this.actionOk = new Element('input', {
            'id': 'actionOk',
            'class': 'submit',
            'type': 'submit',
            'value': this.options.textOk,
            'styles': {
                'width': '130px'
            }
        });

        this.actionCancel = new Element('input', {
            'id': 'actionCancel',
            'class': 'submit',
            'type': 'submit',
            'value': this.options.textCancel,
            'styles': {
                'width': '130px'
            }
        });

        if(type == 'prompt')
            this.prompt();
        else if(type == 'confirm')
            this.confirm();
        else if(type == 'confirm')
            this.alert();
        else if(type == 'ajax')
            this.ajax();
        else if(type == 'video')
            this.video(el);
        else if(type == 'iFrame')
            this.iFrame();
        else if(type == 'slideShow')
            this.slideShow();
        else
            this.alert();
    },

    show: function(type){
        // Hack IE, masque les sélect & les object
        if (Browser.Engine.trident && Browser.Engine.version <= 6)
           $$('select').each(function(elem) {elem.setStyle('visibility', 'hidden');})
        $$('object').each(function(elem) {elem.style.visibility = 'hidden';})
        $$('iframe').each(function(elem) {elem.style.visibility = 'hidden';})

        return this.fireEvent('onShow', [type, this.popup]);
    },

    hide: function(){
        var returnValue = this.options.onReturn;
        if(this.options.overlay)
            this.overlay.destroy();
        this.popup.destroy();

        // Hack IE, réaffiche les sélect & les object
        if (Browser.Engine.trident && Browser.Engine.version <= 6)
           $$('select').each(function(elem) {elem.setStyle('visibility', 'visible');})
        $$('object').each(function(elem) {elem.style.visibility = 'visible';})
        $$('iframe').each(function(elem) {elem.style.visibility = 'visible';})

        return this.fireEvent('onClose', returnValue);
    },

    alert: function(){
        this.popup.addClass('alert');

        this.actionOk.addEvent('click', function() {
            this.options.onReturn = true;
            this.hide();
        }.bind(this));

        this.actions.adopt(this.actionOk);

        this.show('alert');
    },

    video: function(el){
        this.popup.addClass('video');

        this.actionOk.addEvent('click', function() {
            this.options.onReturn = true;
            this.hide();
        }.bind(this));

        this.actions.adopt(this.actionOk);

        if (el == 1)
            this.content = new Element('div').set('html', '<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5701818&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=5701818&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object><p><a href="http://vimeo.com/5701818">Helmet cam at the Lac Blanc bike park (Vosges, France)</a> from <a href="http://vimeo.com/user2065233">Vincent Pernin</a> on <a href="http://vimeo.com">Vimeo</a>.</p>');
        else if (el == 2)
            this.content = new Element('div').set('html', '<object width="400" height="270"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=5999213&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=5999213&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="270"></embed></object><p><a href="http://vimeo.com/5999213">Vincent Pernin Whistler fall 08</a> from <a href="http://vimeo.com/user2065233">Vincent Pernin</a> on <a href="http://vimeo.com">Vimeo</a>.</p>');
        else if (el == 3)
            this.content = new Element('div').set('html', "<object width='500' height='281'><param name='allowFullScreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='movie' value='http://www.pinkbike.com/v/114911/l/' /><embed src='http://www.pinkbike.com/v/114911/l/' type='application/x-shockwave-flash' width='500' height='281' allowFullScreen='true' allowScriptAccess='always'></embed></object><p>Vincent Pernin riding his proto Rocky Flatline somewhere in Pemberton.</p>");
        else if (el == 4)
            this.content = new Element('div').set('html', '<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=10310604&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=10310604&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object><p><a href="http://vimeo.com/10310604">Vincent Pernin au 4X du Châtel RazorSnowbike</a> from <a href="http://vimeo.com/bigbike">BigBike Magazine</a> on <a href="http://vimeo.com">Vimeo</a>.</p>');
        else if (el == 5)
            this.content = new Element('div').set('html', '<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=13866678&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=13866678&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object><p><a href="http://vimeo.com/13866678">DH - Le Rachais, par la Vierge Noire</a> on <a href="http://vimeo.com">Vimeo</a>.</p>');

        (function(){ this.content.getFirst().setStyle('visibility', 'visible'); }).delay(1000, this);

        this.popup.adopt(this.content);
        this.popup.adopt(this.actions);

        this.show('video');
    },




    confirm: function(el){
        this.popup.addClass('confirm');

        this.actionOk.addEvent('click', function() {
            this.options.onReturn = true;
            this.hide();
        }.bind(this));
        this.actions.adopt(this.actionOk);

        this.actionCancel.addEvent('click', function() {
            this.options.onReturn = false;
            this.hide();
        }.bind(this));
        this.actions.adopt(this.actionCancel);

        this.show('confirm');
    },

    prompt: function(el){
        this.popup.addClass('prompt');

        this.actionInput = new Element('input', {
                'id': 'actionInput',
                'class': 'input',
                'type': 'text',
                'value': '',
                'styles': {
                    'width': '250px'
                }
        });
        this.actions.adopt(this.actionInput);

        this.actions.adopt(new Element('br'));

        this.actionOk.addEvent('click', function() {
            this.options.onReturn = this.actionInput.value;
            this.hide();
        }.bind(this));
        this.actions.adopt(this.actionOk);

        this.actionCancel.addEvent('click', function() {
            this.options.onReturn = false;
            this.hide();
        }.bind(this));
        this.actions.adopt(this.actionCancel);

        this.show('prompt');
    },

    ajax: function(){
        this.options.ajax.onSuccess = this.ajaxResponse.bind(this);

        new Request.HTML(this.options.ajax).send();
    },

    ajaxResponse: function(responseTree, responseElements, responseHTML, responseJavaScript){
        eval(responseJavaScript);

        this.popup.addClass('ajax');

        this.actionOk.addEvent('click', function() {
            this.options.onReturn = true;
            this.hide();
        }.bind(this));

        this.actions.adopt(this.actionOk);

        this.content = new Element('div').set('html', responseHTML);

        this.popup.adopt(this.content);
        this.popup.adopt(this.actions);

        this.popup.getElements('a').each(function(e) {
            e.addEvent('click', function(e) {
                this.hide();
            }.bind(this));
        }.bind(this));

        this.show('ajax');
    },

    iFrame: function(el){

    },

    slideShow: function(el){

    }
});