/*
    Custom .js for sprt
    
    2008 sbl
*/

$(document).ready(function() {
    // search for elements
    var content = $('#content #description');
    var header = $('#header');
    var img = $('#content #images');
    var about = $('#about');
    
    // the link colors
    var colorArray = ['#99ccff', '#99ff99', '#ffff66', '#ff99cc'];
    
    // select random color
    var randomColor = colorArray[Math.floor(Math.random()*4)];

    // some coordinates
    var WIDTH = $('#content').css("width");
    
    // header positions
    var hl = header.position().left;
    var ht = 0;
    
    
    // change description and list colors...
    $('#content #description').css('backgroundColor', randomColor);    
    $('li.active a').css('backgroundColor', randomColor);
    
    // map to mouseover
    $('a').hover(function() {
        $(this).css('backgroundColor', randomColor);
    }, function() {
        $(this).css('backgroundColor', 'transparent');
        $('li.active a').css('backgroundColor', randomColor);
    });
    
    // only do that when we have images and a description
    if(content.length > 0 && img.length > 0){
        
        // content positions is created dynamically in relation to the header
        var cl = hl;
        var ct = ht + content.offset().top;
        
        //calculate image position relative to content
        // keep the left margin
        var il = img.css("margin-left");
        // recalc margin from content height
        var it = ct+content.height()+13;
        
        // place header and content on new fixed positions
        header.css({position: 'fixed', left: hl, top: ht});
        content.css({position: 'fixed', left: cl, top: ct, width: WIDTH});

        // move images out of #content and on top
        header.before(img);
        img.css({position: 'relative',marginLeft: il, marginTop: it, width: WIDTH})
    }   // do this on about page...
    else if(about.length > 0){
        about.css({position: 'fixed', left: hl, top: ht + about.offset().top});
        header.css({position: 'fixed', left: hl, top: ht});
    }
    // normally do this ... 
    else{
        header.css({position: 'fixed', left: hl, top: ht});
    }

});