jQuery(document).ready(function() {
    var sub = document.URL;

    //Calculate the total width - sum of all sub-panels width
    //Width is generated according to the width of #mask * total of sub-panels
    $('#panel').width(parseInt($('#mask').width() * $('#panel div').length));

    //Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
    $('#panel div').width($('#mask').width());

    var panelNum = sub.substring(sub.lastIndexOf("p=") + 2);
    //Get the height of the panel
    $('#mask').css({ 'height': $('#panel-' + panelNum).height() });

    //Scroll the mask to the proper panel
    $('#mask').scrollTo("#panel-" + panelNum, 800);

    if (panelNum > 0) {
        $('a[rel=panel]').removeClass('selected');
        $("#panelhref-" + panelNum).addClass('selected');
    }

    //Get all the links with rel as panel
    $('a[rel=panel]').click(function() {

        //Get the height of the sub-panel
        var panelheight = $($(this).attr('href')).height();

        //Set class for the selected item
        $('a[rel=panel]').removeClass('selected');
        $(this).addClass('selected');

        //Resize the height
        $('#mask').animate({ 'height': panelheight }, { queue: false, duration: 500 });

        //Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
        $('#mask').scrollTo($(this).attr('href'), 800);

        //Discard the link default behavior
        return false;
    });

    //Get all the links from the sub menu
    $('ul.subsubmenu li a').click(function() {
        //Get the height of the sub-panel
        var panelheight = $($(this).attr('class')).height();
        var goTopanel = $(this).attr('href');

        //if this is a different link follow the a href
        if (goTopanel.substring(0, goTopanel.length - 1) != sub.substring(sub.lastIndexOf("/") + 1, sub.length - 1)) {
            return true;
        }

        //Set class for the selected item
        $('a[rel=panel]').removeClass('selected');
        var panelNum = goTopanel.substring(goTopanel.length - 1, goTopanel.length);  //find out from the last parameter which one should be selected        
        $("#panelhref-" + panelNum).addClass('selected');

        //Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
        $('#mask').scrollTo($(this).attr('class'), 800);

        //Resize the height
        $('#mask').animate({ 'height': panelheight }, { queue: false, duration: 500 });

        //Discard the link default behavior        
        return false;
    });

    //$('#mask').scrollTo(sub.substring(sub.lastIndexOf("#") + 1)), 800);
});                            //http://www.queness.com/resources/html/scrollto/index.html