$(document).ready(function () {
    $("div[type=photoslider]").each(function () {
        var width = $(this).width();

        var size = $(this).attr("size");
        var albumId = $(this).attr("albumId");

        var count = parseInt((width - 40) / 90);
        var rightArrowPos = width - 20;

        $(this).html("\
    <div style=\"text-align:center; overflow: hidden;\">\
        <img id=\"PhotoSliderImg\" src=\"#\" border=\"0\" halign=\"center\"/><br />\
        <div style=\"height:110px; position:relative;\">\
            <div id=\"LeftArrow\" class=\"SimplePhotoStrip_LeftArrow\"></div>\
            <div id=\"PhotoSliderContainer\" class=\"PhotoSliderContainer\">\
            <div id=\"PhotoSliderItems\" class=\"SimplePhotoStrip_Strip\" style=\"overflow: hidden;\"></div>\
            </div>\
            <div id=\"RightArrow\" class=\"SimplePhotoStrip_RightArrow\" style=\"left: " + rightArrowPos + "px\"></div>\
        </div>\
    </div>");

        $("#PhotoSliderContainer", this).width(width - 80);

        var ACTION = { APPEND: 0, PREPEND: 1, INIT: 2 };

        var downloadPhotos = Function.createDelegate(this, function (startIndex, loadCount, action, selectIndex) {
        if (!albumId) albumId = "";
            OS.TC.Portal.WebSite.Modules.Photos.WebServices.Photos.GetPhotos(albumId, startIndex, loadCount,
                Function.createDelegate(this, function (result) {

                    if (result.length == 0) {
                        return;
                    }
                    var _slider = this;

                    if (_slider.currentIndex == undefined)
                        _slider.currentIndex = 0;

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

                        var url = result[i][size + "Url"];

                        var newElement = $("<div class=\"SimplePhotoStrip_PhotoDiv\" style=\"background-image: url('" + result[i].PreviewUrl + "')\" />")
                            .click(function (_slider, url) {
                                return function () {
                                    $("#PhotoSliderImg", _slider).attr("src", url);
                                }
                            } (_slider, url));

                        var photolist = $("#PhotoSliderItems", _slider);

                        switch (action) {
                            case ACTION.INIT:
                                $("#PhotoSliderItems", this).append(newElement);
                                break;
                            case ACTION.APPEND:

                                photolist.animate(
                                    {
                                        left: '-=90'
                                    },
                                    500,
                                    function () {
                                        $("#PhotoSliderItems", _slider).append(newElement);
                                    });

                                _slider.currentIndex++;
                                break;
                            case ACTION.PREPEND:
                                if (_slider.currentIndex == 0) {
                                    return;
                                }

                                photolist.animate(
                                    {
                                        left: '+=90'
                                    },
                                    500,
                                    function () { });

                                _slider.currentIndex--;
                                break;
                        }
                    }

                    $("#LeftArrow", _slider).unbind();
                    $("#RightArrow", _slider).unbind();

                    if (_slider.currentIndex > 0) {
                        $("#LeftArrow", _slider).click(function () { downloadPhotos(_slider.currentIndex - 1, 1, ACTION.PREPEND); });
                    }
                    if (result.length == loadCount) {
                        $("#RightArrow", _slider).click(function () { downloadPhotos(_slider.currentIndex + count, 1, ACTION.APPEND); });
                    }
                    if (selectIndex != undefined) {
                        $($("#PhotoSliderItems div", _slider)[selectIndex]).click();
                    }
                })
            );
        });
        downloadPhotos(0, count, ACTION.INIT, 0);
    });
});