/**
 * Create a slideshow on mobile devices for a given set of images.
 *
 * The `ep.uiMobileslides()` method creates a slideshow for a given set of images.
 *
 * This slideshow is displayed in an overlay on top of the mobile web site. A click on the applied element opens
 * the slideshow.
 * This are the major differences to `ep.uiSlides()`.
 *
 * ### Examples
 * Create a simple slideshow.
 *
 * JavaScript:
 *
 *     ep('#slides01')
 *       .uiMobileslides({
 *         images  : '#images img',
 *       });
 *
 * HTML:
 *
 *     <ul id="images" style="display:none;">
 *       <li>
 *         <img
 *           alt="Bild 1"
 *           src="ep/ui/slidesTest_Image1.jpg"
 *           data-src-m="ep/ui/slidesTest_Image1.jpg"
 *           data-src-l="ep/ui/slidesTest_Image1.jpg"
 *         />
 *       </li>
 *       <li>
 *         <img
 *           alt="Bild 2"
 *           src="ep/ui/slidesTest_Image2.jpg"
 *           data-src-m="ep/ui/slidesTest_Image2.jpg"
 *           data-src-l="ep/ui/slidesTest_Image2.jpg"
 *         />
 *       </li>
 *       <li>
 *         <img
 *           alt="Bild 3"
 *           src="ep/ui/slidesTest_Image1.jpg"
 *           data-src-m="ep/ui/slidesTest_Image1.jpg"
 *           data-src-l="ep/ui/slidesTest_Image1.jpg"
 *         />
 *       </li>
 *     </ul>
 *     <div id="slides01"">Open slideshow</div>
 * 
 * @class jQuery.ui.uiMobileslides
 * @extends jQuery.widget
 * 
 * @uses ep.ui.core
 * @uses ep.ui.slidebox
 * @uses jQuery.event.special.touch
 * @uses jQuery.tmpl
 * @uses jQuery.ui.widget
 * @since 6.15.0
 */

/**
 * Open the slideshow (overlay).
 * 
 * @method open
 * @member jQuery.ui.uiMobileslides
 *
 * @since 6.15.0
 */

/**
 * @cfg {Array,Element,String} images A set of images which will be displayed.
 */

/**
 * See `jQuery.ui.uiMobileslides` for details.
 * 
 * @param {Object} options A map of additional options pass to the method.
 * @param {Array,Element,String} images A set of images which will be displayed.
 * 
 * @method uiMobileslides
 * @member jQuery
 *
 * @since 6.15.0
 */

/*
 * @copyright       © Copyright 2006-2012, epages GmbH, All Rights Reserved.
 *
 * @module          ep.ui.slides
 *
 * @revision        $Revision: 1.9 $
 */

/*globals define, window, navigator*/
/*jslint nomen:true*/

define("ep/ui/mobileslides", [
    "jquery",
    "ep",
    "$tmpl!./mobileslides",
    "jquery/ui/widget",
    "ep/ui/core",
    "ep/ui/slidebox"],
    function ($, ep, tmplSlides) {
        'use strict';

        var body, win = $(window),
            mobile, has_stateHandling = (typeof (window.history.pushState) === 'function' && typeof (window.history.replaceState) === 'function'),
            preventDefault = function (event) {
                event.preventDefault();
            };


        $.widget("ui.uiMobileslides", {
            options: {
                images: "img" // selector / array of data / data / image node / array of image nodes / jQuery object
            },

            _create: function () {
                var self = this,
                    o = self.options,
                    imgs = self.images = ep.ui.imgData(o.images).on("change", $.proxy(self, "_change")),
                    tmplData = {
                        tBack: "Back",
                        tFullSize: "Fullsize",
                        images: imgs
                    };

                if (has_stateHandling) {
                    window.history.replaceState({
                        'mobileSlideOpen': false
                    }, 'Test', window.location.href);
                }

                win.on('popstate', function (_event) {
                    if (_event.originalEvent.state && !_event.originalEvent.state.mobileSlideOpen) {
                        self.close();
                    }
                });

                win.on("resize", $.proxy(self, "_resize"));

                self.element.on("click", $.proxy(self, "_open"));

                // load template and add element names to instance
                $.extend(self, tmplSlides([tmplData]).appendTo("body").hide().tmplItem("elements"));

                self.back.on("click", function () {
                    if (has_stateHandling) {
                        window.history.back();
                    } else {
                        self.close();
                    }
                });

                self.fullsize.on("click", $.proxy(self, "_fullsize"));

                $('.ep-mobileSlides-body').uiSlidebox({
                    view: 1.0,
                    arrow: true,
                    maxWidth: 1000
                });

                self.body.on("changeSlide", function (event, o) {
                    self.count.text((o.slide + 1 || 1) + " / " + o.slides);
                });

                $('.ep-mobileSlides-foot').uiSlidebox({
                    view: 4,
                    arrow: true,
                    maxWidth: 1000
                });

                self.foot.on("click", "li", function () {
                    imgs.current($(this).data("index"));
                });

                self.scrollTop = 0;
                self._setOptions(o);
            },

            _init: function () {
                var self = this;

                if (!body) {
                    body = $("body");
                }

                if (!mobile) {
                    mobile = $(".MobileLayout");
                }

                self._resize();
            },

            _fullsize: function (event) {
                event.preventDefault();
                window.location.href = this.images.current().href;
            },

            _resize: function () {
                this.container.height(win.height() + (/iPhone/.test(navigator.userAgent) ? 60 : 0));
            },

            _change: function () {
                var self = this;

                self.body.uiSlidebox("goTo", self.images.currentItem);
            },

            _open: function (event) {
                event.preventDefault();

                if (has_stateHandling) {

                    window.history.pushState({
                        'mobileSlideOpen': true
                    }, 'Test', window.location.href);
                }

                this.open();
                this._resize();
            },

            open: function () {
                var self = this;

                // save current scroll position to restore
                self.scrollTop = body.prop("scrollTop");

                body.prop("scrollTop", 0).on("scroll.mobileSlides", preventDefault);

                self.container.show();

                // Re init sizes
                self.body.uiSlidebox();
                self.foot.uiSlidebox();

                mobile.hide(); // Prevent mark of links in bottom layers in Android 2.x
            },

            /**
             * Close the slideshow.
             *
             * @method close
             * @member jQuery.ui.uiMobileslides
             *
             * @since 6.15.0
             */
            close: function () {
                var self = this;

                body.prop("scrollTop", self.scrollTop).off("scroll.mobileSlides", preventDefault);

                mobile.show(); // Prevent mark of links in bottom layers in Android 2.x
                self.container.hide();
            },

            destroy: function () {
                var self = this;

                self.images.off(".mobileSlides");
                self.container.remove();
                self._superApply(arguments);
            }
        });

        return ep;
    });