(function ($) {

    $(document).ready(function () {
 
        Slider = $.klass({

            store: null,
            initalised: null,
            prefix: null,
            
            initialize: function (options) {

                var self = this;
                this.store = options.store;
                this.prefix = '.jcarousel-item-';
                this.initalised = false; 

                this.hide();

                this.element.find('.close').live('click', function() {
                    self.hide.call(self);
                });

                options.connect({
                    update: this.update, 
                    reset: this.hide, 
                    scope: this
                });

                // TEST: console.log('store: ', this.store, ', initialised: ', this.initalised, 'start: ', this.defaults);
                return this;
            },


            update: function(html, indx) {
                var self = this;
                var dims = this.getDimensions(this.getSelected(indx));
                //console.log(indx, dims);
                // TEST: console.log('dims: '+dims+', html: '+html+'indx: '+indx);

                if (! this.initalised) {
                    this.initalised = true;
                    this.setDefaultStyles(dims);
                };
                
                return this.show().css($.extend({}, dims, {width: 0}))
                    .animate({width: dims.width}, 300, function() {
                        self.element.find('.gutter').empty().append(html).fadeIn(300);  
                }); 
                       
            },


            setDefaultStyles: function(dims) {
                this.element.find('.ft').css({width: dims.width-15, height: dims.height-50});
                this.element.find('.gutter').css({height: dims.height-27});
                return this;
            },


            getDimensions: function(el) {
                return $.extend({}, el.offset(), {
                    left: el.offset().left + (el.width() - el.marginOffset),
                    width: el.width()-25,
                    height: el.height()
                });

            },


            getSelected: function(indx) {
                var el = $(this.prefix+indx);
                // mixin cover right hand margin for convenience;
                return $.extend({}, el, {
                    marginOffset: this.getMarginOffset(el)});
            },


            getMarginOffset: function(el) {
                return parseInt(el.find('.winTeaserCover').css('marginRight'));
            },


            show: function() {
                return this.element.find('.gutter').hide().end().show();
            },


            hide: function(){
                return this.element.hide().find('.gutter').empty();
            }

        });

    });

})(jQuery);