/**
 * This script uses JQuery to animate the projects box of webholics.de
 * Only tested with JQuery 1.1.3.1
 *
 * @author Mario Volke <mario.volke@webholics.de>
 * @copyright 2007 Mario Volke
 */
 
var boxWidth = 134;
var canvasWidth = 590;
var showBoxes = 3;
var boxMargin = 50;
var showQueue = new Array();
var hideQueue = new Array();
var stopAnim = false;

$(document).ready(
    function() {
        $('div#projects a').hide();
        
        $('div#projects a img').animate({opacity: 0.5}, 'fast');
        $('div#projects a img').hover(
            function() {
                $(this).animate({opacity: 1.0}, 'fast');
            },
            function() {
                $(this).animate({opacity: 0.5}, 'fast');
            }
        );

        var numBoxes = $('div#projects a').length;
        $('div#projects a').css('position', 'absolute').css('top', 0).css('margin-right', 0);

        for(var i = 0; i < numBoxes; i++) {
            if(i < showBoxes) {
                var pos = Math.floor(0.5 * (canvasWidth - showBoxes * boxWidth - (showBoxes - 1) * boxMargin) + i * boxWidth + i * boxMargin);
                $('div#projects a').eq(i).css('left', canvasWidth + 120 * (i + 1)).animate({opacity: 'toggle', left: pos}, 'slow');
                
                showQueue.push(i);
            }
            else {
                hideQueue.push(i);
            }
        }
        
        // stop animations if the cursor hovers the projects
        $('div#projects').hover(
            function() {
                stopAnim = true;
            },
            function() {
                stopAnim = false;
            }
        );
        
        // rotate projects
        setInterval(
            function() {
                if(!stopAnim) {
                    var hideBox = showQueue.shift();
                    var showBox = hideQueue.shift();

                    $('div#projects a').eq(hideBox).animate({opacity: 'toggle', left: (-1 * boxWidth)}, 'slow');

                    for(var i = 0; i < showQueue.length; i++) {
                        var pos = Math.floor(0.5 * (canvasWidth - showBoxes * boxWidth - (showBoxes - 1) * boxMargin) + i * boxWidth + i * boxMargin);
                        $('div#projects a').eq(showQueue[i]).animate({left: pos}, 'slow');
                    }

                    var pos = Math.floor(0.5 * (canvasWidth - showBoxes * boxWidth - (showBoxes - 1) * boxMargin) + (showBoxes - 1) * boxWidth + (showBoxes - 1) * boxMargin);
                    $('div#projects a').eq(showBox).css('left', canvasWidth + 120).animate({opacity: 'toggle', left: pos}, 'slow');

                    hideQueue.push(hideBox);
                    showQueue.push(showBox);
                }
            }
        , 10000);
        
        // portfolio thumbnails
        $('div.portfolio-thumb img').animate({opacity: 0.5}, 'fast');
        $('div.portfolio-thumb').hover(
            function() {
                $('a/img', this).animate({opacity: 1.0}, 'fast');
            },
            function() {
                $('a/img', this).animate({opacity: 0.5}, 'fast');
            }
        );
    }
);