/*globals define*/
/*jslint nomen:true*/

/**
 * @class de_epages.presentation.tray
 * @author Copyright 2006-2013, epages GmbH, All Rights Reserved
 *
 * The tray creates a dialog which containes stuff.
 *
 * ### Example
 *
 *     require(['de_epages/presentation/tray'], function (Tray) {
 *
 *         var tray = new Tray({
 *             tabs: {
 *                 products: {
 *                     id: #Shop.ProductFolder.ID
 *                     action: 'JSONSearchProductsToInsert',
 *                     additionslContent: '<a href="#">Additional content</a>'
 *                 }
 *
 *             },
 *             dialog: {
 *                title: 'Produkte hinzufügen'
 *             }
 *         };
 *
 *         tray.open();
 *     });
 *
 * @uses jQuery
 * @uses ep.ui.dialog
 * @uses de_epages.presentation.tray.main-view
 *
 * @return {Object} Tray
 */

define('de_epages/presentation/tray', [
    'jquery',
    'de_epages/presentation/tray/main-view',
    '$dict!./dictionary',

    'ep/ui/dialog'
], function ($, MainView, dict) {
    'use strict';

    var options, init;

    options = {
        tabs: undefined,
        dialog: {
            width: 920,
            height: 589,
            draggable: false,
            modal: true,
            autoOpen: false
        }
    };

    /**
     * Inititlaizes
     *
     * @method init
     * @member de_epages.presentation.tray
     *
     * @hide
     * @since
     *
     * @param  {de_epages.presentation.tray} tray     The tray to initialize
     * @param  {Object}                      _options see
     * @return {Object}                               [description]
     */
    init = function (tray, _options) {
        if (tray.dialog) {
            // tray is already initialized
            return;
        }

        var self = this,
            o = $.extend(true, _options, {});

        tray.view = new MainView(o);

        o.dialog.buttons = [{
            text: dict.translate('Apply'),
            click: function () {
                o.callback(tray.view.getSelectedElements());
                tray.dialog.uiDialog('close');
            }
        }];

        tray.dialog = $('<div class="ep-tray-dialog" />').uiDialog(o.dialog).append(tray.view.render().el);
    };

    /**
     * Creates a new tray instance
     *
     * @method constructor
     *
     * @since 6.17.0
     * @param  {Object}     _options
     * @param  {Boolean}    [_options.useTray=false]  Key-value-pairs of tab name and corresponding
     *                                                view action
     * @param  {Object}     [_options.tabs=undefined] Whether an explicit tray tab should be
     *                                                displayed or not
     * @param  {Object}     [_options.dialog]         Options to initialize a uiDialog (see {@link
     *                                                ep.ui.dialog})

     * @return {Function}   Tray
     */
    return function (_options) {
        var o = $.extend(true, {}, options, _options);

        return {
            /**
             * Initializes the dialog if none exists and opens it
             *
             * @since 6.17.0
             */
            open: function (searchString) {
                var self, searchField;
                self = this;

                init(this, o);
                this.view.on('change:requiredHeight', function (h) {
                    self.adjustDialogHeight(h);
                });

                // Check if search field value differs from the input's value the tray was called with and in that case do a new search
                searchField = this.dialog.find('.ep-tray-searchfield');
                if (searchField.length > 0) {
                    if (searchField.val() !== searchString) {
                        searchField.val(searchString);
                        this.view.showSearchResults(searchString);
                    }
                }

                this.dialog.uiDialog('open');
            },

            adjustDialogHeight: function (h) {
                if (this.dialog && (!this.dialog.uiDialog('option', 'height') || this.dialog.uiDialog('option', 'height') < h + 148)) {
                    this.dialog.uiDialog('option', 'height', h + 148);
                }
            },

            /**
             * Closes the dialog
             *
             * @since 6.17.0
             */
            close: function () {
                if (this.dialog) {
                    this.dialog.uiDialog('close');
                }
            },

            /**
             * Removes the DOM element
             *
             * @since 6.17.0
             */
            destroy: function () {
                if (this.dialog) {
                    this.dialog.remove();
                    this.dialog = undefined;
                }
            }
        };
    };
});