// Add this CSS only when JS is enabled
$(document).ready(function() {
    // does not work
    //$(".hide_js[media='screen']").css('display', 'none');
    
    // works, but also hides in print view
    $('.hide_js').css('display', 'none');
    $('.hide_js[media=print]').css('display', 'block');

    $('.show_js').css('display', 'inline');
});

// Toggles the visibility of the item specified by clickable's 'rel' attr,
// and changes the text of the clickable item, if provided
function toggle_show(toggle) {
    var $toggle = $(toggle);
    if($toggle) {
        if( $toggle.css('display') == 'none' ) {
            $toggle.css('display', 'block');
        } else {
            $toggle.css('display', 'none');
        }
    }
    return false;
}

// Toggles the visibility of the item specified by clickable's 'rel' attr,
// and changes the text of the clickable item, if provided
function toggle_show_rel(clickable, showtext, hidetext) {
    var $clickable = $(clickable);
    var rel = $clickable.attr('rel');
    var $showable = $(rel);
    if(rel && $showable) {
        if( $showable.css('display') == 'none' ) {
            $showable.css('display', 'block');
            if( hidetext ) $clickable.html(hidetext);
        } else {
            $showable.css('display', 'none');
            if( showtext ) $clickable.html(showtext);
        }
    }
    return false;
}

/*
 * sticky_show()
 * Reads the selectors in the given cookie value and sets their display
 * attribute to 'block'.
 *
 * Teamed with sticky_toggle(), this makes sticky the user's preferences on
 * which blocks to display on a page.
 *
 * Arguments:
 *  cookie_name: name of the cookie to store the sticky settings
 *
 *  append_sep: optional, and indicates whether single (OR) values were stored,
 *      or multiple (AND) values.
 *      If append_sep is set, then it is used to separate the list of multiple
 *      DOM selectors.
 *
 *      If append_sep is absent, then the cookie value is expected to contain
 *      only a single DOM selector.
 *
 */
function sticky_show(cookie_name, append_sep) {
    var cookie = $.cookie( cookie_name );
    if( cookie ) {
        var chosen;
        if( append_sep ) {
            chosen = cookie.split(append_sep);
        } 
        else {
            chosen = new Array;
            chosen[0] = cookie;
        }

        for( var i=0; i<chosen.length; i++ ) {
            if( chosen[i] ) {
                var $chosen = $(chosen[i]);
                if( $chosen ) $chosen.css('display', 'block');
            }
        }
    }
    return chosen;
}

/*
 * sticky_toggle()
 * Stores in a cookie the selectors for elements that the user has clicked to
 * display.  
 *
 * Teamed with sticky_show(), this makes sticky the user's preferences on which
 * blocks to display on a page.
 *
 * Arguments:
 *  clickable: the element that the user clicks on to hide/show related
 *      element(s).  The 'rel' attribute of clickable is a selector to describe
 *      what elements to show/hide when clickable is clicked.
 *
 *  cookie_name: name of the cookie to store the sticky settings
 *
 *  append_sep: optional, and indicates whether to store single (OR) values or
 *      multiple (AND) values.
 *      If append_sep is set, then it is used to separate a list of multiple
 *      clickable ids.  
 *
 *      If append_sep is absent, then the cookie value is replaced with
 *      clickable's id.
 *
 */
function sticky_toggle(clickable, cookie_name, append_sep) {
    toggle_show_rel(clickable);

    var rel = $(clickable).attr('rel');
    var $showable = $(rel);
    if( $showable ) {
        var cookie = $.cookie(cookie_name);
        if( !cookie ) cookie = '';
        if( !append_sep ) append_sep = '';

        // by default, un-sticky this selection
        var regex = new RegExp(rel+append_sep, 'g');
        cookie = cookie.replace(regex, '');

        // but if we've toggled it on, re-add it to the cookie
        if( $showable.css('display') == 'block' ) {
            if( append_sep ) {
                cookie = cookie + rel + append_sep;
            } else {
                cookie = rel;
            }
        }

        // delete the cookie if there's nothing to store
        if( !cookie ) cookie = null;
        $.cookie(cookie_name, cookie, { path: '/' } );
    }
    return false;
}

// Update the div content to a comma-delimited list of selected options
function list_selected(select) {
    var $select = $(select);
    var rel = $select.attr('rel');
    var $target = $(rel);
    if( rel && $target ) {
        var html = '';
        $select.children('option').each(function() {
            if( this.selected ) {
                if( html ) html += ',  ';
                html += $(this).html();
            }
        });
        $target.html(html);
    }
}