var jkpanel={
    controltext: '',
    $mainpanel: null, contentdivheight: 0,

    openclose:function($, speed){
        this.$mainpanel.stop() //stop any animation
        if (this.$mainpanel.attr('openstate')=='closed')
            this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'})
        else
            this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'})
    },
    
    init:function(text, height, speed){
        jQuery(document).ready(function($){
            jkpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv">'+text+'</div><div class="control">'+jkpanel.controltext+'</div></div>').prependTo('body')
            var $contentdiv=jkpanel.$mainpanel.find('.contentdiv')
            var $controldiv=jkpanel.$mainpanel.find('.control').css({cursor: 'wait'})
            //$contentdiv.load(file, '', function($){
                    var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
                    $contentdiv.css({height: heightattr})
                    jkpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
                    jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'}).attr('openstate', 'closed')
                    $controldiv.css({cursor:'hand', cursor:'pointer'})
            //})
            jkpanel.$mainpanel.click(function(){jkpanel.openclose($, speed)})        
        })
    }
}

var html_text;

html_text="\
<center>\
<img src='http://hosted.by.ivimbu.com/menu.jpg' usemap='#1' alt='' border='0'> <br />\
  <map name='1'>\
    <area shape='rect' coords='32,2,117,69' href='http://www.ivimbu.com/news.php' alt='iVimbu News'>\
    <area shape='rect' coords='134,2,219,69' href='http://servers.ivimbu.com/index.php' alt='Server Status'>\
    <area shape='rect' coords='235,2,320,69' href='http://servers.ivimbu.com/maintenance.php' alt='Downtime info'>\
    <area shape='rect' coords='338,2,423,69' href='http://www.ivimbu.com/support.php' alt='Support'>\
  </map> \
<span style='color: #0F0'>All oke.</span>\
</center>\
";

//Initialize script: jkpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
jkpanel.init(html_text, '90px', 500)
// Orginal: jkpanel.init(html_text, '70px', 500)

// Text to use:
//
// This new dropdown links to are support and server status pages, and will also show errors and maintenance info.\
// There is a error on one of the servers, go to the server status page to see witch one\
// There are maintenance in de next days, go to the Downtime info page to see whan and what.\
// We are working on some servers, go to the Downtime info page to see on what.\
// There is a unknown error somewhere in the network, we are tring to fix it. follow the progres on the Downtime page.\
//
// Nothing to report\
// There are no messages at this time\
//
// Extra option
// <span style='color: #F00'>This text will be red !</span>
// #0F0 is for green
// #F60 is for orange
//