var scrollCount = 0;
var currentImageIndex = 0;
var numberOfVisibleThumbnails = 0;
var rotate = 1;

$j(document).ready(function(){           
    resize();
    $j(window).resize(function( event ){ resize( event ); });
    playPause();
    $j(window).keydown( function( e ) {
        var key = 0;
        if ( e == null ) {
            key = event.keyCode;
        }
        else {
            key = e.which;
        }
        switch ( key ) {
            case 37:
                // Left Arrow
                prevImage();
                e.preventDefault();
                e.stopPropagation();
                break;
            case 39:
                // Right Arrow
                nextImage();
                e.preventDefault();
                e.stopPropagation();
                break;
                
            case 38:
                toggleThumbnails();
                e.preventDefault();
                e.stopPropagation();
                break;
                
            case 40:
                toggleThumbnails();
                e.preventDefault();
                e.stopPropagation();
                break;
        }
    });
    
    
    var rot=$j('.toggle img').rotate({angle:45,
        bind:
            [
                {"click":function(){rot[0].rotateAnimation( (rotate++ % 2 == 1 ) ? 0 : 45 );}}
            ]
    });    
});

function resize( event ) {
    windowHeight = $j(window).height();
    windowWidth = $j(window).width();

    documentWidth = $j(document).width();
    documentHeight = $j(document).width();
    
    minWidth = 845;

    layoutWidth = ( windowWidth < minWidth ) ? minWidth : windowWidth;
    layoutHeight = windowHeight;    
    
    $j('.thumbnails .middle').css( 'left', (layoutWidth - 600) / 2 );
    
    if ( $j.browser.msie ) {
        //Only set canvas height on IE6
        $j('.canvas').height( layoutHeight );
    }
    //$j('.canvas').width( layoutWidth );               
    $j('.toggle').width( layoutWidth );               
    $j('#bottom').width( layoutWidth );
    $j('#bottomPlacard').width( layoutWidth );
    $j('#thumbnails').width( layoutWidth );
    $j('#thumbnails .content').width( layoutWidth );
    $j('#thumbnails .placard').width( layoutWidth );
    $j('.dots').width( layoutWidth );

    //$j('.controls').width( layoutWidth );
    //$j('.thumbnails').width( layoutWidth );

    // Center Text
    controlsMiddleWidth = $j('.controls .middle').width();
    x = ( layoutWidth - controlsMiddleWidth ) / 2;
    $j('.controls .middle').css({ left: x + 'px' } );

    numberOfVisibleThumbnails = Math.floor((layoutWidth - 32 - 100) / 60);
    numberOfVisibleThumbnails = ( numberOfVisibleThumbnails % 2 ) ? 
        numberOfVisibleThumbnails :
        numberOfVisibleThumbnails - 1;
        
    if ( numberOfVisibleThumbnails > numberOfImages ) {
        numberOfVisibleThumbnails = numberOfImages;
    }
    dotsMiddleWidth =  numberOfVisibleThumbnails * 60;
    $j('.dots .middle, #thumbnails .middle').width( dotsMiddleWidth );
    x = ( layoutWidth - dotsMiddleWidth ) / 2;
    $j('.dots .middle, #thumbnails .middle').css({ left: x + 'px' } );
    
    refreshScrollButtons();
    refreshImage();
}     

function doScrollLeft() {
    scrollCount--;
    scroll();
    refreshScrollButtons();
}

function doScrollRight() {
    scrollCount++;
    scroll();
    refreshScrollButtons();
}

function scrollToImage() {    
    if ( currentImageIndex < Math.abs(scrollCount) ) {
        scrollCount = -currentImageIndex;
    }
    else if ( currentImageIndex - numberOfVisibleThumbnails + scrollCount > 0 ) {
        scrollCount = numberOfVisibleThumbnails - currentImageIndex - 1;
    }
    
    scroll();
}

function scroll() {
    $j('.middle .holder').css({ left: (60*scrollCount) + 'px' } );
}

function toggleThumbnails() {
    $j("#thumbnails .content, #thumbnails .placard").slideToggle( "slow" );
        
    if ( !jQuery.browser.msie )
        $j('.dots .left, .dots .right').toggleClass( 'hidden' );
}

function prevImage() {
    currentImageIndex--;
    if ( currentImageIndex < 0 )
        currentImageIndex = numberOfImages - 1;
        
    scrollToImage();
    refreshScrollButtons();
    refreshSelection();
    refreshImage();
}

function nextImage() {
    currentImageIndex++;
    if ( currentImageIndex >= numberOfImages )
        currentImageIndex = 0;
        
    scrollToImage();        
    refreshScrollButtons();
    refreshSelection();
    refreshImage();
}

var timer = false;
var timeInterval = 8000;

function goSlower() {
    timeInterval *= 2;
}

function goFaster() {
    timeInterval /= 2;  
    nextImage();
}

function playPause() {

    //$j('.playPause').toggleClass( 'on' );

    if ( timer ) {
        clearTimeout( timer );
        timer = false;
        $j('img.playPause').attr( 'src', '/images/play3-small.png' );
    }
    else {
        timer = setTimeout( 'advanceSlideshow();', timeInterval );
        $j('img.playPause').attr( 'src', '/images/pause3-small.png' );
    }
}

function advanceSlideshow() {
    nextImage();
    timer = setTimeout( 'advanceSlideshow();', timeInterval );    
}

function showImage( i ) {
    currentImageIndex = i;    
    refreshSelection();
    refreshImage();
}

function refreshSelection() {
    $j('.middle .thumb').removeClass( 'active' );
    $j('#dot' + currentImageIndex ).addClass( 'active' );
    $j('#thumb' + currentImageIndex ).addClass( 'active' );

}

function refreshScrollButtons() {
    // Right
    if ( scrollCount == 0 ) {
        $j('#thumbnails .left, .dots .left').addClass( 'disabled' );
    }
    else {
        $j('#thumbnails .left, .dots .left').removeClass( 'disabled' );
    }
    
    // Left
    if ( numberOfImages - numberOfVisibleThumbnails + scrollCount < 1 ) {
         $j('#thumbnails .right, .dots .right').addClass( 'disabled' );
    }
    else {
        $j('#thumbnails .right, .dots .right').removeClass( 'disabled' );    
    }
}

function refreshImage() {
    var src = images[currentImageIndex];
    var link = links[currentImageIndex];
    $j('.canvas img').attr( 'src', src );
        
    imageWidth = 1200;
    imageHeight = 900;
    
    windowHeight = $j(window).height();
    windowWidth = $j(window).width();

    documentWidth = $j(document).width();
    documentHeight = $j(document).width();
    
    minWidth = 850;

    newHeight = imageHeight;
    newWidth = imageWidth;
    
    layoutWidth = ( windowWidth < minWidth ) ? minWidth : windowWidth;
    layoutHeight = windowHeight;   
    
    windowAspectRatio = layoutWidth / layoutHeight;
    imageAspectRatio = imageWidth / imageHeight;
    
    if ( windowAspectRatio > imageAspectRatio ) {
        // Window is taller than image
        newWidth = layoutWidth;
        newHeight = Math.ceil( imageHeight * ( layoutWidth / imageWidth ) );
    }
    else {
        // Window is wider than image
        newHeight = layoutHeight;
        newWidth = Math.ceil( imageWidth * ( layoutHeight / imageHeight ) );                        
    }
    
    $j('.image').height( newHeight );
    $j('.image').width( newWidth ); 
    
    // Center Image
    x = ( layoutWidth - newWidth  ) / 2;
    y = ( layoutHeight - newHeight  ) / 2;
    $j('.canvas').css({ left: x + 'px', top: y + 'px' } );   
    
    text = 'Image: ' + imageWidth + 'x' + imageHeight +
        ' New Image: ' + newWidth + 'x' + newHeight +       
        ' Window: ' + windowWidth + 'x' + windowHeight +       
        ' Doc: ' + documentWidth + 'x' + documentHeight +       
        ' Layout: ' + layoutWidth + 'x' + layoutHeight +       
        '';
    $j('.controls .right a').attr( 'href', link );    
}