Request.HTML.implement({
  
         processHTML: function(text){
             var match = text.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
             text = (match) ? match[1] : text;
            
             var container = new Element('div');
            
             return $try(function(){
                 var root = '<root>' + text + '</root>', doc;
                 if (Browser.Engine.trident){
                     doc = new ActiveXObject('Microsoft.XMLDOM');
                     doc.async = false;
                     doc.loadXML(root);
                 } else {
                     doc = new DOMParser().parseFromString(root, 'text/html');
                 }
                 root = doc.getElementsByTagName('root')[0];
                 for (var i = 0, k = root.childNodes.length; i < k; i++){
                     var child = Element.clone(root.childNodes[i], true, true);
                     if (child) container.grab(child);
                 }
                 return container;
             }) || container.set('html', text);
         }
    
     });

var popupItem = {

    init: function(options){
        this.options = $extend({
            previewWidth:    PREVIEW_POPUP_WIDTH,
            previewHeight:   PREVIEW_POPUP_HEIGHT,
            popupDuration:   POPUP_DURATION,
            fadeoutDuration: FADEOUT_DURATION,
            previewId:       POPUP_HOLDER,
            triggerId:       PREVIEW_TRIGGER_ID,
            closeBarContent: PREVIEW_CLOSE_CONTENT,
            closeId:         POPUP_CLOSE_ID,
            overlayOpacity:  OVERLAY_OPACITY
        }, options || {});
        
        $$('area.'+this.options.triggerId).each( function(el){
            el.addEvent('click', function(e){ 
                this.pid = el.getProperty('name');
                var event = new Event(e);
                this.open(event);
            }.bind(this));  
        }, this);
        
        $$('img.persSubmit').each( function(el){
            el.addEvent('click', function(e){ 
                this.pid = el.getProperty('name');
                var event = new Event(e);
                this.openPers(event);
            }.bind(this));  
        }, this);	
        //this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
		this.eventPosition = this.positionOverlay.bind(this);      
        
        this.overlay = new Element('div', {'id': 'overlay'}).setStyles({'opacity': 0, 'display': 'none'}).inject(document.body);
        this.eventPosition();
        
        this.popup = new Element('div', {'id': this.options.previewId}).setStyles({'display': 'none'}).inject(document.body);
        
        
        //this.popup = new Element('div', {'id': this.options.previewId}).inject(document.body);
        //this.overlay.style.display = 'none';
        //this.popup.style.display = 'none';
        this.closer = new Element('div', {'id': this.options.closeId}).inject(this.popup);
        closeLink = this.closer.set('html', this.options.closeBarContent).onclick = this.overlay.onclick = this.close.bind(this);
        this.popupContent = new Element('div', {'id': 'ajaxContent'}).injectInside(this.popup)
        this.initialised = true;
    },     
   
    open: function(event){
    
        this.overlay.style.display = 'block';
        this.overlay.style.opacity = 0;
        this.setup(true);
        this.eventPosition();
        this.popupContent.set('html', '');        
        //this.popupContent.setStyle('height', 1);
        this.popup.setStyles({
            'width': 1, 
            'height': 1,
            'padding': 0,
            'display': 'block'
        });
        
        this.overlay.set('tween', {duration: 500});
        this.overlay.tween('opacity', [0,this.options.overlayOpacity]);

        var myEffect = new Fx.Morph(this.popup, {duration: this.options.popupDuration, transition: Fx.Transitions.Sine.easeOut});
        myEffect.start({
            'opacity': [0.9,1],
            'width': [1,this.options.previewWidth],  
            'height': [1,this.options.previewHeight],
            'top': [event.page.y, ((window.getHeight()/2) + window.getScrollTop()  - (this.options.previewHeight / 2))],
            'left': [event.page.x, ((window.getWidth() / 2) + window.getScrollLeft() - (this.options.previewWidth / 2))]
        }).chain(function(){this.loadContents()}.bind(this));
    },
    
     openPers: function(event){
        url = $(document.body).getElement('.persSubmit').get('name');
        this.overlay.style.display = 'block';
        this.overlay.style.opacity = 0;
        this.setup(true);
        this.eventPosition();
        this.popupContent.set('html', '');        
        //this.popupContent.setStyle('height', 1);
        this.popup.setStyles({
            'width': 1, 
            'height': 1,
            'padding': 0,
            'display': 'block'
        });
        
        this.overlay.set('tween', {duration: 500});
        this.overlay.tween('opacity', [0,this.options.overlayOpacity]);

        var myEffect = new Fx.Morph(this.popup, {duration: this.options.popupDuration, transition: Fx.Transitions.Sine.easeOut});
        myEffect.start({
            'opacity': [0.9,1],
            'width': [1,this.options.previewWidth],  
            'height': [1,this.options.previewHeight],
            'top': [event.page.y, ((window.getHeight()/2) + window.getScrollTop()  - (this.options.previewHeight / 2))],
            'left': [event.page.x, ((window.getWidth() / 2) + window.getScrollLeft() - (this.options.previewWidth / 2))]
        }).chain(function(){this.loadContents(url)}.bind(this));
    },
    
    loadContents: function(url){    
        var url = (url) ? url : "/detail.php?p="+this.pid+"&preview=1"; 
        
        if($defined(this.vCode)){
            url = url+'&v='+this.vCode;
        }
        this.popupContent.set('html', '<br /><div style="text-align: center;"><img src="/images/ajax_loading.gif" /><br/>Loading...</div>');
        
        var ajaxOptions = {
            url: url,
            mode: 'get',
            update: $('ajaxContent'),
            evalScripts: 1,
            onComplete: function(){
                $('detailContainer').onload = this.resizeWindow();
            }.bind(this)
        }        
        this.ajaxRequest = new Request.HTML(ajaxOptions).send();        
    },
    
    loadPostContents: function(url, form) {   
        var ajaxOptions = {
            url: url,
            update: $('ajaxContent'),
            evalScripts: 1,
            onComplete: function(){
                $('ajaxContent').addEvent('domready',this.resizeWindow.bind(this));
            }.bind(this)
        }
        this.ajaxRequest = new Request.HTML(ajaxOptions).post($(form));     
    },
        
    personalize: function(url){        
        this.loadContents(url);
    },
    
    resizeWindow: function(){
        //alert($('detailContainer').getSize().y);
        var myEffect = new Fx.Morph(this.popup, {duration: 500, transition: Fx.Transitions.Sine.easeOut});
        myEffect.start({
            'height': [this.closer.getSize().y + $('detailContainer').getSize().y]
        });
    },
    
    positionOverlay: function(){
	    this.overlay.setStyles({'left': 0, 'top': window.getScrollTop(), 'height': window.getHeight()});
    },
    
	keyboardListener: function(event){
		switch (event.keyCode){
			case 27: case 88: this.close(); break;
		}
	},
    
    setup: function(open){
     /*
		var elements = $A(document.getElementsByTagName('object'));
		elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
		elements.extend(document.getElementsByTagName('iframe'));
		elements.each(function(el){
			if (open) el.lbBackupStyle = el.style.visibility;
			el.style.visibility = open ? 'hidden' : el.lbBackupStyle;
		});
  */
        var ie6 = Browser.Engine.trident4;
        ["object", ie6 ? "select" : "embed"].forEach(function(tag) {
			Array.forEach(document.getElementsByTagName(tag), function(el) {
				if (open) {
                    el.lbBackupStyle = el.style.visibility;
                    el.style.visibility = "hidden";
                } else {
                    if($defined(el.lbBackupStyle)){                        
                        el.style.visibility =  el.lbBackupStyle;
                    }
                }
				//el.style.visibility = open ? "hidden" : el.lbBackupStyle;
			});
		}); 
		var fn = open ? 'addEvent' : 'removeEvent';
		window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
		//document[fn]('keydown', this.eventKeyDown);
		this.step = 0;
	},
  
    close: function(){
        /*
        var elements = $A(document.getElementsByTagName('object'));
		elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
		elements.extend(document.getElementsByTagName('iframe'));
		elements.each(function(el){
			if (open) el.lbBackupStyle = el.style.visibility;
			el.style.visibility = open ? 'visible' : el.lbBackupStyle;
		});
        */
        this.setup(0);
        this.overlay.style.display = 'none';
       // $('detailContainer').destroy();
        var myEffect = new Fx.Morph(this.popup, {duration: this.options.fadeoutDuration, transition: Fx.Transitions.Sine.easeOut});
        myEffect.start({
            'top': this.popup.getStyle('top').toInt() - 50,
            'left': this.popup.getStyle('left').toInt()- 50,
            'padding': 50,
            'opacity': [0]
        }).chain(function(){
            $('ajaxContent').set('html', '')
        });
    }
}

window.addEvent('domready', popupItem.init.bind(popupItem));