var height = 20; // height of the menu headers
  var iheight = 15; // height of the menu_items
  
  var bgc = "black" // background color of the item
  var tc = "white" // text color of the item
  
  var over_bgc = "black";
  var over_tc = "gold";
  
  var speed = 0;
  var step = 5;
  var timerID = "";
  var N = (document.all) ? 0 : 1;
  var width = 152
  var self_menu = new Array();

self_menu[0] = [0,20,0,1];	 //Home
self_menu[1] = [19,20,0,2];	 //Artists
self_menu[2] = [39,210,0,-2];//List of Artists
self_menu[3] = [38,20,0,3];	 //Photographers
self_menu[4] = [58,165,0,-2];//List of Photographers
self_menu[5] = [57,20,0,4]   //Biographies
self_menu[6] = [76,20,0,5]   //Genres
self_menu[7] = [96,135,0,-2]  //List of Genres
self_menu[8] = [95,20,0,6];	 //Exhibitions
self_menu[9] = [115,105,0,-2]; //List of Exhibitions
self_menu[10] = [114,20,0,7]; //Services
self_menu[11] = [134,60,0,-2];//List of Services
self_menu[12] = [133,20,0,8]; //Contact


function color(obj)
{
 document.getElementById(obj).style.backgroundColor = over_bgc;
 document.getElementById(obj).style.color = over_tc
}

function uncolor(obj)
{
 document.getElementById(obj).style.backgroundColor = bgc;
 document.getElementById(obj).style.color = tc;
}

function pull_down(nr,c) {
  if (timerID == "") {
    to = self_menu[nr+1][1];
    begin = nr + 2;
    if (timerID != "") clearTimeout(timerID);
    if (self_menu[nr+1][2] == 0) {
      self_menu[nr+1][2] = 1;
      if(nr == self_menu.length-2) {to++;}
      menu_move(begin,to,0,1);
    }
    else {
      to = 0;
      self_menu[nr+1][2] = 0;
      name = "down"+(nr+2);
      open_item = 0;
      for(i=0;i<nr;i++) {
        if(self_menu[i][2] == 1) {
		  open_item += self_menu[i][1];
        }
      }
      if (N == false) {open_item-= (c*1)};
      if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
      else  val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
      menu_move(begin,to,val,-1);
    }
  }
}


function menu_move(nr,to,nowv,sign) {
  if ( (sign*(nowv+(sign*step)))<to) {
	nowv+=(sign*step);
    for (i=nr;i<self_menu.length;i++) {
      name = "down" + i;
      obj = document.getElementById(name);
      obj.style.top = parseInt(obj.style.top)+(sign*step);
    }
    name = "down" + (nr-1);
    obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
    timerID = setTimeout("menu_move("+nr+","+to+","+nowv+","+sign+")",speed);
  }
  else {
    for (i=nr;i<self_menu.length;i++) {
      name = "down" + i;
      obj = document.getElementById(name);
      obj.style.top = parseInt(obj.style.top)+((to - nowv));
    }
    name = "down" + (nr-1);
    obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(to+1)+",0)";
  }
  timerID = "";
}


function write_menu() {
document.write("<div id='menu_layer' style='position:absolute; left:10; top:105; width:120px; height:600px;'>");
document.write("<div style='position:absolute'>");
//home
var i=0;
document.write("<a href='index.htm'><div class='menu' style='top:"+self_menu[i][0]+";height:20' id='down"+i+"'>Home</div></a>");
//art
i=1;
document.write("<div class='menu' style='top:"+self_menu[i][0]+";height:20' id='down"+i+"' onclick='pull_down(1,2)'>Art</div>");
//art submenu
i=2;
document.write("<div class='item_panel' id='down"+i+"' style='top:"+self_menu[i][0]+"'>");
document.write("<a href='jebbett_a.htm'  ><div id='jebbett'    class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Clive Jebbett</div></a>"); 
document.write("<a href='baker1.htm'    ><div id='baker'      class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Darren Baker</div></a>"); 
document.write("<a href='emmitt1.htm'   ><div id='emmitt'    class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Mark Emmitt</div></a>"); 
document.write("<a href='middletonp.htm'><div id='middletonp' class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Phil Middleton</div></a>"); 
document.write("<a href='whelan.htm'    ><div id='whelan'     class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Jim Whelan</div></a>"); 
document.write("<a href='copsey.htm'    ><div id='copsey'     class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Paul Copsey</div></a>"); 
document.write("<a href='davies1.htm'   ><div id='davies'     class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Roger Davies</div></a>"); 
document.write("<a href='bevan.htm'     ><div id='bevan'      class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Norman Bevan</div></a>"); 
document.write("<a href='holdsworth1.htm'><div id='holdsworth' class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Barrie Holdsworth</div></a>"); 
document.write("<a href='spoors.htm'    ><div id='spoors'     class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Ron Spoors</div></a>"); 
document.write("<a href='smith.htm'     ><div id='smith'      class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Jim Smith</div></a>"); 
document.write("<a href='middletonj.htm'><div id='middletonj' class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>John Middleton</div></a>"); 
document.write("<a href='fletcher.htm'  ><div id='fletcher'   class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Julie Fletcher</div></a>"); 
document.write("<a href='luty.htm'      ><div id='luty'       class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Teresa Luty</div></a>");
document.write("</div>");
//photography
i=3;
document.write("<div class='menu' style='top:"+self_menu[i][0]+";height:20' id='down"+i+"' onclick='pull_down(3,3)'>Photography</div>");
//photography submenu
i=4;
document.write("<div class='item_panel' id='down"+i+"' style='top:"+self_menu[i][0]+"'>");
document.write("<a href='hollingworth1.htm'><div id='hollingworth' class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Andy Hollingworth</div></a>"); 
document.write("<a href='sanderson1.htm'><div id='sanderson'       class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Andrew Sanderson</div></a>"); 
document.write("<a href='cryer1.htm'   ><div id='cryer'            class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Terry Cryer</div></a>"); 
document.write("<a href='handley1.htm' ><div id='handley'          class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Alex Handley</div></a>"); 
document.write("<a href='goodwin1.htm' ><div id='goodwin'          class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Steve Goodwin</div></a>"); 
document.write("<a href='hines1.htm'   ><div id='hines'            class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Shaun Hines</div></a>"); 
document.write("<a href='mcbride1.htm' ><div id='mcbride'          class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Karen McBride</div></a>"); 
document.write("<a href='moss1.htm'    ><div id='moss'             class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Keith Moss</div></a>"); 
document.write("<a href='reynolds1.htm'><div id='reynolds'         class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Kevin Reynolds</div></a>"); 
document.write("<a href='crowther.htm' ><div id='crowther'         class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Joanne Crowther</div></a>"); 
document.write("<a href='mendia.htm'   ><div id='mendia'           class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>David G Mendia</div></a>");
document.write("</div>");
//biographies
i=5;
document.write("<a href='biographies.htm'><div class='menu' style='top:"+self_menu[i][0]+";height:20' id='down"+i+"'>Biographies</div></a>");
//Genres
i=6;
document.write("<div class='menu' style='top:"+self_menu[i][0]+";height:20' id='down"+i+"' onclick='pull_down(6,5)'>Genre</div>");
//Genres submenu
i=7;
document.write("<div class='item_panel' id='down"+i+"' style='top:"+self_menu[i][0]+"'>");
document.write("<a href='genre_portraiture.htm' ><div id='portraiture'  class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Portraiture</div></a>");
document.write("<a href='genre_landscape.htm'   ><div id='landscape'    class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Landscape</div></a>");
document.write("<a href='genre_music.htm'       ><div id='music'        class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Music</div></a>");
document.write("<a href='genre_flora.htm'       ><div id='flora'        class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Flora</div></a>");
document.write("<a href='genre_still.htm'       ><div id='still'        class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Still Life</div></a>");
document.write("<a href='genre_abstract.htm'    ><div id='abstract'     class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Abstract</div></a>");
document.write("<a href='genre_architecture.htm'><div id='architecture' class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Architecture</div></a>");
document.write("<a href='genre_figurative.htm'><div id='figurative'     class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Figurative</div></a>");
document.write("<a href='genre_nudes.htm'      ><div id='nudes'         class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Fine Art Nudes</div></a>");
document.write("</div>");

//Exhibitions
i=8;
document.write("<div class='menu' style='top:"+self_menu[i][0]+";height:20' id='down"+i+"' onclick='pull_down(8,6)'>Exhibitions</div>");
//Exhibitions submenu
i=9;
document.write("<div class='item_panel' id='down"+i+"' style='top:"+self_menu[i][0]+"'>");
document.write("<a href='ex_bonhams_baker.htm'><div id='bonhams'   class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Bonhams</div></a>");
document.write("<a href='ex_lever2.htm'     ><div id='lever2'      class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Lever Faberg&eacute;</div></a>");
document.write("<a href='ex_cc.htm'         ><div id='cc'          class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Clive Christian</div></a>");
document.write("<a href='ex_ldic.htm'       ><div id='ldic'        class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>LDIC</div></a>");
document.write("<a href='ex_lever.htm'      ><div id='lever'       class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Lever Faberg&eacute;</div></a>");
document.write("<a href='ex_nmpft.htm'      ><div id='nmpft'       class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>National Museum</div></a>");
document.write("<a href='ex_waterstones.htm'><div id='waterstones' class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Waterstones</div></a></div>");
//Services
i=10;
document.write("<div class='menu' id='down"+i+"' style='top:"+self_menu[i][0]+";height:20' onclick='pull_down(10,7)'>Services</div>");
//Services submenu
i=11;
document.write("<div class='item_panel' id='down"+i+"' style='top:"+self_menu[i][0]+"'>");
document.write("<a href='artist_management.htm' ><div id='manage'     class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Artist Management</div></a>");
document.write("<a href='private_commission.htm'><div id='commission' class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Private&nbsp;Commission</div></a>");
document.write("<a href='image_licensing.htm'   ><div id='licensing'  class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Image Licensing</div></a>");
document.write("<a href='web_design.htm'        ><div id='webdesign'  class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Web Design</div></a></div>");
//document.write("<a href='original_artwork.htm'  ><div id='original'   class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Original Artwork</div></a>");
//document.write("<a href='prints.htm'            ><div id='prints'     class='item' style='height:15' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'>Limited Ed. Prints</div></a>"); 

//Contact
i=12;
document.write("<div class='menu' id='down"+i+"' style='top:"+self_menu[i][0]+";height:20'><a href='contact.htm'><div class='menu'>Contact</div></a></div>");
document.write("</div>");

document.write("</div>");
}


function open_menu(nr) {
  var to = self_menu[nr+1][1];
  self_menu[nr+1][2] = 1;
  nr += 2;
  for (i=nr;i<self_menu.length;i++) {
    var name = "down" + i;
    var obj = document.getElementById(name);
    obj.style.top = parseInt(obj.style.top)+to;
  }
  name = "down" + (nr-1);
  obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(to)+",0)";
}