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"
			//,"padding" : "10px 23px 0px 23px"
            ,"z-index" : "1"
		});	
        $('#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:left;float:"+this.settings.position+"'>"+p_text+"</div>"
        this.current_active = p_id;
        
        var pos = $("#"+p_id).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('/website/media/images/form/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" :""});
	}
}