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

	openclose:function($, speed){
		this.$mainpanel.stop() //stop any animation
		if (this.$mainpanel.attr('openstate')=='closed')
		    this.$mainpanel.animate({top:10, opacity: .60, height:130}, 300).attr({openstate: 'open'}),
			this.$mainpanel.animate({top:27, opacity: .10, height:13}, 300).attr({openstate: 'open'}),
			this.$mainpanel.animate({top:27, opacity: .98, height:13}, 2500).attr({openstate: 'open'})
		else
			this.$mainpanel.animate({top:13, opacity: .60, height:110},300).attr({openstate: 'closed'}),
			this.$mainpanel.animate({top:27, opacity: .95, height:140}, 333).attr({openstate: 'closed'})
			
	},
	
	init:function(file, height, speed){
		jQuery(document).ready(function($){
			zpanel.$mainpanel=$('<div id="dropdownpanel"><div class="contentdiv"></div><div class="control">'+zpanel.controltext+'</div></div>').prependTo('#panel')
			var $contentdiv=zpanel.$mainpanel.find('.contentdiv')
			var $controldiv=zpanel.$mainpanel.find('.control').css({cursor: 'wait'})
			$contentdiv.load(file, '', function($){
					var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px'
					$contentdiv.css({height: heightattr})
					zpanel.contentdivheight=parseInt($contentdiv.get(0).offsetHeight)
			zpanel.$mainpanel.css({top:27, opacity: .0, height:13, visibility:'visible', width:1+'%'}, 1100).attr('openstate', 'open')
					zpanel.$mainpanel.animate({top:27, opacity: .99, height:13,  width:90+'%'}, 1100).attr('openstate', 'open')
					zpanel.$mainpanel.animate({top:27, opacity: .0, height:13,  width:100+'%'}, 1000).attr('openstate', 'open')
					zpanel.$mainpanel.animate({top:75, opacity: .0, height:13,  width:100+'%'},50).attr('openstate', 'open')
					zpanel.$mainpanel.animate({top:55, opacity: .0, height:10, width:100+'%'}, 500).attr('openstate', 'open')
					zpanel.$mainpanel.animate({top:75, opacity: .40, height:95,  width:100+'%'}, 500).attr('openstate', 'open')

					zpanel.$mainpanel.animate({top:27,  opacity: .80, height:145}, 1500).attr('openstate', 'open')
					zpanel.$mainpanel.animate({top:27,  opacity: .85}, 2000).attr({openstate: 'closed'})
					$controldiv.css({cursor:'hand', cursor:'pointer'})
			})
			zpanel.$mainpanel.click(function(){zpanel.openclose($, speed)})		
		})
	}
}

//Initialize script: zpanel.init('path_to_content_file', 'height of content DIV in px', animation_duration)
zpanel.init('navigation.html', '80', 1000)