if (document.images) {
    nav1On = new Image();
    nav1On.src = "images/home_roll.jpg";
    nav1Off = new Image();
    nav1Off.src = "images/home.jpg";
    nav2On = new Image();
    nav2On.src = "images/promo_roll.jpg";
    nav2Off = new Image();
    nav2Off.src = "images/promo.jpg";
    nav3On = new Image();
    nav3On.src = "images/treatments_roll.jpg";
    nav3Off = new Image();
    nav3Off.src = "images/treatments.jpg";
    nav31On = new Image();
    nav31On.src = "images/skin_roll.jpg";
    nav31Off = new Image();
    nav31Off.src = "images/skin.jpg";
    nav32On = new Image();
    nav32On.src = "images/body_roll.jpg";
    nav32Off = new Image();
    nav32Off.src = "images/body.jpg";
    nav33On = new Image();
    nav33On.src = "images/hands_roll.jpg";
    nav33Off = new Image();
    nav33Off.src = "images/hands.jpg";
    nav34On = new Image();
    nav34On.src = "images/lash_roll.jpg";
    nav34Off = new Image();
    nav34Off.src = "images/lash.jpg";
    nav35On = new Image();
    nav35On.src = "images/mens_roll.jpg";
    nav35Off = new Image();
    nav35Off.src = "images/mens.jpg";
    nav4On = new Image();
    nav4On.src = "images/packages_roll.jpg";
    nav4Off = new Image();
    nav4Off.src = "images/packages.jpg";
    nav41On = new Image();
    nav41On.src = "images/corporate_roll.jpg";
    nav41Off = new Image();
    nav41Off.src = "images/corporate.jpg";
    nav42On = new Image();
    nav42On.src = "images/day_spa_roll.jpg";
    nav42Off = new Image();
    nav42Off.src = "images/day_spa.jpg";
	nav43On = new Image();
    nav43On.src = "images/bridal_roll.jpg";
    nav43Off = new Image();
    nav43Off.src = "images/bridal.jpg";
	nav44On = new Image();
    nav44On.src = "images/kids_roll.jpg";
    nav44Off = new Image();
    nav44Off.src = "images/kids.jpg";
    nav5On = new Image();
    nav5On.src = "images/products_roll.jpg";
    nav5Off = new Image();
    nav5Off.src = "images/products.jpg";
    nav51On = new Image();
    nav51On.src = "images/dermalogica_roll.jpg";
    nav51Off = new Image();
    nav51Off.src = "images/dermalogica.jpg";
    nav52On = new Image();
    nav52On.src = "images/nimue_roll.jpg";
    nav52Off = new Image();
    nav52Off.src = "images/nimue.jpg";
    nav53On = new Image();
    nav53On.src = "images/orly_roll.jpg";
    nav53Off = new Image();
    nav53Off.src = "images/orly.jpg";
    nav54On = new Image();
    nav54On.src = "images/biosculpt_roll.jpg";
    nav54Off = new Image();
    nav54Off.src = "images/biosculpt.jpg";
    nav55On = new Image();
    nav55On.src = "images/soil_roll.jpg";
    nav55Off = new Image();
    nav55Off.src = "images/soil.jpg";
    nav6On = new Image();
    nav6On.src = "images/bookings_roll.jpg";
    nav6Off = new Image();
    nav6Off.src = "images/bookings.jpg";
    nav7On = new Image();
    nav7On.src = "images/contact_roll.jpg";
    nav7Off = new Image();
    nav7Off.src = "images/contact.jpg";    
}

//rollover functions
function activate(image_name) {
    if (document.images) {
        document[image_name].src = eval(image_name + "On.src");
    }
}
function deactivate(image_name) {
    if (document.images) {
        document[image_name].src = eval(image_name + "Off.src");
    }
}





function subMenuShow1(el) {
    document.getElementById(el).style.visibility = "visible";
    animatedSubMenu1.elName = el;
    animatedSubMenu1.startFadeInAnimation();
}

function subMenuHide1(el) {
    animatedSubMenu1.startFadeOutAnimation();
}

function subMenuShow2(el) {
    document.getElementById(el).style.visibility = "visible";
    animatedSubMenu2.elName = el;
    animatedSubMenu2.startFadeInAnimation();
}

function subMenuHide2(el) {
    animatedSubMenu2.startFadeOutAnimation();
}

function subMenuShow3(el) {
    document.getElementById(el).style.visibility = "visible";
    animatedSubMenu3.elName = el;
    animatedSubMenu3.startFadeInAnimation();
}

function subMenuHide3(el) {
    animatedSubMenu3.startFadeOutAnimation();
}


var animatedSubMenu1 = {
    timer: null,
    el: null,
    elName: null,
    opacity: 0,

    initializeVar: function() {
        this.el = document.getElementById(this.elName);
    },
    startFadeInAnimation: function() {
        this.initializeVar();
        this.stopAnimation();
        this.timer = setInterval(function() { animatedSubMenu1.doAnimation(5); }, 10);
    },
    startFadeOutAnimation: function() {
        this.initializeVar();
        this.stopAnimation();
        this.timer = setInterval(function() { animatedSubMenu1.doAnimation(-5); }, 10);
    },
    doAnimation: function(amount) {
        //limits
        if ((this.opacity > 0 && amount < 0) || (this.opacity < 100 && amount > 0)) {
            this.opacity += amount;
            this.el.style.filter = "alpha(opacity=" + this.opacity + ")";
            this.el.style.opacity = this.opacity / 100;
        } else {
            this.stopAnimation;
            if (this.opacity == 0) {
                this.el.style.visibility = "hidden";
            }
        }
    },
    stopAnimation: function() {
        clearInterval(this.timer);
    }
};

var animatedSubMenu2 = {
    timer: null,
    el: null,
    elName: null,
    opacity: 0,

    initializeVar: function() {
        this.el = document.getElementById(this.elName);
    },
    startFadeInAnimation: function() {
        this.initializeVar();
        this.stopAnimation();
        this.timer = setInterval(function() { animatedSubMenu2.doAnimation(5); }, 10);
    },
    startFadeOutAnimation: function() {
        this.initializeVar();
        this.stopAnimation();
        this.timer = setInterval(function() { animatedSubMenu2.doAnimation(-5); }, 10);
    },
    doAnimation: function(amount) {
        //limits
        if ((this.opacity > 0 && amount < 0) || (this.opacity < 100 && amount > 0)) {
            this.opacity += amount;
            this.el.style.filter = "alpha(opacity=" + this.opacity + ")";
            this.el.style.opacity = this.opacity / 100;
        } else {
            this.stopAnimation;
            if (this.opacity == 0) {
                this.el.style.visibility = "hidden";
            }
        }
    },
    stopAnimation: function() {
        clearInterval(this.timer);
    }
};

var animatedSubMenu3 = {
    timer: null,
    el: null,
    elName: null,
    opacity: 0,

    initializeVar: function() {
        this.el = document.getElementById(this.elName);
    },
    startFadeInAnimation: function() {
        this.initializeVar();
        this.stopAnimation();
        this.timer = setInterval(function() { animatedSubMenu3.doAnimation(5); }, 10);
    },
    startFadeOutAnimation: function() {
        this.initializeVar();
        this.stopAnimation();
        this.timer = setInterval(function() { animatedSubMenu3.doAnimation(-5); }, 10);
    },
    doAnimation: function(amount) {
        //limits
        if ((this.opacity > 0 && amount < 0) || (this.opacity < 100 && amount > 0)) {
            this.opacity += amount;
            this.el.style.filter = "alpha(opacity=" + this.opacity + ")";
            this.el.style.opacity = this.opacity / 100;
        } else {
            this.stopAnimation;
            if (this.opacity == 0) {
                this.el.style.visibility = "hidden";
            }
        }
    },
    stopAnimation: function() {
        clearInterval(this.timer);
    }
};