var ContentScroller = new Class({

    Implements: Options,
    options: {
      'thumbnailCount': 5,
      'sliderClass': 'standard-container',
      'displayClass': 'clear',
      'disableControlOpacity': .4,
      'display': {'title': 'h6.content-slider-title', 'content': 'div.content-slider-content'},
      'thumbnailSpecs' : {'width': 120, 'height': 100}
    },

    initialize: function (el, options) {
        // Get the F out of here if the id passed in ain't no good
        this.el = el;
        this.contentContainer = document.getElement(this.el);
        if (!this.contentContainer)
            return false;

        // Set up instance variables and initial setup
        this.setOptions(options);
        this.thumbnailSpecs = this.options['thumbnailSpecs'];
        this.display = this.options['display'];
        this.sliderClass = this.options['sliderClass'];
        this.displayClass = this.options['displayClass'];
        this.disableControlOpacity = this.options['disableControlOpacity'];
        this.thumbnailCount = this.options['thumbnailCount'];
        this.sliderIndex = 0;
        // Just in case the ul is not getting hidden elsewhere
        this.contentContainer.setStyle('display', 'none');

        // Create wraps inside JS injected area
        this.sliderWrap = new Element('div', {'id': 'slider-wrap', 'class': this.sliderClass});
        this.contentContainer.grab(this.sliderWrap, 'after');
        this.displayWrap = new Element('div', {'id': 'display-wrap', 'class': this.displayClass});
        this.sliderWrap.grab(this.displayWrap);

        // Build out elements for the player
        this._createPlayer();

        // Get total thumbs and calculate page count and if gallery size is less <= thumb count
        var totalThumbs = $('slider-thumbs').getChildren('li').length;
        this.pageCount = (Math.ceil(totalThumbs / this.thumbnailCount) - 1);
        this.maxCountNotFound = (totalThumbs <= this.thumbnailCount) ? true : false;
        $('slider-next').addClass((this.maxCountNotFound) ? 'disable-control' : '');

        // References instance variables for Slider Dimensions
        this._getSliderDimensions();
        $('slider-thumbs-wrap').setStyles({width: this.sliderWidth, height: this.sliderHeight});

        // Set the initlal values for the slider content dealy
        this._setInitialLoad();

        // click events for the thumbnails
        this._setDisplayEvents();

        // Set active thumbnail
        this._setActiveThumb();

        // Set active controls
        this._setActiveControls();

    }, 

    _getSliderDimensions: function () {
        var containerSpacing = $('slider-thumbs-wrap').getStyles('margin', 'padding');
        var spacing = 0; 
        for (var index in containerSpacing) {
            var values = containerSpacing[index].split(" ");
            var rightVal = values[1].toInt();
            var leftVal = values[3].toInt();
            spacing = spacing + rightVal + leftVal;
        }
        var listSize = $('slider-thumbs-wrap').getElement('li').getSize();
        this.sliderWidth = (listSize.x.toInt() * this.thumbnailCount) + spacing;
        this.sliderHeight = listSize.y.toInt();
    },

    _setInitialLoad: function () {
        // Get values from first list item to build out display on the initial load
        var firstListItem = this.contentContainer.getElement('li:first-child');
        var initialImg = firstListItem.getElement('img');
        var initialTitle = firstListItem.getElement(this.display['title']);
        var initialContent = firstListItem.getElement(this.display['content']);
        // Build out display
        this._setDisplayElements(initialTitle.get('text'), initialContent.get('html'), {src: initialImg.get('src'), alt: initialImg.get('alt')}, true);
        // Set first thumbnail opacity
        $('slider-thumbs-container').getElement('li:first-child img').addClass('active-thumb');
    },

    _setDisplayEvents: function () {
        var that = this;

        $('slider-thumbs-wrap').addEvent('click', function (e) {
            var target = $(e.target);
            if ($$(target).get('tag') == 'img') {
                var listId = target.id.replace(/thumb-/, '')
                that._setDisplayContainer(that, listId);
            }
        });

        $('slider-thumbs-container').getElements('.controls').addEvent('click', function (e) {
            var target = $(e.target);
            if (that.maxCountNotFound)
                target.preventDefault();

            $('slider-thumbs-container').getElements('.controls').removeClass('disable-control');
            if (target.id == 'slider-previous') 
                that._previousThumbs(target);
            else if (target.id == 'slider-next')
                that._nextThumbs(target);
            
            that._setActiveControls();
        });
    },

    _previousThumbs: function (target) {
        this.sliderIndex --;

        if (this.sliderIndex == 0) {
            target.addClass('disable-control');
        } 
        else if (this.sliderIndex < 0) {
            this.sliderIndex = 0;
            target.addClass('disable-control');
        }

        $('slider-thumbs').tween('right', this.sliderIndex * this.sliderWidth);
    },

    _nextThumbs: function (target) {
        this.sliderIndex ++;

        if (this.sliderIndex == this.pageCount) {
            target.addClass('disable-control');
        } 
        else if (this.sliderIndex > this.pageCount) {
            this.sliderIndex = this.pageCount;
            target.addClass('disable-control');
        } 

        $('slider-thumbs').tween('right', this.sliderIndex * this.sliderWidth);
    },

    _setDisplayContainer: function (that, listId) {
        $('slider-thumbs').getElements('img').removeClass('active-thumb');
        var thumb = $('thumb-' + listId);
        if (thumb)
          thumb.addClass('active-thumb');

        var selectedEl = $$('#' + that.contentContainer.id + ' li')[listId];
        that._setDisplayElements(selectedEl.getElement(that.display['title']).get('text'), selectedEl.getElement(that.display['content']).get('html'), {src: selectedEl.getElement('img').get('src'), alt: selectedEl.getElement('img').get('alt')});

        // Set active thumbnail
        this._setActiveThumb();
    },

    _setDisplayElements: function (title, content, image, fadeSliderContainer) {
        var targetElements = ['image-display', 'title-display', 'content-display'];

        if (fadeSliderContainer) {
            this.displayWrap.setStyle('opacity', '0');
            var fade = new Fx.Tween(this.displayWrap);
            fade.start('opacity', '0', '1');
        }
        else {
            targetElements.each(function (item, i) {
                var elm = $(item);
                elm.setStyle('opacity', '0');
                var fade = new Fx.Tween(elm);
                fade.start('opacity', '0', '1');
            });
        }
    
        $(targetElements[0]).setProperties({src: image['src'], alt: image['alt']});
        $(targetElements[1]).set('text', title);
        $(targetElements[2]).set('html', content);
    },

    _createPlayer: function () {
        this.displayWrap.set('html', '<img id="image-display"/>', '<h5 id="title-display"></h5>', '<div id="content-display"></div>', '<div id="slider-thumbs-container"></div>');
        $('slider-thumbs-container').set('html', '<div id="slider-thumbs-wrap"></div>', '<div id="slider-previous" class="disable-control controls">previous</div>', '<div id="slider-next" class="controls">next</div>');

        var sliderThumbList = new Element('ul', {'id': 'slider-thumbs'});
        $('slider-thumbs-wrap').grab(sliderThumbList);

        // Set this keyword to that so scope can reside in each loop
        var that = this;

        // Loop through existing ul and create elements for slider
        $$(this.el + ' li').each(function (item, i) {
            var originalImg = item.getElement('img');
            var thumbListItem = new Element('li');
            var thumbImg = new Element('img', {'id': 'thumb-' + i, 'src': originalImg.src, 'alt': originalImg.alt, 'title': originalImg.alt, 
                'width': that.thumbnailSpecs['width'], 'height': that.thumbnailSpecs['height']}).setStyle('opacity', .7);
            thumbListItem.grab(thumbImg);
            sliderThumbList.grab(thumbListItem);

            // Set mouseenter/mouseleave events
            var fade = new Fx.Morph(thumbImg, {duration:400, transition: Fx.Transitions.Sine.easeOut});
            thumbImg.addEvents({
                'mouseover': function () {
                        fade.cancel();
                        fade.start({'opacity': 1});
                },
                'mouseout': function () {
                    if (!this.hasClass('active-thumb')) {
                        fade.cancel();
                        fade.start({'opacity': .5});
                    }
                }
            });
        });
    },

    _setActiveThumb: function () {
        var that = this;
        $$('#slider-thumbs img').each(function (item, i) {
            var opacitySetting = (item.hasClass('active-thumb')) ? 1 : that.disableControlOpacity;
            item.setStyle('opacity', opacitySetting);
        });
    },

    _setActiveControls: function () {
        $('slider-thumbs-container').getElements('.controls').setStyle('opacity', 1);
        $('slider-thumbs-container').getElements('.disable-control').setStyle('opacity', this.disableControlOpacity);
    }
});