$(document).ready(function() {
window.onload = function() {

    $(document).on('keydown', function(e) {
        switch(e.which){ //w
            case 81: //q
                var blurIntop = {'type': 'blur', 'start_pos': '0', 'end_pos': '20'};
                window._vtAPI.sendIntopToClient(blurIntop);
                break;
            case 69: //e
                var intop = {"type": "purchase",
                            "theme": "pizzahut",
                            "text": "Does this scene make you hungry?",
                            "logo": "assets/pizzahut.svg",
                            "image_url": "http://i.imgur.com/Iq81zPM.gif",
                            "text_expanded1":  "Pepperoni Lover's",
                            "text_expanded2": "Order now for $14.99",
                    "tabs": [{
                            "name": "Pizza",
                            "items": [{"description": "SUPREME",
                                        "price": "$14.99",
                                        "item_url": "http://imgur.com/W43VcYQ.png"}
                                    ,{"description": "BBQ LOVERS",
                                        "price": "$14.99",
                                    "item_url": "https://www.pizzahut.com/assets/w/tile/thor/BBQ_Lovers_PIzza.png"}
                                    ,{"description": "MEAT LOVER'S",
                                        "price": "$14.99",
                                        "item_url": "https://www.pizzahut.com/assets/w/tile/thor/Classic_Meat_Lovers_Pizza.png"}
                                    ,{"description": "VEGGIE LOVER'S",
                                        "price": "$14.99",
                                        "item_url": "https://www.pizzahut.com/assets/w/tile/thor/Classic_Veggie_Lovers_Pizza.png"}
                                    ,{"description": "PEPPERONI LOVER'S",
                                        "price": "$14.99",
                                        "item_url": "https://www.pizzahut.com/assets/w/tile/thor/Pepperoni_Lovers_Pizza.png"}
                                    ]
                            }
                            ,{

                            "name": "Pasta",
                            "items": [{"description": "MEATY MARINARA FAMILY",
                                        "price": "$13.00",
                                        "item_url": "http://imgur.com/4BVSGPY.png"}
                                    ,{"description": "MEATY MARINARA",
                                        "price": "$8.00",
                                        "item_url": "https://www.pizzahut.com/assets/w/tile/thor/pasta-meaty-marinara.png"}
                                    ,{"description": "CHICKEN ALFREDO",
                                        "price": "$8.00",
                                        "item_url": "https://www.pizzahut.com/assets/w/tile/thor/pasta-chicken-alfredo.png"}
                                    ,{"description": "CHICKEN ALFREDO FAMILY",
                                        "price": "$13.00",
                                        "item_url": "https://www.pizzahut.com/assets/w/tile/thor/pasta-chicken-alfredo-family.png"}

                                    ]
                            }
                        , {
                            "name": "Wings",
                            "items": [{"description": "TRADITIONAL BONE-IN 16PC.",
                                        "price": "$13.00",
                                        "item_url": "http://imgur.com/KNhzMxy.png"}
                                    ,{"description": "BREADED BONE-IN 8PC.",
                                        "price": "$7.00",
                                        "item_url": "https://www.pizzahut.com/assets/w/tile/thor/wings-breaded-bone-in.png"}
                                    ,{"description": "BREADED BONE-OUT 8PC.",
                                        "price": "$7.00",
                                        "item_url": "https://www.pizzahut.com/assets/w/tile/thor/wings-breaded-bone-out.png"}
                                    ,{"description": "DIP",
                                        "price": "$0.50",
                                        "item_url": "https://www.pizzahut.com/assets/w/tile/thor/sauce-bluecheese.png"}

                            ]
                        }
                    ]
                };
                window._vtAPI.sendIntopToClient(intop);
                break;
            case 84: //t
                //voting - got
                var intop = {
                    "type": "voting",
                    "text": "Who will win the tournament?",
                    "image_url": "assets/gotlogo.png",
                    "theme": "got",
                    "choices": [
                    {
                        "choice": "A",
                        "description": "Loras Tyrell",
                        "image_url": "assets/loras.png"
                    },
                    {
                        "choice": "B",
                        "description": "The Mountain",
                        "image_url": "assets/mountain.png"
                    }]
                };
                window._vtAPI.sendIntopToClient(intop);
                break;
            case 68: //d
                //voting - the voice
                var intop = {
                    "type": "voting",
                    "text": "Who should win the final?",
                    "image_url": "assets/voicelogo.png",
                    "theme": "voice",
                 "choices": [
                 {
                        "choice": "A",
                     "description": "Craig",
                        "image_url": "assets/craig.png"
                 },
                 {
                        "choice": "B",
                        "description": "Chris",
                        "image_url": "assets/chris.png"
                    },
                    {
                        "choice": "C",
                        "description": "Damien",
                        "image_url": "assets/damien.png"
                    },
                    {
                        "choice": "D",
                        "description": "Matt",
                        "image_url": "assets/matt.png"
                    }
                 ]
                };
                window._vtAPI.sendIntopToClient(intop);
                break;
            case 70: //f
                var intop = {
                    "type": "general",
                    "theme": "cactus",
                    "poster_url": "http://mudec.weebly.com/uploads/2/2/7/9/22794876/8661255_orig.jpg",
                    "external_url": "http://www.cactus.lu/en/cactus-card/cactus-loyalty-card",
                    "pos": "0",
                    "text": "on your next purchase",
                    "header": "Get double points"
                };
                window._vtAPI.sendIntopToClient(intop);
                break;
            case 9:
                e.preventDefault(); // prevent tab showing all intops
            default: return;

        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });

    var videoElement = document.getElementById('v');
    lastContentTS = 0;
    startLocation = 0;

    videoElement.addEventListener('play', function(){
        window._vtInterface.allowIntops();
        window._vtInterface.startTimeouts();
        queryhtml5vid(videoElement);
    },false);

    var imageElement = document.getElementById('i');
    imageElement.addEventListener("load", function() {
        window._vtInterface.allowIntops();
        window._vtInterface.stopTimeouts();
        queryhtml5img(imageElement);
    });

    imageElement.addEventListener("error", function() { window._vtInterface.haltWithError("Image could not be loaded", "This image could not be loaded. Ensure image is valid, try changing its format or try another image.") })

    var source = document.createElement('source');
    videoElement.appendChild(source);
    videoElement.autoplay = true;

    videoElement.addEventListener("loadeddata", function(e) {
        videoElement.setAttribute("controls","controls")
        videoElement.classList.remove("hidecontrols")
    })

    source.addEventListener("error", function(e) {
        if(e.target.src == "" || e.target.src == window.location.href) {
            // this happens on startup and on setting src to ""
            // also tried setting src to "#" but then it fails on FF
            return;
        }
        window._vtInterface.haltWithError("Media could not be loaded", "This media could not be loaded. Ensure media is valid and has correct extension, otherwise try changing its format or try another media.") 
    } )

    window._vtAPI.on("intopReady", function(intop){
        //ijson.setIntop(intop);
        window._vtInterface.set(intop);
    })

    var obj = $("#v");
    $('html').on('dragenter', function(e) {
        e.stopPropagation();
        e.preventDefault();
    });
    $('html').on('dragover', function(e) {
        e.stopPropagation();
        e.preventDefault();
    });
    $(obj).on('click', function(e){
        e.stopPropagation();
        e.preventDefault();
        $('#f').click();
    })
    function prepare(e) {
        e.stopPropagation();
        e.preventDefault();
        window._vtLogicController.markContentChanged(); // no new events for old content please
        window._vtInterface.removeOverlay();
        window._vtInterface.intopAlert("Identifying..");
        videoElement.pause();
        startLocation = 0;
        lastContentTS = Date.now(); // this ts is used as content identifier in the backend so that it doesnt send intops for different video
        videoElement.removeAttribute("controls"); // will add later if video is playable
        videoElement.classList.add("hidecontrols")
    }
    $("#f").on('change', function(e){
        prepare(e);
        loadFile(e.originalEvent.target.files[0])
    })
    function loadFile(f) {
        hideGrayAreas(); 
        var url = URL.createObjectURL(f);
        if(f.type.substring(0,5) == "image") {
            videoElement.setAttribute("poster", url);
            source.setAttribute("src", "");
            imageElement.setAttribute("src", url);
        } else {
            source.setAttribute("src", url);
            videoElement.setAttribute("poster", "");
        }
        videoElement.load();
    }
    $('html').on('drop', function(e) {
        prepare(e);
        var type = e.originalEvent.dataTransfer.types[0]
        if ((type == "text/plain") || (type == "text/uri-list") || (type == "text/x-moz-url")) {
            fetchURL(type, e);
            return;
        }
        loadFile(e.originalEvent.dataTransfer.files[0])
    });

    function hideGrayAreas() {
        document.getElementById('bot_bg').className = 'black';
        document.body.className = 'black';
        videoElement.style.background = 'black';
    }

    function fetchURL(type, e) {
        var url;
        if (type == "text/plain") {
            url = e.originalEvent.dataTransfer.getData('Text');
            // determine from url
        } else if ((type == "text/uri-list") || (type == "text/x-moz-url")) {
            // extract from html
            var imageUrl = e.originalEvent.dataTransfer.getData('text/html')
            if($(imageUrl).length > 0 ) {
                var img = $(imageUrl).filter('img');
                if (img.length == 0 && $(imageUrl).children().length > 0 ) {
                    img = $(imageUrl).find('img');
                }
                url = img.attr('src');
            } else {        
                url = $(imageUrl).attr('src');
            }
        }
        var isImage = (url.match(/\.(jpeg|jpg|gif|png)$/i) !== null) 
        // now, check whether cross origin requests are supported on this resource
        // load image accordingly to result
        // its doesnt seem possible to check cross origin without loading an image
        // HEAD request results in: Refused to get unsafe header "Access-Control-Allow-Origin"
        // to allow head check, image also needs "Access-Control-Expose-Headers" which is rare
        loadWithMimeDetection(url, isImage);
    }
    
    function loadURL(url, isImage) {
        if(!isImage) {
            window._vtInterface.haltWithError("URL could not be loaded", "This image url could not be loaded. Ensure image url is valid. Try saving test image on your local filesystem and dragging file into this window.");
            return;
        }
        hideGrayAreas(); 
        videoElement.setAttribute("poster", url);
        source.setAttribute("src", "");
        imageElement.crossOrigin = "Anonymous";
        imageElement.setAttribute("src", url);
    }

    function loadWithMimeDetection(url, isImage) {
        var xhr = new XMLHttpRequest();
        xhr.open("HEAD", url, true);
        xhr.onreadystatechange = function() {
            if (this.readyState == this.DONE) {
                var mime = xhr.getResponseHeader("Content-Type");
                if(typeof mime === 'String' || mime instanceof String){
                    isImage = (mime.substring(0,5) == "image");
                }
                loadURL(url, isImage);
                return;
            }
        }; 
        xhr.send();
        xhr.onerror = function() { loadNonCors(url, isImage) }
    }

    function loadNonCors(url, isImage) {
        loadURL("/cors/?image_url="+encodeURIComponent(url), isImage);
    }

    $(document).on('dragenter', function(e) {
        e.stopPropagation();
        e.preventDefault();
    });
    $(document).on('dragover', function(e) {
        e.stopPropagation();
        e.preventDefault();
    });

}});

function queryhtml5vid(videoElement) {
    if(videoElement.paused || videoElement.ended) return false;
    //if(videoElement.ended) return false;
    var data = paintOnCanvas(videoElement, videoElement.videoWidth, videoElement.videoHeight, 512, function(){setTimeout(queryhtml5vid, 250, videoElement)})
    if(data == null){
        return;
    }
    window._vtAPI.identify(data.imgd, "video", lastContentTS, data.w, data.h, startLocation, startLocation + 250);
	startLocation += 250;
    setTimeout(queryhtml5vid,250,videoElement);
}

//TODO: create uint8array view for the canvas data buffer,
//      much faster assigning than clampedarray.
function paintOnCanvas(element, width, height, scaleBy, onerror) {
    //1. Create a paintable canvas.
    var canvas = document.createElement('canvas');
    ctx = canvas.getContext("2d");

    //2. Adjust width/height

    var w = width;
    var h = height;

    if(width < 64 || height < 48){
        if(onerror) {
            onerror();
        }
        return null;
    }

    if( w > scaleBy || h > scaleBy ) {
        if( width > height ) {
            w = scaleBy;
            h = Math.round((scaleBy*height)/width);
        } else {
            h = scaleBy;
            w = Math.round((scaleBy*width)/height);
        }
    }

    //3. Paint the element on the canvas.
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(element, 0, 0, w, h);
    return {imgd: ctx.getImageData(0, 0, w, h).data, w: w, h: h};
}

function queryhtml5img(imgElement) {
    var data = paintOnCanvas(imgElement, imgElement.width, imgElement.height, 512)
    if(data == null){
        return;
    }
    window._vtAPI.identify(data.imgd, "image", lastContentTS, data.w, data.h, startLocation,startLocation+250);
	startLocation +=250;
}