var balloon = {
	
	current_active : null
	,balloon_item : null
	,settings : {}
	,create_balloon : function(p_settings)
	{
		if(p_settings != undefined)
			this.settings = p_settings;

		balloon_item = document.createElement("div"); 
		balloon_item.id = "balloon";
		document.body.appendChild(balloon_item);
		
		this.balloon_item = $("#balloon");
		this.balloon_item.css({
			 "display"  : "none"
			,"color":"#e67300"
			,"width":"229px"
			,"height":"95px"
			,"font-size":"12px"
			,"font-weight":"bold"
            ,"z-index" : "0" 
		});	
        
        $('#balloon').click(function(e,b){            
            $('#balloon').hide();
        });
	}
	,
	show : function(p_id , p_text)
	{
		
        p_text = "<div style='margin:10px 23px 0px 23px;width:150px;text-align:"+this.settings.position+";float:"+this.settings.position+"'>"+p_text+"</div>"
		this.current_active = p_id;
		var pos = $("#"+p_id).show().position();  
        var eleOffset = $("#"+p_id).offset();
		if(this.settings.position == 'right')
			var width =    $("#"+p_id).width() + 5;
		else
			var width = -229; /*baloon width*/
		this.balloon_item.css({
             "left": eleOffset.left+width
            ,"top": eleOffset.top-25
			,"position" : "absolute"
			,"text-align" : this.settings.position
			,"background":"url('client_side/images/every_page/balloon_"+this.settings.position+".png') "+this.settings.position+" top no-repeat"
		});
		
		this.balloon_item.css({"display":"block"});
		this.balloon_item.html(p_text);	
		$("#"+p_id).css({"border-color" :"red"});
		this.scroll_win(0,pos.top-29)	
	}
	,
	scroll_win : function (p_x,p_y)
	{
		$('html,body').animate({"scrollTop": p_y}, 'slow');		
	}
	,
	hide : function(p_id)
	{
		this.balloon_item.css({"display":"none"});
		$("#"+p_id).css({"border-color" :""});
	}
        
}