/// <reference path="../ScriptReference/jquery-1.5.2.js"/>

/*
* jQuery UI PlayerVolume
*
* Depends:
*   jquery.ui.core.js
*   jquery.ui.widget.js	
*	jquery.ui.slider.js
*   jquery.imageButton.js
*   jquery.enableTouch.js
*   Mediasite.Player.Localization.js
*
*/
(function ($) {
    $.widget("ui.playervolume", {
        options: {
            notifier: null,
            popupSpeed: 300,
            slider: true,
            ids: {
                muteButton: 'ui-playervolume-mute',
                unmuteButton: 'ui-playervolume-unmute',
                muteButtonWrapper: 'ui-playervolume-mute-wrapper',
                unmuteButtonWrapper: 'ui-playervolume-unmute-wrapper',
                volumeDiv: 'ui-playervolume-volume',
                volumeSlider: 'ui-playervolume-slider'
            },
            muted: false,
            previousVolume: 50
        },

        _setOption: function (key, value) {
            this.options[key] = value;
            this._super("_setOption", key, value);
        },

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

            self.element.addClass("ui-playervolume");
            var markup =
						'<div id="' + o.ids.muteButtonWrapper + '"><button id="' + o.ids.muteButton + '" /></div>' +
						'<div id="' + o.ids.unmuteButtonWrapper + '"><button id="' + o.ids.unmuteButton + '" /></div>' +
						'<div id="' + o.ids.volumeDiv + '">' +
							'<div id="' + o.ids.volumeSlider + '"></div>' +
						'</div>';
            self.divMarkup = $(markup).appendTo(self.element);

            self.element.mouseleave(hideVolume);

            $('#' + o.ids.muteButton)
				.attr({ title: Mediasite.Player.Localization.Buttons.Mute })
				.imageButton()
				.click(muteclick);

            $('#' + o.ids.unmuteButton)
				.attr({ title: Mediasite.Player.Localization.Buttons.UnMute })
				.imageButton()
				.click(unmuteclick);

            if (o.slider) {
                $('#' + o.ids.unmuteButton).mouseenter(showVolume);
                $('#' + o.ids.muteButton).mouseenter(showVolume);
            }
            $('#' + o.ids.unmuteButtonWrapper).hide();

            $('#' + o.ids.volumeSlider)
				.slider({
				    orientation: 'vertical',
				    range: 'min',
				    slide: function (event, ui) {
				        if (o.muted && ui.value > 0) {
				            self.unmute();
				        }

				        if (ui.value === 0) {
				            self.mute();
				        }

				        o.notifier.OnVolumeChanged(ui.value);
				    },
				    value: 50
				})
				.attr({ title: Mediasite.Player.Localization.Common.Volume })
				.css('cursor', 'pointer')
				.enableTouch();

            $('.ui-slider-handle').css('cursor', 'pointer');
            $('#' + o.ids.volumeDiv).hide();

            // jQuery UI slider range does not include this for some reason
            $('.ui-slider-range').addClass('ui-corner-all');

            function showVolume() {
                $('#' + o.ids.volumeDiv).stop(true, true).animate({ 'height': 'show', 'opacity': 'show' }, o.popupSpeed);
            }

            function hideVolume() {
                $('#' + o.ids.volumeDiv).stop(true, true).animate({ 'height': 'hide', 'opacity': 'hide' }, o.popupSpeed);
            }

            function muteclick() {
                self.options.notifier.OnClickCommand(Mediasite.Player.ClickCommand.Mute);
            }

            function unmuteclick() {
                self.options.notifier.OnClickCommand(Mediasite.Player.ClickCommand.Mute);
            }
        },

        mute: function () {
            o = this.options;
            $('#' + o.ids.muteButtonWrapper).hide();
            $('#' + o.ids.unmuteButtonWrapper).show();
            o.muted = true;
            o.previousVolume = $('#' + o.ids.volumeSlider).slider('option', 'value');
            $('#' + o.ids.volumeSlider).slider('option', 'value', 0);
        },

        unmute: function () {
            o = this.options;
            if (o.muted) {
                $('#' + o.ids.unmuteButtonWrapper).hide();
                $('#' + o.ids.muteButtonWrapper).show();
                o.muted = false;
                $('#' + o.ids.volumeSlider).slider('option', 'value', o.previousVolume);
            } else {
                if (arguments[0] != null) { var volumeToSet = arguments[0]; }
                $('#' + o.ids.volumeSlider).slider('option', 'value', volumeToSet);
            }
        },

        disable: function () {
            var self = this,
                o = self.options;
            $('#' + o.ids.muteButton).imageButton("disable");
            $('#' + o.ids.unmuteButtonWrapper).imageButton("disable");
        },

        destroy: function () {
            this.element.removeClass("ui-playervolume");
            this.divMarkup.remove();
        }
    });
})(jQuery);