/*jslint nomen:true*/
/*global define, window*/

/**
 * @class jQuery.ui.productUiTopSellerWidget
 * @author Copyright 2006-2013, epages GmbH, All Rights Reserved
 *
 * The top seller widget displays the recently most ordered products of the shop.
 *
 * ### Example
 * HTML:
 *
 *     <div class="ep-topseller"></div>
 *
 * JavaScript:
 *
 *     $('div.ep-topseller').productUiTopSellerWidget({
 *          items: [
                {'thumbnail': '/WebRoot/Store/Shops/DemoShop/Products/wb_1003111010/wb_1003111010_xs.jpg', 'count': 142, 'name': 'Pathfinder ZG', 'productId': '17161'},
                {'thumbnail': 'BUNDLED_PRODUCT_IMAGE', 'count': 140, 'name': 'Black Bear Gemini', 'productId': '17234'},
                {'thumbnail': '/WebRoot/Store/Shops/DemoShop/Products/nf_1005104010/nf_1005104010_xs.jpg', 'count': 138, 'name': 'North Face Tadpole 23', 'productId': '17162'},
                {'thumbnail': '/WebRoot/Store/Shops/DemoShop/Products/md_49417110/md_49417110_xs.jpg', 'count': 136, 'name': 'Meindl Air Revolution 2.0', 'productId': '17214'}
            ],
            viewAction: 'MBO-ViewGeneral',
            bundleThumbnail: '/WebRoot/Store/Shops/DemoShop/BO/icons/list_ico_s_bundleproducts.png',
            noImageThumbnail: '/WebRoot/StoreTypes/6.16.2/Store/BO/icons/ico_m_product.png'
 *     });
 *
 * @uses jQuery.ui.widget
 * @uses ep.ui.dialog
 *
 * @chainable
 * @return {Object} de_epages
 */
define('de_epages/product/ui/topsellerwidget', [
    'jquery/ui/widget',
    'de_epages',
    '$tmpl!./topsellerwidget',
    '$tmpl!./topsellerwidget-dialog',
    '$dict!./topsellerwidget',
    'ep/ui/dialog'
], function ($, de_epages, tmplTopSellerWidget, tmplTopSellerWidgetDialog, dict) {

    'use strict';

    $.widget('ui.productUiTopSellerWidget', {

        /**
         * Options to be passed to the widgt on initialzation
         *
         * @cfg {Object} options
         * @cfg {Array} options.items Array of products (should contain thumbnail, count, name and product id)
         * @cfg {Number} [options.previewItemCount=''] Number of items which should be displayed in the previews
         * @cfg {String} [options.bundleThumbnail] Path of the thumbnail for bundle products
         * @cfg {String} [options.noImageThumbnail] Path of the thumbnail if no product image exists
         */
        options: {
            items: [],
            previewItemCount: 3,
            bundleThumbnail: '',
            noImageThumbnail: ''
        },

        /*
         * Sets the path and the thumbnail for items, calls the render method and sets the event listener for opening the dialog.
         *
         * @since 6.17.0
         * @private
         */
        _create: function () {
            var _this = this,
                o = this.options,
                items = o.items;

            items.forEach(function (item, i) {
                // Replace the thumbnail placeholders with real URLs
                if (item.thumbnail === 'BUNDLED_PRODUCT_IMAGE') {
                    items[i].thumbnail = o.bundleThumbnail;
                } else if (item.thumbnail === 'NO_IMAGE') {
                    items[i].thumbnail = o.noImageThumbnail;
                }

                items[i].detailLink = '?ViewAction=' + _this.options.viewAction + '&ObjectID=' + item.productId;
            });

            this._render(items, o.previewItemCount).appendTo(this.element);
            $(this.element).find('.more-link').click(function () {
                _this._openDialog();
            });
        },

        /*
         * Renders the preview template
         *
         * @since 6.17.0
         * @private
         */
        _render: function (items, previewItemCount) {
            return tmplTopSellerWidget({
                items: items.slice(0, previewItemCount),
                displayMore: items.length > previewItemCount
            }).dictParse(dict, true);
        },

        /*
         * Renders dialog template and creates new instance of ep.ui.dialog
         *
         * @since 6.17.0
         * @private
         */
        _openDialog: function () {
            var o, dialog;

            o = this.options;
            dialog = tmplTopSellerWidgetDialog({ items: o.items }).dictParse(dict, true);

            dialog.uiDialog({
                width: 415 * Math.ceil(o.items.length / 10),
                title: o.dialogTitle,
                modal: true
            });
        },

        /**
         * Empties widget element
         *
         * @since 6.17.0
         */
        destroy: function () {
            this.element.empty();
            this._superApply(arguments);
        }

    });

    return de_epages;
});