/*
   Custom .js for sprt
   */

// 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});
}