/*
	FrameOverHtml
	Requires Mootool 1.2 Core
	Ok!nteractif
*/

var POP_TITLE =           'Partage ta passion';

var CLOSE_ICON_PATH 	= 	'medias/btn_close_up.gif';
var FB_ICON_PATH 	= 	    'medias/icon_facebook.gif';
var PAGE_DIV_ID 		= 	  'ewLayout';

/* CSS ATTRIBUTES ID */
var FRAME_CONTAINER_ID 	= 	'frame_container';
var EXTERNAL_FRAME_ID 	= 	'external_frame';
var FRAME_HEADER_ID 	= 	  'fbpop_header';
var FRAME_CONTENT_ID 	= 	  'fbpop_content';
var FACEBOOK_FRAME_ID 	= 	'fbpop_iframe';
var FRAME_FOOTER_ID 	= 	  'fbpop_footer';
var OVERLAY_ID 			= 	    'overlay';
var OVERLAY_CLOSE_ID 	= 	  'overlay_close';

var FrameOverHtml = new Class({
	
	frame: 		  null,
	container: 	null,
	bandeTop:   null,
	center:     null,
	header: 	  null,
	fbicon :    null,
	popTitle :  null,
	content:    null,
	footer:     null,
	bandeBottom:null,
	overlay: 	  null,
	closeLink: 	null,
	closeBtn: 	null,
	pageDiv: 	  null,
	divClear:   null,
	closed:     false,
	
	initialize: function(sourcePath, isIFrame) {
		
		this.createContainer();
		this.createBandeTop();
		this.createCenter();
		this.createHeader();
		this.createContent();
		this.createFooter();
		this.createBandeBottom();
		this.createOverlay();
		this.createCloseBtn();
		this.createFrame(isIFrame, sourcePath);
	},
	
	open: function(){
	
    this.fbIcon.inject(this.header);
    this.popTitle.inject(this.header);    
		this.closeBtn.inject(this.closeLink);
		this.closeLink.inject(this.header);			
		this.divClear.inject(this.header);
		
		this.bandeTop.inject(this.container);
		
		this.center.inject(this.container);
		
		this.header.inject(this.center);
		
		this.frame.inject(this.content);
    this.content.inject(this.center);	  
      
		this.footer.inject(this.center);
		
		this.bandeBottom.inject(this.container);
			
		this.container.inject(this.overlay);		
		this.overlay.inject(document.body);
	},
	
	createBandeTop: function(){
    this.bandeTop = new Element('div', {'id':'fbpop_bande_top', html:'<img style="float:left;" src="medias/popup_border_top_left.png" alt="" /><div class="fbpop_filler"></div><img style="float:right;" src="medias/popup_border_top_right.png" alt="" /><div class="clear"></div>'});
	},
	createCenter: function(){
    this.center = new Element('div', { 'id':'fbpop_center' });
	},
	createFrame: function(isIFrame, sourcePath){
		//	For now it is just for an IFrame
		this.frame = new IFrame({ src:sourcePath, id:FACEBOOK_FRAME_ID, 'style':'border:0', 'frameBorder':"0" });
	},
	createContainer: function(){
		this.container =  new Element ('div', { 'id':FRAME_CONTAINER_ID });
		this.divClear =   new Element ('div', {'class':'clear'});
	},
	createHeader: function(){
		this.header =   new Element ('div',   { 'id':FRAME_HEADER_ID });
		this.popTitle = new Element ('span',  { html:POP_TITLE});
		this.fbIcon =   new Element ('img',   { src:FB_ICON_PATH, border:0, 'class':'fbicon' });
	},
	
	createContent: function(){
		this.content = new Element('div', { 'id':FRAME_CONTENT_ID });
	},
	
	createFooter: function(){
    this.footer = new Element('div', { 'id':FRAME_FOOTER_ID, html:'<a href="http://www.sauvedesvies.com">SauveDesVies.com</a>' });
	},
	
	createBandeBottom: function(){
    this.bandeBottom = new Element('div', {'id':'fbpop_bande_bottom', html:'<img style="float:left;" src="medias/popup_border_bottom_left.png" alt="" /><div class="fbpop_filler"></div><img style="float:right;" src="medias/popup_border_bottom_right.png" alt="" /><div class="clear"></div>'});
	},
	
	createOverlay: function(){
		this.overlay = new Element('div', { 'id':OVERLAY_ID });
	},
	createCloseBtn: function(){
		this.closeLink = new Element('a', {
    	'style':'cursor:pointer;',
			events:{
				'click': function(){
          if(this.closeCallBack){
            this.closeCallBack();
          }
					this.overlay.dispose();
					this.closed = true;
				}.bind(this)
			},
			id:OVERLAY_CLOSE_ID
		});
		
		this.closeBtn = new Element('img', { src:CLOSE_ICON_PATH, border:0 });
	}	
});