$(function() {

    $("div#ex44").append('<img src="http://chernev.ru/MousewheelInputs/images/mousewheelupdown.png" alt="Scroll up or down with mousewheel" />');
	$("div#ex44").css("border","3px solid #ddd");
	$("div#ex44").css("padding","8px");
	$("div#ex44 img").css("border","none");
	$("div#ex44 input").css("vertical-align","middle");
	$("div#ex44 img").css("vertical-align","middle");
});





// WITH Plugin
$(function() {
    $("#how-many-2").bind("mousewheel", function(event, delta) {
        if (delta > 0) {
            this.value = parseInt(this.value) + 1;
        } else {
            if (parseInt(this.value) > 0) {
                this.value = parseInt(this.value) - 1;
            }
        }
        return false;
     });
     
     $("#whale").bind("mousewheel", function(event, delta) {
        if (this.value == "Синий") {
            this.value = "Красный";
        }
        else if (this.value == "Красный") {
            this.value = "Голубой";
        }
        else if (this.value == "Голубой") {
            this.value = "Выбирай";
        }
        else if (this.value == "Выбирай") {
            this.value = "Любой!";
        }
		else if (this.value == "Любой!") {
            this.value = "Синий";
        }
        return false;
     });
});




// WITHOUT Plugin
var EventUtil = {

    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
	
	removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
	
	getEvent: function(event) {
        return event ? event : window.event;
    },
	
	getTarget: function(event) {
		return event.target || event.srcElement;    
	},
	
	getWheelDelta: function(event) {
        if (event.wheelDelta){
            return event.wheelDelta;
        } else {
            return -event.detail * 40;
        }
    },
	
	preventDefault: function(event) {
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
    
};

function onWheel(event) {

	event = EventUtil.getEvent(event);
	var curElem = EventUtil.getTarget(event);
	var curVal = parseInt(curElem.value);
	var delta = EventUtil.getWheelDelta(event);
	
	if (delta > 0) {
		curElem.value = curVal + 1;
	} else{ 
		curElem.value = curVal - 1;
	}
	
	EventUtil.preventDefault(event);
	
}

$(function() {

	$(".wheelable").hover(function(){
		EventUtil.addHandler(document,'mousewheel',onWheel);
		EventUtil.addHandler(document,'DOMMouseScroll',onWheel);
	},
	function(){
		EventUtil.removeHandler(document,'mousewheel',onWheel);
		EventUtil.removeHandler(document,'DOMMouseScroll',onWheel);
	});
	
});