// all usability specials for content and control

console.log('> usability.js is iniciated;');

usability();

function usability() {
   // prevent from dragging images by mouse click
   $('img').bind('dragstart', function(event) { event.preventDefault() });
   
   // make images unselectable
   /*$('img').css({
	  "-moz-user-select": "-moz-none",
	  "-khtml-user-select": "none",
	  "-webkit-user-select": "none",
	  "-ms-user-select": "none",
	  "user-select": "none"
   });*/
}


// drag TO touch handler, adopt drag usability to touch
// need to cal init() to iniciate
//init();

function initDrag(dragObjectId) {
    var hideArea = document.getElementById(dragObjectId);
    hideArea.addEventListener("touchstart", touchHandler, true);
    hideArea.addEventListener("touchmove", touchHandler, true);
    hideArea.addEventListener("touchend", touchHandler, true);
    hideArea.addEventListener("touchcancel", touchHandler, true);
}

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}