var a= new Array(0, 0, 0, 0);

$(document).ready(function()
{
	//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
	$("#firstmidpane p.menu_head").click(function()
    {
		if($(this).attr('id') == 'tab1'){
			if(a[0] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 1;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
		}
		else if($(this).attr('id') == 'tab2'){
			if(a[1] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 1;	a[2] = 0;	a[3] = 0;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[1] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
		}
		else if($(this).attr('id') == 'tab3'){
			if(a[2] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 1;	a[3] = 0;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[2] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
		}
		else if($(this).attr('id') == 'tab4'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		
		
		else if($(this).attr('id') == 'tab5'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		
		else if($(this).attr('id') == 'tab6'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		else if($(this).attr('id') == 'tab7'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		else if($(this).attr('id') == 'tab8'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		else if($(this).attr('id') == 'tab9'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		
		else if($(this).attr('id') == 'tab10'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		else if($(this).attr('id') == 'tab11'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		
			else if($(this).attr('id') == 'tab12'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		else if($(this).attr('id') == 'tab13'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		else if($(this).attr('id') == 'tab14'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		else if($(this).attr('id') == 'tab15'){
			if(a[3] == 0){
				$(this).css({'backgroundImage':"url(images/down.png)"});
				a[0] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 1;
			}
			else {
				$(this).css({'backgroundImage':"url(images/left.png)"});
				a[3] = 0;	a[1] = 0;	a[2] = 0;	a[3] = 0;
			}
			
		}
		
		
		$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
       	$(this).siblings().css({backgroundImage:"url(images/left.png)"});
		
		//alert('a[0]'+a[0]+'  a[1]'+a[1]+'  a[2]'+a[2]+'  a[3]'+a[3]);
	});
	
	//slides the element with class "menu_body" when mouse is over the paragraph
	$("#secondmidpane p.menu_head").mouseover(function()
    {
	     $(this).css({backgroundImage:"url(images/down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(images/left.png)"});
	});
});