var header = document.getElementById("header");
var light_btn = document.getElementById("lightSkin");
var dark_btn = document.getElementById("darkSkin")

$("#lightSkin").click(function () {

    header.style.background = "#e0e0d1";

    //Lighter colour for buttons and hover   
    light_btn.style.background = "#8a8a5c";
    dark_btn.style.background = "#8a8a5c";
  
    $("#lightSkin").hover(function () {
        $(this).css("background", "#333"); //Light blue colour on hover
    }, function () {
        $(this).css("background", "#333"); //back to light theme colour when not hovering
    });
    $("#darkSkin").hover(function () {
        $(this).css("background", "#333"); //Light blue colour on hover
    }, function () {
        $(this).css("background", "#333"); //back to light theme colour when not hovering
    });

    /*SET SIDE AND BOTTOM MENU BACKGROUND COLOURS*/
    $(".side_menu").each(function () {
        $(this).css("background", "#fff"); //b8b894
    });

    $("#bottom_menu").each(function () {
        $(this).css("background", "#b8b894");
    });
    /*SET SIDE AND BOTTOM MENU BACKGROUND COLOURS*/

    //Menu item list items background i.e. the box that contains the options e.g. light sliders
    $(".menu_item > li").each(function () {
        $(this).css("background", "#666");
    });

    //Each subsequent list item set to same background colour
    $(".menu_item > li > ul > li").each(function () {
        $(this).css("background", "#666");
    });

    //List item links background colour + darker text colour e.g. wireframe mode, phong shading
    $(".menu_item > li > a").each(function () {
        $(this).css("background", "#fff");
        $(this).css("color", "#000000");
    });

    //Hovering over list item links e.g. wireframe mode, phong shading
    $(".menu_item li a").hover(function () {
        $(this).css("background", "#cce6ff"); //Light blue colour on hover
    }, function () {
        $(this).css("background", "#fff"); //back to light theme colour when not hovering
    });

    /***BOTTOM MENU***/
    //list items background i.e. the box that contains the options e.g. light sliders
    $(".bottom_menu_item > li").each(function () {
        $(this).css("background", "#8a8a5c");
    });

    //Each subsequent list item set to same background colour
    $(".bottom_menu_item > li > ul > li").each(function () {
        $(this).css("background", "#8a8a5c");
    });

    //List item links background colour + darker text colour e.g. wireframe mode, phong shading
    $(".bottom_menu_item > li > a").each(function () {
        $(this).css("background", "#e0e0d1");
        $(this).css("color", "#000000");
    });

    //Hovering over list item links e.g. wireframe mode, phong shading
    $(".bottom_menu_item li a").hover(function () {
        $(this).css("background", "#cce6ff"); //Light blue colour on hover
    }, function () {
        $(this).css("background", "#e0e0d1"); //back to light theme colour when not hovering
    });

});

$("#darkSkin").click(function ()
{
    header.style.background = "#3d5c5c";

    //Lighter colour for buttons and hover
    light_btn.style.background = "#3d5c5c";
    dark_btn.style.background = "#3d5c5c";

    $("#lightSkin").hover(function () {
        $(this).css("background", "#494a4c"); //Light blue colour on hover
    }, function () {
        $(this).css("background", "#3d5c5c"); //back to light theme colour when not hovering
    });
    $("#darkSkin").hover(function () {
        $(this).css("background", "#494a4c"); //Light blue colour on hover
    }, function () {
        $(this).css("background", "#3d5c5c"); //back to light theme colour when not hovering
    });

    /*SET SIDE AND BOTTOM MENU BACKGROUND COLOURS*/
    $(".side_menu").each(function () {
        $(this).css("background", "#494a4c");
    });

    $("#bottom_menu").each(function () {
        $(this).css("background", "#494a4c");
    });
    /*SET SIDE AND BOTTOM MENU BACKGROUND COLOURS*/

    //Menu item list items background except the first (so that header remains different colour)
    $(".menu_item > li").not(":first").each(function () {
        $(this).css("background", "#1d1e1e");
    });

    //Each subsequent list item set to same background colour
    $(".menu_item > li > ul > li").each(function () {
        $(this).css("background", "#1d1e1e");
    });

    //List item links background colour + darker text colour e.g. wireframe mode, phong shading
    $(".menu_item > li > a").each(function () {
        $(this).css("background", "#1d1e1e");
        $(this).css("color", "#fff");
    });

    //Hovering over list item links e.g. wireframe mode, phong shading
    $(".menu_item li a").hover(function () {
        $(this).css("background", "#494a4c"); 
    }, function () {
        $(this).css("background", "#1d1e1e");
    });

    /*********BOTTOM MENU********/

    //list items background i.e. the box that contains the options e.g. light sliders
    $(".bottom_menu_item > li").each(function () {
        $(this).css("background", "#1d1e1e");
    });

    //Each subsequent list item set to same background colour
    $(".bottom_menu_item > li > ul > li").each(function () {
        $(this).css("background", "#1d1e1e");
    });

    //List item links background colour + darker text colour e.g. wireframe mode, phong shading
    $(".bottom_menu_item > li > a").each(function () {
        $(this).css("background", "#1d1e1e");
        $(this).css("color", "#fff");
    });

    //Hovering over list item links e.g. wireframe mode, phong shading
    $(".bottom_menu_item li a").hover(function () {
        $(this).css("background", "#494a4c");
    }, function () {
        $(this).css("background", "#1d1e1e");
    });



});