jQuery.fn.isChildOf = function (b) {
    return (this.parents(b).length > 0); 
};

$(document).ready(function () {
    var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
    var currentButtonImage;

    if (mobile) {
        //When mouse clicked
        $("li", "#menu").click(function () {
            targetHeight = $("ul", this).height();
            targetHeight = targetHeight - 1 + "px";

            $("div.sub", this).stop().animate({ height: targetHeight }, { queue: false, duration: 400 })

            if (currentButtonImage == null) {
                return false;
            } else {
                menuGroup = "#b" + currentButtonImage.charAt(currentButtonImage.length - 1);
                isThis = $.data( this ) == $.data( $(menuGroup)[0] )
                isChild = $(this).isChildOf(menuGroup)

                if (isChild || isThis) {
                    return true;
                } else {
                    return false;
                }
            }
        });


        $("#b1").click(function () {
            buttonClickOff(currentButtonImage);
            currentButtonImage = "#button1";
            buttonClickOn("#button1", "#610020")
        });

        $("#b2").click(function () {
            buttonClickOff(currentButtonImage);
            currentButtonImage = "#button2";
            buttonClickOn("#button2", "#8d7015")
        });

        $("#b3").click(function () {
            buttonClickOff(currentButtonImage);
            currentButtonImage = "#button3";
            buttonClickOn("#button3", "#596e03")
        });

        $("#b4").click(function () {
            buttonClickOff(currentButtonImage);
            currentButtonImage = "#button4";
            buttonClickOn("#button4", "#005395")
        });

        $("#b5").click(function () {
            buttonClickOff(currentButtonImage);
            currentButtonImage = "#button5";
            buttonClickOn("#button5", "#8e3c00")
        });

        $("#b6").click(function () {
            buttonClickOff(currentButtonImage);
            currentButtonImage = "#button6";
            buttonClickOn("#button6", "#261012")
        });

    } else {
        //When mouse rolls over
        $("li", "#menu").mouseover(function () {
            targetHeight = $("ul", this).height();
            targetHeight = targetHeight - 1 + "px";

            $("div.sub", this).stop().animate({ height: targetHeight }, { queue: false, duration: 400 })
        });

        //When mouse is removed
        $("li", "#menu").mouseout(function () {
            $("div.sub", this).stop().animate({ height: '0px' }, { queue: false, duration: 400 })
        });

        $("#b1").hover(function () {
            buttonRollOn("#button1", "#610020")
        }, function () {
            buttonRollOff("#button1")
        });

        $("#b2").hover(function () {
            buttonRollOn("#button2", "#8d7015")
        }, function () {
            buttonRollOff("#button2")
        });

        $("#b3").hover(function () {
            buttonRollOn("#button3", "#596e03")
        }, function () {
            buttonRollOff("#button3")
        });

        $("#b4").hover(function () {
            buttonRollOn("#button4", "#005395")
        }, function () {
            buttonRollOff("#button4")
        });

        $("#b5").hover(function () {
            buttonRollOn("#button5", "#8e3c00")
        }, function () {
            buttonRollOff("#button5")
        });

        $("#b6").hover(function () {
            buttonRollOn("#button6", "#261012")
        }, function () {
            buttonRollOff("#button6")
        });
    }
});
function buttonRollOn(target, color) {
    $(target).destroy();
    $(target + " span", "#menu").css("color", color);
    $(target).sprite({ fps: 18, no_of_frames: 6, start_at_frame: 1, on_last_frame: function (obj) { $(target).destroy(); } });
}

function buttonClickOn(target,color) {
    $(target).destroy();
    $(target+" span","#menu").css("color", color);
    $(target).sprite({ fps: 18, no_of_frames: 6, start_at_frame: 1, on_last_frame: function (obj) { $(target).destroy(); } });
} 

function buttonRollOff(target) {
    $(target).destroy();
    timer = setTimeout(function () {
        resetText(target)
    }, 200); 
    $(target).sprite({ fps: 18, no_of_frames: 6, start_at_frame: 6, rewind: true, on_first_frame: function (obj) {$(target).destroy();} });
}

function buttonClickOff(target) {
    $(target).destroy();
    timer = setTimeout(function () {
        resetText(target)
    }, 200);
    $(target).sprite({ fps: 18, no_of_frames: 6, start_at_frame: 6, rewind: true, on_first_frame: function (obj) { $(target).destroy(); } });
    if (target != null) {
        menuTarget = "#b" + target.charAt(target.length - 1) + ".top";
        $("div.sub", menuTarget).stop().animate({ height: '0px' }, { queue: false, duration: 400 });
    }
}

function resetText(target) { 
     $("span", target).css("color", "#ffffff");
}