/**
 * Create a slider with label (value and unit) and (optional) info bubble
 *
 * The `ep.uiSlider()` creates a slider with a label (value and (optional) unit) and an (optional) info bubble.
 *
 * ### Examples
 * Create a simple slider with unit pixel and info bubble. Options are passed in data attribute. (Could just as well be passed via options map.)
 *
 * JavaScript:
 *
 *     ep('#uiSlider').uiSlider();
 *
 * HTML:
 *
 *     <div id="uiSlider" data-ep-ui-slider='{"value" : 5, "unit" : "pixel", "max" : 10, "min" : 0, "label" : "Height", "info" : {"src" : "./../BO/icons/ico_s_bubblehelp.png", "alt" : "Info text about height settings"}}'></div>
 *
 *
 * @class jQuery.ui.uiSlider
 * @extends jQuery.slider
 *
 * @uses ep.ui.core
 * @uses ep.ui.tooltip
 * @uses jQuery.ui.slider
 * @since 6.15.0
 */

/**
 * @cfg {String} label The label (text).
 */

/**
 * @cfg {Object} info A map with keys &quot;src&quot; and &quot;alt&quot; specifying the info bubble to appear next to the label.
 */

/**
 * @cfg {String} unit The unit (text).
 */

/**
 * See `jQuery.ui.uiSlider` for details.
 *
 * @param {Object} options A map of additional options pass to the method.
 * @param {String} label The label (text).
 * @param {Object} info A map with keys &quot;src&quot; and &quot;alt&quot; specifying the info bubble to appear next to the label.
 * @param {String} unit The unit (text).
 *
 * @method uiSlider
 * @member jQuery
 *
 * @since 6.15.0
 */

/*
 * @copyright       © Copyright 2006-2012, epages GmbH, All Rights Reserved.
 *
 * @module          ep.ui.slider
 */
/*jslint nomen: true*/
/*global define*/
define("ep/ui/slider", [
    "jquery",
    "ep",

    "jquery/ui/widget",
    "jquery/ui/slider",
    "ep/ui/tooltip"
], function ($, ep) {

    'use strict';

    $.widget('ui.uiSlider', $.ui.slider, {

        options: {
            label: '',
            unit: '',
            info: null
        },

        widgetEventPrefix: 'slide',

        _create: function () {
            var self = this,
                o = $.extend(self.options, $.parseJSON(self.element.attr('data-ep-ui-slider') || "null"));

            // Create UI elements, add CSS classes and set initial texts.
            self.labelNode = $('<div>').text(o.label).addClass('ep-uiSlider-label');

            if (o.info) {
                self.infoNode = $('<span>').text(o.info.alt);

                self.bubbleHelp = $('<img/>').addClass('BubbleHelp').attr({
                    'src': o.info.src,
                    'alt': o.info.alt
                }).appendTo(self.labelNode);
            }

            self.valueNode = $('<div>').addClass('ep-uiSlider-value');
            self.sliderNode = $('<div>').addClass('ep-uiSlider-slider');

            self.element.addClass('ep-uiSlider-wrap').append(self.labelNode, self.valueNode, self.sliderNode);

            // Create (ep.ui) *tooltip*.
            if (o.info) {
                self.infoNode.uiTooltip({
                    context: self.bubbleHelp
                });
            }


            // Create (jQuery) *slider*.
            self.element = self.sliderNode;

            self._superApply(arguments);

            self.element = self.element.parent();

            // Add event handling.
            self.element.on('slide', function (event, ui) {
                self.valueNode.text(ui.value + (o.unit ? (' ' + o.unit) : ''));
            });

            // Render *valueNode*.
            self.element.trigger('slide', {
                value: o.value
            });
        },

        destroy: function () {
            var self = this;

            if (self.infoNode) {
                self.infoNode.remove();
            }

            self.labelNode.remove();

            self.valueNode.remove();

            self.element.removeClass('ep-uiSlider-wrap');

            self._superApply(arguments);

            self.sliderNode.remove();
        }

    });

    return ep;

});