$(function(){
    $.slidingHeader.init();
});

jQuery.slidingHeader = {}

jQuery.slidingHeader.images = [
    {file:'01.jpg', title:'PBI In Action', caption:'', link:''},
    {file:'02.jpg', title:'Military Protective Apparel', caption:'Protective Apparel - Military', link:'/applications/apparel_military'},
    {file:'03.jpg', title:'Plasma Etch Chamber', caption:'Celazole', link:'/celazole/u_series'},
    {file:'04.jpg', title:'Crew of Apollo 1', caption:'Aerospace', link:'/applications/pbi_parts#aerospace'},
    {file:'05.jpg', title:'PBI Fiber Detail', caption:'PBI Fibers', link:'/pbi_fiber/pbi_fibers'},
    {file:'06.jpg', title:'PBI Matrix', caption:'PBI Matrix', link:'/pbi_fiber/pbi_matrix'},
    {file:'07.jpg', title:'Wildlands', caption:'Protective Apparel - Fireservice', link:'/applications/apparel_fireservice#wildlands'},
    {file:'08.jpg', title:'Electrical Arc Apparel', caption:'Protective Apparel - Industrial', link:'/applications/apparel_industrial#electrical'},    
    {file:'10.jpg', title:'PBI International', caption:'International Page', link:'/international'},
    {file:'11.jpg', title:'PBI Aerospace', caption:'Aerospace', link:'/applications/pbi_parts#aerospace'},
    {file:'12.jpg', title:'PBI Parts', caption:'PBI Parts', link:'/applications/pbi_parts'},
    {file:'13.jpg', title:'Development of PBI Membranes', caption:'Green Technologies', link:'/applications/green_technologies'},
    {file:'14.jpg', title:'Golden Knights', caption:'Golden Knights Page', link:'/goldenknights'}
];

jQuery.slidingHeader.images.sort( function(){ return (Math.round(Math.random())-0.5) } );

jQuery.slidingHeader.init = function(options) 
{
    var sh = $('#SlidingHeader');
    var sht = $('#SlidingHeaderTread');

    var cellWidth = 192;
    var padWidth = 4;
    var slide = -300; //length of the slide animation
    var duration = 10000; //duration of the slide animation in ms
    var slideWidth = cellWidth + padWidth;

    //build the cell elements
    $.each($.slidingHeader.images, function(i,image){
        var cell = $('<div class="cell"><div class="titleOverlay"></div><a href="/' + language + image.link + '" class="tab"></a><div class="caption">'+image.caption+'</div></div>');
        cell.find('.titleOverlay, .caption').css('opacity', 0.66);
        cell.css({
            backgroundImage: 'url(/img/sliding_header/cells/'+image.file+')',
            left: (cellWidth * i) + (padWidth * i)
        });
        
        var title = $('<div class="title">'+image.title+'</div>');
        
        cell.prepend(title);
        sht.append(cell);
    });

    //tab show/hide events
    $('#SlidingHeader .tab').mouseover(function(){
        $(this).siblings('.caption').show();
    });
    $('#SlidingHeader .tab').mouseout(function(){
        $(this).siblings('.caption').hide();
    });

    //event to stop the header from sliding
    $('#SlidingHeader').mouseover(function(evt){
        if ( $(evt.target).is('.shNav') ) return;
        sht.stop(true);
    });

    $('#SlidingHeader').mouseout(function(evt){
        //stop event propagation when mousing through child elements
        var reltar = $(evt.relatedTarget) || $(evt.toElement);
        if ( sht.queue().length != 0) return false; //check to see if animation is running already
        if ( reltar.parents('#SlidingHeader').length > 0 || reltar.is('#SlidingHeader') ) return false;
        animateTread();        
    });
    
    //hide the navigation, events to show them
    $('.shNav').css('opacity', 0);
    $('.shNav').mouseover(function(){ $(this).css('opacity', 1); });
    $('.shNav').mouseout (function(){ $(this).css('opacity', 0); });
    
    //forward/backward events
    $('#SHForward').mouseover(function(){
        slide = -300;
        sht.stop(true);
        animateTread();
    });
    $('#SHBack').mouseover(function(){
        slide = 300;
        sht.stop(true);
        animateTread();
    });
    //fast forward/fast rewind
    $('#SHForward').mousedown(function(){
        slide = -1200;
        sht.stop(true);
        animateTread();
    });    
    $('#SHBack').mousedown(function(){
        slide = 1200;
        sht.stop(true);
        animateTread();
    });    
    $('.shNav').mouseup(function(){
        $(this).trigger('mouseover');
    });
    //ghetto tooltip
    $('.shNav').attr('title', 'Click and hold to increase speed');

    //main animate function, with stepping callback
    var animateTread = function(){      
        sht.queue('fx', []); //flush the animate queue
        sht.animate({left: sht.position().left + slide}, {
            easing:'linear', 
            duration: duration,
            step:function(left){
                //logic to rearrange the cells from front to back based on the left position of the tread
                //if it's moving forward:
                if ( (slide < 0) && left + $('#SlidingHeaderTread .cell:first').position().left + slideWidth < 0)
                {                    
                    var first = $('#SlidingHeaderTread .cell:first');
                    var newPos = $('#SlidingHeaderTread .cell:last').position().left + slideWidth;                    
                    first.css({ left: newPos });
                    first.appendTo( sht );
                }
                //backward:
                else if ( (slide > 0) && left + $('#SlidingHeaderTread .cell:first').position().left > 0)
                {
                    var last = $('#SlidingHeaderTread .cell:last');
                    var newPos = $('#SlidingHeaderTread .cell:first').position().left - slideWidth;
                    last.css({ left: newPos });
                    last.prependTo( sht );
                } 
            },
            complete:function(){
                sht.queue('fx', []);
                animateTread();
            }
        });
    }
    
    if ($.browser.msie && $.browser.version <= 6){
    }
    else {
        animateTread();
    }
    
}