/**
 * Create a view of navigable slides.
 *
 * The `ep.uiSliderbox()` method creates a view of slides which are navigable with touch swipe gestures and
 * clickable areas on the left and right side.
 *
 * ### Examples
 * Create a simple slidebox with 3 slide and 2 content boxes per slide.
 *
 * JavaScript:
 *
 *     ep('#slidebox')
 *         .uiSlidebox({
 *             view: 2,
 *             speed: 600
 *         });
 *
 * HTML:
 *
 *     <div id="slidebox">
 *       <ul>
 *         <li>
 *           <img alt="Bild 1" src="ep/ui/slideboxTest_Image1.jpg"/>
 *         </li>
 *         <li>
 *           <p>
 *             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod,
 *             risus dictum vulputate varius, sapien elit feugiat massa, in feugiat lacus diam vel ipsum.
 *           </p>
 *         </li>
 *         <li>
 *           <p>
 *             Nulla lacinia felis in nulla auctor non condimentum sapien vestibulum. Donec quis ornare arcu.
 *             Nullam semper, nunc eget faucibus condimentum, velit massa pulvinar lorem, id dignissim lectus
 *             diam ac elit. Morbi mattis venenatis posuere. Nulla congue risus id orci vestibulum sed tempor
 *             dolor molestie.
 *           </p>
 *         </li>
 *         <li>
 *           <img alt="Bild 2" src="ep/ui/slideboxTest_Image2.jpg"/>
 *         </li>
 *         <li>
 *           <img alt="Bild 3" src="ep/ui/slideboxTest_Image3.jpg"/>
 *         </li>
 *       </ul>
 *     </div>
 * 
 * @class jQuery.ui.uiSlidebox
 * @extends jQuery.widget
 * 
 * @uses ep.ui.core
 * @uses jQuery.event.special.load
 * @uses jQuery.event.special.touch
 * @uses jQuery.fn.class
 * @uses jQuery.tmpl
 * @uses jQuery.ui.widget
 * @since 6.15.0
 */

/**
 * @event changeslide This event is triggered when the slide change to an other.
 * @member jQuery.ui.uiSlidebox
 *
 * @since 6.15.0
 */

/**
 * @cfg {Number} view A count of how many content box are displayed per slide view.
 */

/**
 * @cfg {Number} speed The animation time in seconds for the slide effect.
 */

/**
 * See `jQuery.ui.uiSlidebox` for details.
 * 
 * @param {Object} options A map of additional options pass to the method.
 * @param {Number} view A count of how many content box are displayed per slide view.
 * @param {Number} speed The animation time in seconds for the slide effect.
 * 
 * @fires changeslide
 *
 * @method uiSlidebox
 * @member jQuery
 *
 * @since 6.15.0
 */

/*
 * @copyright       © Copyright 2006-2012, epages GmbH, All Rights Reserved.
 *
 * @module          ep.ui.slidebox
 */
/*global define,window*/
/*jslint nomen:true, vars:true*/
define("ep/ui/slidebox", ["jquery", "ep", "vendor/sly", "jquery/ui/widget", "$ready!"], function ($, ep, Sly) {
    'use strict';

    $.widget("ui.uiSlidebox", {
        options: {
            view: 2,
            arrow: true,
            speed: 300,
            maxWidth: 200
        },

        _create: function () {
            var self = this,
                o = self.options,
                slides,
                container;

            self.container = self.element;
            self.wrapper = self.container.children().addClass("slidee");
            slides = self.wrapper.children();

            var resizeItems = function () {
                    var slidesPerView = o.view;
                    var maxSlideSize = o.maxWidth;
                    var minPadding = 10;

                    var windowWidth = $(window).width();
                    var slidesWidth = Math.floor(windowWidth / slidesPerView);

                    var emptyWindowSpace = windowWidth - (maxSlideSize * slidesPerView);

                    var slidePadding = Math.floor(emptyWindowSpace / (slidesPerView * 2));

                    if (slidePadding < minPadding) {
                        slidePadding = minPadding;
                    }
                    if (slidesWidth > maxSlideSize) {
                        slidesWidth = maxSlideSize;
                    }
                    self.container.width(windowWidth);
                    self.wrapper.css("max-width", slides.length * (slidesWidth + 2 * slidePadding));
                    slides.width(slidesWidth).css('padding-left', slidePadding).css('padding-right', slidePadding);
                };

            resizeItems();

            self.sly = new Sly(self.container[0], {
                horizontal: 1,
                itemNav: 'centered',
                activateOn: null,
                smart: 1,
                mouseDragging: 1,
                touchDragging: 1,
                startAt: 0,
                scrollBy: 1,
                activatePageOn: 'click',
                speed: 300,
                elasticBounds: 1
            }, {
                moveEnd: function () {
                    self.container.trigger('changeSlide', {
                        slide: self.sly.rel.activePage,
                        slides: self.sly.items.length
                    });
                }
            }).init();

            $(window).on('resize', function () {
                resizeItems();
                self.sly.reload();
            });

        },


        /**
         * Go to an specified slide.
         *
         * @param {Number,String} slide Number of the slide to go, accept also 'prev' and 'next'.
         *
         * @method goTo
         * @member jQuery.ui.uiSlidebox
         *
         * @since 6.15.0
         */
        goTo: function (i) {
            var sly = this.sly;
            if (i === 'next') {
                sly.next();
            } else if (i === 'prev') {
                sly.prev();
            } else {
                sly.activatePage(i);
            }
        },

        destroy: function () {
            var self = this;

            self.wrapper.removeClass('slidee');

            self.sly.destroy();

            self._superApply(arguments);
        }
    });

    return ep;

});