$(function() {
    // **********************************************************************************************************************************
    // SliderShow Widget
    // **********************************************************************************************************************************
     $.widget( "cem.slidershow", {
        version: "0.0.1",
        options: {
            canMove: true,
            isMoving: false,
            direction: ''
        },
        _slider: null,
        // the constructor
        _create: function(options){

			this._on(this.element, {
				mousemove:this._doMouseMove,
				mouseout:this._doMouseOut
			});

            this.element
                .toggleClass( 'cem-slidershow', true )
                // prevent double click to select text
                .disableSelection();

            this._slider = $("<div>", {"class": "cem-slidershow-slider"}).prependTo(this.element);

            var _self = this;
            this.element.children('img')
                .each(function() {
                    var d = $(this).data(),
                        f =$('<figure>', {"class": d.group + " cem-slidershow-item"});
                    f.append(this);
                    f.append('<figcaption><h3>Chienne de vie</h3><p><strong>De Hélène Choquette</strong></p></figcaption></figure>');
                    _self._slider.append(f);
                });

            this.option(this.element.data());
        },
        // called when changing options
        _refresh: function() {
            // trigger a callback/event
            this._trigger( "change", $.Event(), {element: this.element} );
        },
        _doMouseMove: function(e) {
			if(e.offsetX + e.target.offsetLeft > this.element.innerWidth() - this._slider.children().innerWidth()) {
				this.options.direction = 'left';
				this.options.canMove = true;
				this._moveSlider();
			} else if (e.offsetX + e.target.offsetLeft < this._slider.children().innerWidth()) {
				this.options.direction = 'right';
				this.options.canMove = true;
				this._moveSlider();
			}
		},
        _doMouseOut: function(e) {
			this.options.canMove = false;
        },
        _moveSlider: function() {
			if(!this.options.isMoving) {
				var _self = this,
                    childWidth = this._slider.children().width(),
                    leftMargin = parseInt(this._slider.css('margin-left'));

				if(this.options.direction == 'left') { // if we need to move the slider to the left
					if(leftMargin > -childWidth * (this.options.nbItems - 4)) {
						this.options.isMoving = true;
						this._slider.animate( {
							marginLeft: '-=' + (childWidth + 20)
						}, 1000, function() {
							_self.options.isMoving = false;
                            _self._moveSlider();
						});
					}
                } else if (this.options.direction == 'right') { // if we need to move the slider to the right
                    if(leftMargin < 0) {
                        this.options.isMoving = true;
                        this._slider.animate( {
                            marginLeft: '+=' + (childWidth + 20)
                        }, 1000, function() {
                            _self.options.isMoving = false;
                            _self._moveSlider();
                        });
                    }
                }
			}

        },
        // events bound via _on are removed automatically
        // revert other modifications here
        _destroy: function() {

            this.element
                .toggleClass( 'cem-slidershow', false )
                .enableSelection()
                .append(this.element.find('img'))
                .find('.cem-slidershow-item')
                    .remove();
        },
        // _setOptions is called with a hash of all options that are changing
        // always refresh when changing options
        _setOptions: function() {
            // _super and _superApply handle keeping the right this-context
            this._superApply( arguments );
            this._refresh();
        },
        // _setOption is called for each individual option that is changing
        _setOption: function( key, value ) {
            this._super( key, value );
        }
    });
    // **********************************************************************************************************************************

    $('.cem-slidershow').slidershow();

});