var stySlider = {
    _settings: function _settings(galleryRootClass, smallItemWidth, smallItemHeight, largeItemHeight, spacing, animateDuration, animateStyle, retractedDataClass, expandedDataClass, topMarginOffset, smallTopMarginOffset, clickOpenItemFunc) {
        this.galleryRootClass = (galleryRootClass == null) ? 'sliderGallery' : galleryRootClass;
        this.smallItemWidth = (smallItemWidth == null) ? 110 : smallItemWidth;
        this.smallItemHeight = (smallItemHeight == null) ? 140 : smallItemHeight;
        this.largeItemHeight = (largeItemHeight == null) ? 220 : largeItemHeight;
        this.spacing = (spacing == null) ? 0 : spacing;
        this.animateDuration = (animateDuration == null) ? 300 : animateDuration;
        this.animateStyle = (animateStyle == null) ? 'linear' : animateStyle;
        this.retractedDataClass = (retractedDataClass == null) ? 'retracted' : retractedDataClass;
        this.expandedDataClass = (expandedDataClass == null) ? 'expanded' : expandedDataClass;
        this.topMarginOffset = (topMarginOffset == null) ? '0' : topMarginOffset;
        this.smallTopMarginOffset = (smallTopMarginOffset == null) ? '0' : smallTopMarginOffset;
        this.clickOpenItemFunc = (clickOpenItemFunc == null) ? function() { } : clickOpenItemFunc;
    },

    Init: function(settings) {
        var galleries = jQuery('.' + settings.galleryRootClass);

        for (var i = 0; i < galleries.length; i++) {
            this.galleries.push(new this._gallery(galleries[i], i, settings));
        }

        jQuery(document).mouseup(function mouseUp() {
            for (var i = 0; i < stySlider.galleries.length; i++) {
                stySlider.galleries[i].StopMove();
            }
        });
    },

    galleries: new Array(),

    _gallery: function _gallery(element, galleryIndex, settings) {
        this.rootElement = element;
        this.index = galleryIndex;
        settings.areaWidth = jQuery(element).width();
        settings.areaHeight = jQuery(element).height();
        this.settings = settings;

        if (getQueryVariable("Id") != null) {
            this.selectedItemIndex = getIndexById(jQuery('.item', element),getQueryVariable("Id"));
        }
        else {
            var hfldSelectedItemIndexText = jQuery('.SelectedItemIndex', this.rootElement)[0].value;

            if (hfldSelectedItemIndexText != null)
                this.selectedItemIndex = hfldSelectedItemIndexText - 0;
            else
                this.selectedItemIndex = 0;
        }

        this.moveRepeatTimeout = null;
        this.currentAction = null;
        this.settings.largeItemWidth = (this.settings.smallItemWidth / this.settings.smallItemHeight) * this.settings.largeItemHeight;

        this.sliderWrapper = document.createElement('div');
        jQuery(this.sliderWrapper).css({
            'position': 'absolute',
            'top': '0px',
            'left': (settings.areaWidth / 2) - (settings.largeItemWidth / 2) + 'px',
            'width': '10000px',
            'height': settings.areaHeight + 'px'
        });
        this.sliderWrapper.galleryIndex = galleryIndex;

        jQuery(this.rootElement).append(this.sliderWrapper);

        this.leftArrow = document.createElement('div');
        this.leftArrow.className = 'leftArrow';
        this.leftArrow.setAttribute('id', 'leftarw');
        this.leftArrow.galleryIndex = galleryIndex;
        jQuery(this.rootElement).append(this.leftArrow);

        this.rightArrow = document.createElement('div');
        this.rightArrow.className = 'rightArrow';
        this.leftArrow.setAttribute('id', 'rightarw');
        this.rightArrow.galleryIndex = galleryIndex;
        jQuery(this.rootElement).append(this.rightArrow);

        var expandedWrapperContainer = document.createElement('div');
        expandedWrapperContainer.className = settings.expandedDataClass;
        jQuery(this.rootElement).append(expandedWrapperContainer);

        this.expandedWrapper1 = document.createElement('div');
        jQuery(this.expandedWrapper1).addClass('extWrap');
        jQuery(expandedWrapperContainer).append(this.expandedWrapper1);
        this.expandedWrapper2 = document.createElement('div');
        jQuery(expandedWrapperContainer).append(this.expandedWrapper2);
        jQuery(this.expandedWrapper2).addClass('extWrap');
        jQuery(this.expandedWrapper2).css('display', 'none');

        this.expandedWrapperFlip = true;

        this.items = new Array();
        var itemElements = jQuery('.item', element);

        for (var i = 0; i < itemElements.length; i++) {
            this.items.push(new stySlider._galleryItem(itemElements[i], settings, this.sliderWrapper, (i == this.selectedItemIndex), galleryIndex, i));
        }



        this.MoveToMe = function MoveToMe() {
            stySlider.galleries[this.galleryIndex].MoveTo(this.itemIndex);
        }
        jQuery('.item', this.rootElement).click(this.MoveToMe);


        var selectedItem = this.items[this.selectedItemIndex];

        if (typeof selectedItem != "undefined") {
            selectedItem.rootElement.isGrown = true;
            jQuery(selectedItem.rootElement).css({ marginTop: (selectedItem.rootElement.settings.areaHeight / 2) - (selectedItem.rootElement.settings.largeItemHeight / 2) - settings.topMarginOffset + 'px' });
            jQuery(selectedItem.imageDiv).css({ width: settings.largeItemWidth + 'px', height: settings.largeItemHeight + 'px' });
            jQuery(selectedItem.retractedDataWrapper).css('display', 'none');

            jQuery(this.expandedWrapper1).html(selectedItem.expandedData);

            jQuery(this.sliderWrapper).css('left', (settings.areaWidth / 2) - (settings.largeItemWidth / 2) - this.items[this.selectedItemIndex].rootElement.offsetLeft);
            jQuery(selectedItem.rootElement).unbind('click');
            jQuery(selectedItem.rootElement).css('cursor', 'pointer')
            jQuery(selectedItem.rootElement).click(settings.clickOpenItemFunc);
        }


        this.MoveTo = function MoveTo(itemIndex) {
            this.selectedItemIndex = itemIndex;
            jQuery(this.sliderWrapper).animate({ 'left': (this.settings.areaWidth / 2) - (this.settings.largeItemWidth / 2) - this.items[itemIndex].leftOffset }, this.settings.animateDuration, this.settings.animateStyle, function() { stySlider.galleries[this.galleryIndex].Move(); });
            this.items[itemIndex].Grow(this.items[itemIndex].rootElement);
        }

        this.Move = function Move(direction) {

            if (direction == 'left') {
                if (this.items[this.selectedItemIndex - 1] != null) {
                    this.selectedItemIndex--;
                    this.currentAction = 'left';
                    this.MoveTo(this.selectedItemIndex);
                }
            }
            if (direction == 'right') {
                if (this.items[this.selectedItemIndex + 1] != null) {
                    this.selectedItemIndex++;
                    this.currentAction = 'right';
                    this.MoveTo(this.selectedItemIndex);
                }
            }
            if (direction == null) {
                if (this.currentAction == 'left') {
                    if (this.items[this.selectedItemIndex - 1] != null) {
                        this.selectedItemIndex--;
                        this.currentAction = 'left';
                        this.MoveTo(this.selectedItemIndex);
                    }
                    else {
                        this.currentAction = null;
                    }
                }
                else if (this.currentAction == 'right') {
                    if (this.items[this.selectedItemIndex + 1] != null) {
                        this.selectedItemIndex++;
                        this.currentAction = 'right';
                        this.MoveTo(this.selectedItemIndex);
                    }
                    else {
                        this.currentAction = null;
                    }
                }
            }
        }


        this.StopMove = function StopMove() {
            this.currentAction = null;
        }


        jQuery(this.leftArrow).mousedown(function leftArrowClick() {
            stySlider.galleries[this.galleryIndex].Move('left');
        });
        jQuery(this.rightArrow).mousedown(function leftArrowClick() {
            stySlider.galleries[this.galleryIndex].Move('right');
        });

        jQuery(this.rootElement).css('visibility', 'visible');


    },

    _galleryItem: function _galleryItem(element, settings, sliderWrapper, selected, galleryIndex, itemIndex) {
        this.retractedDataWrapper = jQuery('.' + settings.retractedDataClass, element);
        this.expandedData = jQuery('.' + settings.expandedDataClass, element).remove().html();
        this.image = jQuery('img', element)[0];
        this.imageDiv = jQuery('.image', element)[0];
        this.imageAspect = jQuery(this.image).width() / jQuery(this.image).height();
        this.rootElement = element;



        element.galleryIndex = galleryIndex;
        element.settings = settings;
        element.itemIndex = itemIndex;

        jQuery(sliderWrapper).append(jQuery(element).remove());

        jQuery(element).css({
            'margin-top': (settings.areaHeight / 2) - (settings.smallItemHeight / 2) - settings.smallTopMarginOffset + 'px',
            'margin-right': settings.spacing + 'px',
            'float': 'left',
            'clear': 'none',
            'overflow': 'hidden'
        });

        var imgWidthPercent;
        var imgHeightPercent;
        var itemAspect = settings.largeItemWidth / settings.largeItemHeight;

        if (this.imageAspect > itemAspect) {
            this.largeImageWidth = settings.largeItemWidth;
            this.largeImageHeight = this.largeImageWidth / this.imageAspect;
            this.smallImageWidth = settings.smallItemWidth;
            this.smallImageHeight = this.smallImageWidth / this.imageAspect;
            imgWidthPercent = 100;
            imgHeightPercent = (1 / this.imageAspect) * 100 * itemAspect;
        }
        else {
            this.largeImageHeight = settings.largeItemHeight;
            this.largeImageWidth = this.largeImageHeight * this.imageAspect;
            this.smallImageHeight = settings.smallItemHeight;
            this.smallImageWidth = this.smallImageHeight * this.imageAspect;
            imgHeightPercent = 100;
            imgWidthPercent = this.imageAspect * (1 / itemAspect) * 100;
        }


        element.isGrown = false;

        jQuery(this.imageDiv).css({
            'width': settings.smallItemWidth,
            'height': settings.smallItemHeight,
            'text-align': 'center',
            'position': 'relative'
        });


        jQuery(this.image).css({
            'width': imgWidthPercent + '%',
            'height': imgHeightPercent + '%',
            'position': 'absolute',
            'top': (100 - imgHeightPercent) / 2 + '%',
            'left': (100 - imgWidthPercent) / 2 + '%'
        });

        this.leftOffset = element.offsetLeft;


        this.Grow = function Grow(that) {
            var element = that;
            if (that == null)
                element = this;

            var galleryItem = stySlider.galleries[element.galleryIndex].items[element.itemIndex];

            for (var i = 0; i < stySlider.galleries[element.galleryIndex].items.length; i++) {
                if (stySlider.galleries[element.galleryIndex].items[i].rootElement.isGrown)
                    stySlider.galleries[element.galleryIndex].items[i].Shrink(stySlider.galleries[element.galleryIndex].items[i].rootElement);
            }

            if (!element.isGrown) {
                element.isGrown = true;
                var marginTop = (element.settings.areaHeight / 2) - (element.settings.largeItemHeight / 2);

                jQuery(element).animate({ marginTop: ((element.settings.areaHeight / 2) - (element.settings.largeItemHeight / 2)) - element.settings.topMarginOffset + 'px' }, stySlider.galleries[element.galleryIndex].settings.animateDuration, stySlider.galleries[element.galleryIndex].settings.animateStyle, null);

                jQuery(galleryItem.imageDiv).animate({ width: settings.largeItemWidth + 'px', height: settings.largeItemHeight + 'px' }, stySlider.galleries[element.galleryIndex].settings.animateDuration, stySlider.galleries[element.galleryIndex].settings.animateStyle, null);

                jQuery(this.retractedDataWrapper).fadeOut(settings.animateDuration);

                var edWrapper1;
                var edWrapper2;
                if (stySlider.galleries[galleryIndex].expandedWrapperFlip) {
                    edWrapper1 = stySlider.galleries[galleryIndex].expandedWrapper1;
                    edWrapper2 = stySlider.galleries[galleryIndex].expandedWrapper2;
                }
                else {
                    edWrapper1 = stySlider.galleries[galleryIndex].expandedWrapper2;
                    edWrapper2 = stySlider.galleries[galleryIndex].expandedWrapper1;
                }
                stySlider.galleries[galleryIndex].expandedWrapperFlip = !stySlider.galleries[galleryIndex].expandedWrapperFlip;
                jQuery(edWrapper2).html(galleryItem.expandedData);
                jQuery(edWrapper1).fadeOut(settings.animateDuration);
                jQuery(edWrapper2).fadeIn(settings.animateDuration);
            }
            jQuery(element).unbind('click');
            jQuery(element).css('cursor', 'pointer');
            jQuery(element).click(element.settings.clickOpenItemFunc);
        }
        this.Shrink = function Shrink(that) {
            var element = that;

            if (that == null)
                element = this;

            var galleryItem = stySlider.galleries[element.galleryIndex].items[element.itemIndex];

            if (element.isGrown) {
                element.isGrown = false;
                var marginTop = (element.settings.areaHeight / 2) - (element.settings.smallItemHeight / 2) - element.settings.smallTopMarginOffset;
                jQuery(element).animate({ marginTop: marginTop + 'px' }, stySlider.galleries[element.galleryIndex].settings.animateDuration, stySlider.galleries[element.galleryIndex].settings.animateStyle, null);

                jQuery(galleryItem.imageDiv).animate({ width: settings.smallItemWidth + 'px', height: settings.smallItemHeight + 'px' }, stySlider.galleries[element.galleryIndex].settings.animateDuration, stySlider.galleries[element.galleryIndex].settings.animateStyle, null);

                jQuery(this.retractedDataWrapper).fadeIn(settings.animateDuration);
            }
            jQuery(element).unbind('click');
            jQuery(element).css('cursor', 'default');
            jQuery(element).click(stySlider.galleries[element.galleryIndex].MoveToMe);
        }


    },

    Reset: function Reset() {
        this.galleries = new Array();
    }
};

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    //alert(variable + ' not found');
}

function getIndexById(itemElements, id) {

    for (var i = 0; i < itemElements.length; i++) {
        var testId = itemElements[i].attributes['styleId'].value;
        if(testId == id)
        {
            return i;
        }
    }
    return 0;
}