var facebox = new Class({
	Implements: Options,
	options: {
		speed:300,
		fx:Fx.Transitions.linear.easeOut
	},
	initialize: function(a,b){
		this.setOptions(b);
		this.message = a;
		var $head = $$("head")[0];
		if(!$('facebox_css')) new Element('link',{id:'facebox_css',type:'text/css',rel:'stylesheet',media:'all',href:'http://m.oleeee.com/f/c/facebox.css'}).inject($head);
		
		
		if(!$('faceboxContener')){
			this.contener = new Element('div',{id:'faceboxContener'});
			this.contener.set('html',this.html()).inject(document.body);
		}

		$facebox = $('facebox');
		$facebox.getElement('div.wca').set('html',this.message);


			
			$facebox.setStyles({
				top:	$(window).getScroll().y + ($(window).getHeight() / 3),
				left:	$(window).getWidth()/ 2 - (410 / 2),
				display:'block',
				opacity:0
			});
		

		$myFx = new Fx.Tween($facebox,{duration:this.options.speed,transition:this.options.fx});
		$myFx.start('opacity',1);

		$facebox.getElement('a.close').addEvent('click',function(e){
			e.stop();
			$myFx.start('opacity',0).chain(function(){
				$facebox.setStyle('display','none');
			});
			return false;
		});



		/*
		if($facebox.getStyle('display') == 'none'){
				
					$facebox.setStyles({
						top:	$(window).getScroll().y + ($(window).getHeight() / 10),
						display:'block',
					});	

					$myFx.start('opacity',1);
		}
*/




	},
    	html : function(){
    	  return '	<div style="top: 0; left: 0;" id="facebox">       <div class="popup">         <table style="width:410px">           <tbody>             <tr>               <td class="tr"/><td class="b"/><td class="tl"/>             </tr>             <tr>               <td class="b"/>               <td class="body">                 <div class="content" style="display: block;"><div class="wca"></div></div>                 <div class="footer" style="display: block;">                   <a class="close" href="#">                     <img class="close_image" title="close" src="http://m.oleeee.com/f/i/themes/defaut/facebox/closelabel.gif"/>                   </a>                 </div>               </td>               <td class="b"/>             </tr>             <tr>               <td class="br"/><td class="b"/><td class="bl"/>             </tr>           </tbody>         </table>       </div>     </div><div class="facebox_hide facebox_overlayBG" id="facebox_overlay" style="display: block; opacity: 0;"/>';
    },

});