/*************************************************************************
  Gloabl Variables for all the Sliders
**************************************************************************/
var speed_down      = 10;
var int_time_down   = 5;

var speed_up        = 5;
var int_time_up     = 10;

/**************************************************************************
  These function control the 'Pet Care' Sub Menu
**************************************************************************/
var currClip1 = 0;
var slider1;
var submenu1;
var max_h1;

function showMenu1(menu_id) {
    clearInterval(slider1);
    submenu1    = menu_id;
    max_h1      = document.getElementById(menu_id).clientHeight;
    slider1     = setInterval("show1()",int_time_down);
}

function show1()    {
    //make the submenu visible
    var curMenu1                = document.getElementById(submenu1);
    curMenu1.style.visibility   = "visible";

    //increment the clip style value
    currClip1 = currClip1 + speed_down;

    //check if the submenu has reached the bottom yet
    if(currClip1 > max_h1)    {
        currClip1 = max_h1
        curMenu1.style.clip = "rect(auto, auto, "+currClip1+"px, auto)";
        clearInterval(slider1);
    }
    else {  //the submenu is still sliding down
        curMenu1.style.clip = "rect(auto, auto, "+currClip1+"px, auto)";
    }
}

function hideMenu1(menu_id) {
    clearInterval(slider1);
    submenu1    = menu_id;
    max_h1      = document.getElementById(menu_id).clientHeight;
    slider1     = setInterval("hide1()",int_time_up);
}

function hide1()    {

    //increment the clip style value
    currClip1 = currClip1 - speed_up;

    var curMenu1 = document.getElementById(submenu1);

    //check if the submenu has reached the bottom yet
    if(currClip1 < 0)    {
        currClip1 = 0
        curMenu1.style.clip = "rect(auto, auto, "+currClip1+"px, auto)";
        clearInterval(slider1);

        //make the submenu invisible
        curMenu1.style.visibility   = "hidden";

    }
    else {  //the submenu is still sliding down
        curMenu1.style.clip = "rect(auto, auto, "+currClip1+"px, auto)";
    }
}


/**************************************************************************
  These function control the 'Staff' Sub Menu
**************************************************************************/
var currClip2 = 0;
var slider2;
var submenu2;
var max_h2;

function showMenu2(menu_id) {
    clearInterval(slider2);
    submenu2    = menu_id;
    max_h2      = document.getElementById(menu_id).clientHeight;;
    slider2     = setInterval("show2()",int_time_down);
}

function show2()    {
    //make the submenu visible
    var curMenu2                = document.getElementById(submenu2);
    curMenu2.style.visibility   = "visible";

    //increment the clip style value
    currClip2 = currClip2 + speed_down;

    //check if the submenu has reached the bottom yet
    if(currClip2 > max_h2)    {
        currClip2 = max_h2
        curMenu2.style.clip = "rect(auto, auto, "+currClip2+"px, auto)";
        clearInterval(slider2);
    }
    else {  //the submenu is still sliding down
        curMenu2.style.clip = "rect(auto, auto, "+currClip2+"px, auto)";
    }
}

function hideMenu2(menu_id) {
    clearInterval(slider2);
    submenu2    = menu_id;
    max_h2      = document.getElementById(menu_id).clientHeight;
    slider2     = setInterval("hide2()",int_time_up);
}

function hide2()    {

    //increment the clip style value
    currClip2 = currClip2 - speed_up;

    var curMenu2 = document.getElementById(submenu2);

    //check if the submenu has reached the bottom yet
    if(currClip2 < 0)    {
        currClip2 = 0
        curMenu2.style.clip = "rect(auto, auto, "+currClip2+"px, auto)";
        clearInterval(slider2);

        //make the submenu invisible
        curMenu2.style.visibility   = "hidden";
    }
    else {  //the submenu is still sliding down
        curMenu2.style.clip = "rect(auto, auto, "+currClip2+"px, auto)";
    }
}

/**************************************************************************
  These function control the 'reproduction' Sub Menu
**************************************************************************/
var currClip3 = 0;
var slider3;
var submenu3;
var max_h3;

function showMenu3(menu_id) {
    clearInterval(slider3);
    submenu3    = menu_id;
    max_h3      = document.getElementById(menu_id).clientHeight;;
    slider3     = setInterval("show3()",int_time_down);
}

function show3()    {
    //make the submenu visible
    var curMenu3                = document.getElementById(submenu3);
    curMenu3.style.visibility   = "visible";

    //increment the clip style value
    currClip3 = currClip3 + speed_down;

    //check if the submenu has reached the bottom yet
    if(currClip3 > max_h3)    {
        currClip3 = max_h3
        curMenu3.style.clip = "rect(auto, auto, "+currClip3+"px, auto)";
        clearInterval(slider3);
    }
    else {  //the submenu is still sliding down
        curMenu3.style.clip = "rect(auto, auto, "+currClip3+"px, auto)";
    }
}

function hideMenu3(menu_id) {
    clearInterval(slider3);
    submenu3    = menu_id;
    max_h3      = document.getElementById(menu_id).clientHeight;
    slider3     = setInterval("hide3()",int_time_up);
}

function hide3()    {

    //increment the clip style value
    currClip3 = currClip3 - speed_up;

    var curMenu3 = document.getElementById(submenu3);

    //check if the submenu has reached the bottom yet
    if(currClip3 < 0)    {
        currClip3 = 0
        curMenu3.style.clip = "rect(auto, auto, "+currClip3+"px, auto)";
        clearInterval(slider3);

        //make the submenu invisible
        curMenu3.style.visibility   = "hidden";
    }
    else {  //the submenu is still sliding down
        curMenu3.style.clip = "rect(auto, auto, "+currClip3+"px, auto)";
    }
}

/**************************************************************************
  These function control the 'Hip Dysplasia' Sub Menu
**************************************************************************/
var currClip4 = 0;
var slider4;
var submenu4;
var max_h4;

function showMenu4(menu_id) {
    clearInterval(slider4);
    submenu4    = menu_id;
    max_h4      = document.getElementById(menu_id).clientHeight;;
    slider4     = setInterval("show4()",int_time_down);
}

function show4()    {
    //make the submenu visible
    var curMenu4                = document.getElementById(submenu4);
    curMenu4.style.visibility   = "visible";

    //increment the clip style value
    currClip4 = currClip4 + speed_down;

    //check if the submenu has reached the bottom yet
    if(currClip4 > max_h4)    {
        currClip4 = max_h4
        curMenu4.style.clip = "rect(auto, auto, "+currClip4+"px, auto)";
        clearInterval(slider4);
    }
    else {  //the submenu is still sliding down
        curMenu4.style.clip = "rect(auto, auto, "+currClip4+"px, auto)";
    }
}

function hideMenu4(menu_id) {
    clearInterval(slider4);
    submenu4    = menu_id;
    max_h4      = document.getElementById(menu_id).clientHeight;
    slider4     = setInterval("hide4()",int_time_up);
}

function hide4()    {

    //increment the clip style value
    currClip4 = currClip4 - speed_up;

    var curMenu4 = document.getElementById(submenu4);

    //check if the submenu has reached the bottom yet
    if(currClip4 < 0)    {
        currClip4 = 0
        curMenu4.style.clip = "rect(auto, auto, "+currClip4+"px, auto)";
        clearInterval(slider4);

        //make the submenu invisible
        curMenu4.style.visibility   = "hidden";
    }
    else {  //the submenu is still sliding down
        curMenu4.style.clip = "rect(auto, auto, "+currClip4+"px, auto)";
    }
}