(function ($) {
    if (!$) return;
    $.fn.extend({
        fixPNG: function(sizingMethod, forceBG) {
            if (!($.browser.msie)) return this;

            var emptyimg = "images/x.gif"; //Path to empty 1x1px GIF goes here
            sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)

            this.each(function() {
                var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
                    src = (isImg) ? this.src : this.currentStyle.backgroundImage;

                if (src.toLowerCase().indexOf('.png') != -1){
                    if (isImg) {
                        this.src = emptyimg;
                        this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
                    } else {
                        //this.style.backgroundImage = "url(" + emptyimg + ")";
                        this.style.backgroundImage = "none";

                        src = src.substring(5, src.length - 2);

                        var img = document.createElement("img");
                        img.src = emptyimg;
                        img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
                        img.style.width = this.currentStyle.width;
                        img.style.height = this.currentStyle.height;

                        this.appendChild(img);
                    }
                }
            });
            return this;
        }
    });
})(jQuery);

$.fn.removeStyleAttribute = function(attr) {
    return this.each(function() {
        $.removeStyleAttribute(this, attr);
    });
};

$.removeStyleAttribute = function(container, attr) {
    var style = container.style;

    if (style.removeAttribute){
        style.removeAttribute(attr);
    } else if (style.removeProperty){
        style.removeProperty(attr);
    }

    style = null;
};

Array.prototype.indexOf = function(element){
    for (var i = 0; i < this.length; ++i){
        if (this[i] == element){
            return i;
        }
    }
    return -1;
};

var Animation = function(){
    var scope = this;
    $(document).ready(function(){
        scope.setReady();
    });
};
Animation.prototype.animating = false;
Animation.prototype.currentFrame = 0;
Animation.prototype.numberOfFrames = 5;
Animation.prototype.delay = 6000; // odst�py mi�dzy automatycznymi przej�ciami
Animation.prototype.length = 2500; // d�ugo�� animacji
Animation.prototype.queue = []; // kolejka
Animation.prototype.order = [ 0, 2, 1, 3, 4 ];

Animation.prototype.animateBy = function(number){
    var index = this.order.indexOf(this.currentFrame);

    this.doAnimation(this.currentFrame, this.order[ (this.numberOfFrames + index + number) % this.numberOfFrames ]);
};

Animation.prototype.animateTo = function(destinationFrame){
    this.doAnimation(this.currentFrame, destinationFrame);
};

Animation.prototype.startAuto = function(){
    var scope = this;
    this.autoIntervalId = setInterval(function(){
        scope.animateBy(+1);
    }, this.delay);
};

Animation.prototype.stopAuto = function(){
    clearInterval(this.autoIntervalId);
};

Animation.prototype.startQueue = function(){
    if (this.queue.length == 0){
        return;
    }
    var destinationFrame = this.queue.shift();
    this.animateTo(destinationFrame);
};

/// private
Animation.prototype.doAnimation = function(x, y){
    if ((x < 0 || x >= this.numberOfFrames) || (y < 0 || y >= this.numberOfFrames))
    {
        debugger;
        alert('Illegal values: ' + x + ', ' + y);
    }
    if (this.animating)
    {
        this.queue = [ y ];
        return;
    }
    if (x == y)
    {
        return;
    }

    this.animating = true;
    this.currentFrame = y;

    var xAmmount = 709;
    var ix = this.order.indexOf(x);
    var iy = this.order.indexOf(y);

    $('#left' + x).fadeOut(this.length);
    $('#left' + y).fadeIn(this.length);

    $('#info' + x).fadeOut(this.length);
    $('#info' + y).fadeIn(this.length);

    $('#right' + x).fadeOut(this.length);
    $('#right' + y).fadeIn(this.length);

    if ($.browser.msie)
    {
        $('#navi-left' + x).fadeOut(this.length);
        $('#navi-left' + y).fadeIn(this.length);

        $('#navi-right' + x).fadeOut(this.length);
        $('#navi-right' + y).fadeIn(this.length);
    }

    if (ix - iy == 1 || (ix == 0 && iy == this.numberOfFrames - 1))
    {
        $('#graf' + x).css('z-index', 80);
        $('#graf' + y).css('z-index', 90);

        $('#graf' + y).css('left', -xAmmount);
        $('#graf' + y).show();
        $('#graf' + x).animate({ left: '+=' + xAmmount }, this.length);
        $('#graf' + y).animate({ left: '+=' + xAmmount }, this.length);
    }
    else
    {
        $('#graf' + x).css('z-index', 80);
        $('#graf' + y).css('z-index', 90);

        $('#graf' + y).css('left', xAmmount);
        $('#graf' + y).show();
        $('#graf' + x).animate({ left: '-=' + xAmmount }, this.length);
        $('#graf' + y).animate({ left: '-=' + xAmmount }, this.length);
    }

    var scope = this;
    setTimeout(function(){
        $('#graf' + x).css('z-index', 0);
        $('#graf' + y).css('z-index', 0);
        $('#graf' + x).hide();

        $('#info' + x).removeStyleAttribute("filter");
        $('#info' + y).removeStyleAttribute("filter");

        scope.animating = false;
        scope.startQueue();
    }, this.length);
};

Animation.prototype.setReady = function(){
    if ($.browser.msie){
        for (var i = 0, p = $('#navi-left0').offset(); i < this.numberOfFrames; ++i){
            var e = $('#navi-left' + i);
            if (e.length == 0 || e.get(0).fixed){
                continue;
            }

            e.fixPNG();
            e.detach();

            $('body').append(e);
            e.get(0).style.left = p.left + 'px';
            e.get(0).style.top = p.top + 'px';
            e.get(0).fixed = true;

            if (i > 0){
                e.hide();
            }
        }

        for (var i = 0, p = $('#navi-right0').offset(); i < this.numberOfFrames; ++i){
            var e = $('#navi-right' + i);
            if (e.length == 0 || e.get(0).fixed){
                continue;
            }

            e.fixPNG();
            e.detach();

            $('body').append(e);
            e.get(0).style.left = p.left + 'px';
            e.get(0).style.top = p.top + 'px';
            e.get(0).fixed = true;

            if (i > 0){
                e.hide();
            }
        }

        var scope = this;
        $(window).resize(function(){
            var p = $('#left-column').offset().left + $('#left-column').width() - 32;
            for (var i = 0; i < scope.numberOfFrames; ++i){
                var e = $('#navi-left' + i);
                e.get(0).style.left = p + 'px';
            }

            var p = $('#right-column').offset().left - 64;
            for (var i = 0; i < scope.numberOfFrames; ++i){
                var e = $('#navi-right' + i);
                e.get(0).style.left = p + 'px';
            }
        });
    }

    var scope = this;
    var stopAuto = function(){ scope.stopAuto(); };
    var startAuto = function(){ scope.startAuto(); };
    var nextFrame = function(){ scope.animateBy(+1); };
    var prevFrame = function(){ scope.animateBy(-1); };

    for (var i = 0; i < this.numberOfFrames; ++i){
        $('#graf' + i).hover(stopAuto, startAuto);
        $('#info' + i).hover(stopAuto, startAuto);

        $('#navi-left' + i).hover(stopAuto, startAuto);
        $('#navi-left' + i).click(prevFrame);

        $('#navi-right' + i).hover(stopAuto, startAuto);
        $('#navi-right' + i).click(nextFrame);
    }
    for (var i = 1; i < this.numberOfFrames; ++i){
        $('#a' + i).bind('mouseenter', i, function(e){
            scope.stopAuto(); scope.animateTo(e.data);
        }).bind('mouseleave', startAuto);
    }

    this.startAuto();
};

var animation = new Animation();