$(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;\">\
        <a id=\"ImgLink\" href=\"#\"><img id=\"PhotoSliderImg\" src=\"\" border=\"0\" halign=\"center\"/><a /><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 - 49);

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

        var inProcess = false;

        var downloadPhotos = Function.createDelegate(this, function (startIndex, loadCount, action, selectIndex) {

            if (inProcess)
                return;

            inProcess = true;

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

                    var _slider = this;

                    if (result.length > 0) {

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

                        for (var i = 0; i < result.length; i++) {
                            var url = result[i][size + "Url"];

                            var pageUrl = result[i].PageUrl;



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

                            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();
                    }

                    inProcess = false;
                })
            );
        });
        downloadPhotos(0, count, ACTION.INIT, 0);
    });
});