$(document).ready(function ()
{

    $(".sliderpanel").vertsliderpanel(40, 1, 10, "ShowFullImageCSS", function ()
    {
         setImagesBehaviour();
    });
});

function delegate(that, thatMethod)
{
    return function () { return thatMethod.call(that); }
}

jQuery.fn.vertsliderpanel = function (time, speed, delta, imgclass, onallloaded)
{
    return this.each(function ()
    {
        var me = jQuery(this);
        me[0].slider = new vertslider(me, time, speed, delta, imgclass, onallloaded);

        me[0].slider.init();
    });
};

function vertslider(me, time, speed, delta, imgclass, onallloaded)
{
    this.count = 0;
    this.container = me;
    this.images = new Array();
    this.frameTime = time;
    this.loadedCount = 0;
    this.currentImg = null;
    this.currentImgMin = null;
    this.height = 0;
    this.width = 0;
    this.delta = delta;
    this.speed = speed;
    this.imgClassName = imgclass;
    this.isMaxReched = false;
    this.onallloadedMethod = onallloaded;

    this.OnAllLoaded = function ()
    {
        if (this.onallloadedMethod != null)
            this.onallloadedMethod();

    }

    this.init = function ()
    {
        this.height = this.container[0].offsetHeight;
        this.width = this.container[0].offsetWidth;
        var imls = this.container.find("iml");
        var srcArray = new Array();
        //var srcArrayBig = new Array();

        this.loadedCount = 0;
        for (var i = 0; i < imls.length; i++)
        {
            srcArray[i] = imls[i].attributes["src"].value;
            //srcArrayBig[i] = imls[i].attributes["srcBig"].value;
            //this.container[0].removeChild(imls[i]);
        }

        this.container[0].innerHTML = "";

        for (var i = 0; i < imls.length; i++)
        {

            this.images[i] = document.createElement("img");
            this.images[i].obj = this;
            this.images[i].container = this.container;
            this.isLoaded = false;
            //this.images[i].srcBig = srcArrayBig[i];

            var imgJ = jQuery(this.images[i]);
            //imgJ.attr("srcBig", srcArrayBig[i]);


            this.images[i].onload = function ()
            {
                this.isLoaded = true;
                this.className = this.obj.imgClassName;
                this.container[0].appendChild(this);
                this.obj.setPosition(this);

                this.obj.loadedCount += 1;

                if (this.obj.loadedCount == this.obj.images.length)
                {
                    this.obj.OnAllLoaded();
                }
            };
            this.images[i].src = srcArray[i];
        }

        this.start();
    }

    this.setPosition = function (img)
    {
        var vertPos = 0
        if (this.currentImgMin != null && this.isMaxReched)
        {
            vertPos = this.currentImgMin.offsetTop - img.offsetHeight - this.delta;
            this.currentImgMin = img;
        }
        else if (this.currentImg != null)
        {
            //alert(this.delta);
            vertPos = this.currentImg.offsetTop + this.currentImg.offsetHeight + this.delta;

        }


        if (this.currentImgMin == null)
        {
            this.currentImgMin = img;
        }

        img.style.top = vertPos + "px";

        var horPos = (this.width - img.width) / 2;

       img.style.left = horPos + "px";

        this.currentImg = img;
    }


    this.start = function ()
    {

        window.setTimeout(delegate(this, this.OnFired), this.frameTime);
    }

    this.OnFired = function ()
    {

        for (var i = 0; i < this.images.length; i++)
        {
            if (this.images[i].isLoaded)
            {
                var vertPos = this.images[i].offsetTop + this.speed;
                this.images[i].style.top = vertPos + "px";
                //$("#debug")[0].innerHTML = this.images[0].offsetTop;

                if (this.images[i].offsetTop > this.height)// && this.loadedCount == this.images.length) //+ надо условие: уже все загружены
                {
                    this.isMaxReched = true;
                    vertPos = this.currentImgMin.offsetTop - this.images[i].offsetHeight - this.delta;
                    this.images[i].style.top = vertPos + "px";
                    this.currentImgMin = this.images[i];
                }


            }
        }

        this.start();
    }

};