// ==UserScript==
// @name           TPP Touchscreen
// @version        1.0
// @namespace
// @author         lostcoaster
// @description    Adds a clickable area over the touchscreen part of the stream for easy input. http://redd.it/247cvf
// @include        /^https?://(www|beta)\.twitch\.tv\/twitchplayspokemon(/(chat.*)?)?$/
// @run-at         document-end
// ==/UserScript==

$('#player').append('<div class="touch_overlay" style="border:red solid;"></div>');
var touch_pad={
    factor : 1,
    // reflect mouse event to coordinate output.
    coords : function(event){
        return Math.floor((event.pageX-$(event.target).offset().left)/this.factor)
                +','+
                Math.floor((event.pageY-$(event.target).offset().top)/this.factor);
    },
    // adjust position of the box, parameters are relative position of top-left corner of the box within stream screen
    // 0 <= rx,ry <= 1
    position : function(rx, ry){
        // base on the facts :
        // 1. image always fills vertically, but not horizontally ;
        // 2. the bar is 30px tall (constant), or 31px, whatever;
        // 3. source is 16:9;
        // 4. the REAL touch screen has a 256*192 resolution;
        var base = $('#player');
        var base_offset = base.offset();
        var real_height = base.height()-30.5;
        this.factor = real_height/440;  // rough estimation
        var real_width = real_height/9*16;
        var left_margin = (base.width()-real_width)/2;
        $('.touch_overlay').offset({
            top: base_offset.top + ry*real_height,
            left: base_offset.left + left_margin + rx*real_width
        }).height(192*this.factor).width(256*this.factor);
    },
    aim: function(){
        this.position(0.36,0.548); // rough estimation No.2
    }

};
$('.touch_overlay').mouseup(function(event){
    $('textarea').val(touch_pad.coords(event));
});
// add the reaiming into settings menu. idea stolen from the chat-filter : http://redd.it/1y8ukl
$('.chat-settings').append('<div class="chat-menu-content"><button onclick="touch_pad.aim()">Reposition Touchpad</button></div>');
touch_pad.aim();