/// <reference path="../ScriptReference/jquery-1.7.1-vsdoc.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: {
            onVolumeChanged: null,
            onMuteClicked: 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);

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

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


            if (window.navigator.msPointerEnabled) {
                //This code is for windows 8 desktop and touch devices
                if (o.slider) {
                    $('#' + o.ids.unmuteButton).get(0).addEventListener('MSPointerOver', pointerOver);
                    $('#' + o.ids.muteButton).get(0).addEventListener('MSPointerOver', pointerOver);
                }

                $('#' + o.ids.muteButton).get(0).addEventListener('MSPointerDown', mutepointerDown);
                $('#' + o.ids.unmuteButton).get(0).addEventListener('MSPointerDown', unmutepointerDown);

                $('#' + o.ids.muteButton).keyup(function (e) {
                    var code = e.keyCode || e.which
                    if (code == 13 || code == 32) {
                        mutepointerDown(e);
                    }
                });

                $('#' + o.ids.unmuteButton).keyup(function (e) {
                    var code = e.keyCode || e.which
                    if (code == 13 || code == 32) {
                        unmutepointerDown(e);
                    }
                });

                function isMouse(e) {
                    return e.pointerType === e.MSPOINTER_TYPE_MOUSE || e.pointerType === "mouse";
                }

                function pointerOut(e) {
                    if (isMouse(e)) {
                        hideVolume();
                        self.element.unbind('mouseleave');
                    }
                }

                function mutepointerDown(e) {
                    e.stopPropagation();
                    if (isMouse(e)) {
                        muteclick();
                    } else {
                        toggleVolume();
                    }
                }

                function unmutepointerDown(e) {
                    e.stopPropagation();
                    if (isMouse(e)) {
                        unmuteclick();
                    } else {
                        toggleVolume();
                    }
                }

                function pointerOver(e) {
                    if (isMouse(e)) {
                        self.element.mouseleave(pointerOut);
                        showVolume();
                    }
                }

                function toggleVolume() {
                    if (self.isVisible()) {
                        hideVolume();
                    } else {
                        showVolume();
                        autoHideVolume();
                    }
                }
            }
            else {

                self.element.mouseleave(hideVolume);

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

                $('#' + o.ids.muteButton)
                    .mouseup(function (e) {
                        if (e.which == 1) { muteclick(); } 
                    })
                    .keyup(function (e) {
                        var code = e.keyCode || e.which
                        if (code == 13 || code == 32) {
                            muteclick();
                        }
                    });
                $('#' + o.ids.unmuteButton)
                    .mouseup(function (e) {
                        if (e.which == 1) { muteclick(); }
                    })
                    .keyup(function (e) {
                        var code = e.keyCode || e.which
                        if (code == 13 || code == 32) {
                            unmuteclick();
                        }
                    });
            }
            $('#' + 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.onVolumeChanged(ui.value);
				        autoHideVolume();
				    },
				    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);
                clearVolumeTimer();
            }

            function muteclick() {
                self.options.onMuteClicked();
            }

            function unmuteclick() {
                self.options.onMuteClicked();
            }

            var hideVolumeTimer;
            function autoHideVolume() {
                clearVolumeTimer();
                hideVolumeTimer = setTimeout(hideVolume, 3000);
            }

            function clearVolumeTimer() {
                if (hideVolumeTimer) {
                    clearTimeout(hideVolumeTimer);
                }
            }
        },

        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;

            var volumeToSet = arguments[0] != undefined ? arguments[0] : o.previousVolume;

            if (o.muted) {
                $('#' + o.ids.unmuteButtonWrapper).hide();
                $('#' + o.ids.muteButtonWrapper).show();
                o.muted = false;
            }

            $('#' + o.ids.volumeSlider).slider('option', 'value', volumeToSet);
        },

        isVisible: function () {
            var o = this.options;
            return $('#' + o.ids.volumeDiv).is(':visible');
        },

        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);
