/*jQuery anonymous function calls*/
(function($) {


/**
 * *****************************************************************************
 * *****************************************************************************
 */


$(function() {


/**
 * *****************************************************************************
 * *****************************************************************************
 */

/**
 * *****************************************************************************
 * Navigation Menu for Small Screens
 * *****************************************************************************
 */

/* get current menu and genreate a mobile menumu. */
/* its displayed as a 'select' form element */

// Create the dropdown base
$("<select />").appendTo(".mobile-menu");

// Create default option "Go to..."
$("<option />", {
    "selected": "selected",
    "value": "",
    "text": "MENU"
}).appendTo(".mobile-menu select");

// Populate dropdown with menu items
$("nav#header_nav > ul > li").each(function() {

    var el = $(this);

    var hasChildren = el.find("ul"),
            children = el.find("li");

    if (hasChildren.length) {

        $("<optgroup />", {
            "label": el.find("> a").text()
        }).appendTo(".mobile-menu select");

        children.each(function() {

            $("<option />", {
                "value": $(this).find('a').first().attr("href"),
                "text": " - " + $(this).text()
            }).appendTo("optgroup:last");

        });

    } else {

        $("<option />", {
            "value": el.find('a').first().attr("href"),
            "text": el.text()
        }).appendTo(".mobile-menu select");

    }

});

// To make dropdown actually work
// To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
$(".mobile-menu select").change(function() {
    window.location = $(this).find("option:selected").val();
});

/**
 * *****************************************************************************
 * *****************************************************************************
 */


});
})(jQuery);