/*  Browser Detection  */

// Checks the browser and adds classes to the body to reflect it.

$(document).ready(function(){

    //alert('in abacalab.js document.ready') ; 
    
    var userAgent = navigator.userAgent.toLowerCase();
    $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 
    
    // Is this a version of IE?
    if($.browser.msie){
        $('body').addClass('browserIE');
        
        // Add the version number
        $('body').addClass('browserIE' + $.browser.version.substring(0,1));
    }
    
    
    // Is this a version of Chrome?
    if($.browser.chrome){
    
        $('body').addClass('browserChrome');
        
        //Add the version number
        userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
        userAgent = userAgent.substring(0,1);
        $('body').addClass('browserChrome' + userAgent);
        
        // If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
        $.browser.safari = false;
    }
    
    // Is this a version of Safari?
    if($.browser.safari){
        $('body').addClass('browserSafari');
        
        // Add the version number
        userAgent = userAgent.substring(userAgent.indexOf('version/') +8);
        userAgent = userAgent.substring(0,1);
        $('body').addClass('browserSafari' + userAgent);
    }
    
    // Is this a version of Mozilla?
    if($.browser.mozilla){
        
        //Is it Firefox?
        if(navigator.userAgent.toLowerCase().indexOf('firefox') != -1){
            $('body').addClass('browserFirefox');
            
            // Add the version number
            userAgent = userAgent.substring(userAgent.indexOf('firefox/') +8);
            userAgent = userAgent.substring(0,1);
            $('body').addClass('browserFirefox' + userAgent);
        }
        // If not then it must be another Mozilla
        else{
            $('body').addClass('browserMozilla');
        }
    }
    
    // Is this a version of Opera?
    if($.browser.opera){
        $('body').addClass('browserOpera');
    }
	    
    
});


/*  Getting IE to do HTML5 properly  */

// For discussion and comments see 
// http://remysharp.com/2009/01/07/html5-enabling-script/
(function(){if (!/*@cc_on!@*/0) return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,fieldset,figure,footer,header,hgroup,label,mark,menu,meter,nav,output,progress,section,time,video".split(',');for(var i=0;i<e.length;i++){document.createElement(e[i])}})()



/*
    Make the any H3 appear selected (darker grey background)
    and any after-h3 divs appear selected (darker grey border)
    by toggling the "selected" class for the containing div.

    Also, any existing "selectable" divs that have the "selected" class 
    are first toggled so that they are no longer selected.

    To implement this:

    2) Presumably, you have an anchor above the "selectable" div so that the 
       link knows where to go.
    1) Add a div surrounding the content with the "selectable" class.
    2) Add a (unique) element ID to the "selectable" div
    3) Within the link that should cause the H3 to be selected, add an OnClick handler  
       and specify the ID

    Example usage:
     
    <a href="#users" OnClick="highlight('users');">click here to see users</a>
    <a name="users"></a>
    <div class="selectable" id="users">
       <h3>Understanding users</h3>
       <div class="after-h3">Understanding users is essential</div>
    </div>
*/
function highlight(selected_id) { 
    //alert('in hightlight with selected id ' + selected_id) ; 
    $('div.selected').toggleClass('selected') ; 
    $('div#' + selected_id).toggleClass('selected') ; 
}