var canvas, context, timer;

var constraints = window.constraints = {
    audio: false,
    video: { facingMode: "environment" } // change to "user" for front camera (see https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/facingMode )
};

//  (HTML5 based camera only) this portion of code will be used when browser supports navigator.getUserMedia  *********     */
window.addEventListener("DOMContentLoaded", function () {
    canvas = document.getElementById("canvasU"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function (error) {
            console.log("Video capture error: ", error.code);
        };

    // check if we can use HTML5 based camera (through mediaDevices.getUserMedia() function)
    if (navigator.mediaDevices.getUserMedia) { // Standard browser
        // display HTML5 camera
        document.getElementById("userMedia").style.display = '';
        // adding click event to take photo from webcam
        document.getElementById("snap").addEventListener("click", function () {
            context.drawImage(video, 0, 0, 640, 480);
        });

        navigator.mediaDevices
            .getUserMedia(constraints)
            .then(handleSuccess)
            .catch(handleError);
    }
    // check if we can use HTML5 based camera (through .getUserMedia() function in Webkit based browser)
    else if (navigator.webkitGetUserMedia) { // WebKit-prefixed for Google Chrome
        // display HTML5 camera
        document.getElementById("userMedia").style.display = '';
        // adding click event to take photo from webcam
        document.getElementById("snap").addEventListener("click", function () {
            context.drawImage(video, 0, 0, 640, 480);
        });
        navigator.webkitGetUserMedia(videoObj, function (stream) {
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
    // check if we can use HTML5 based camera (through .getUserMedia() function in Firefox based browser)
    else if (navigator.mozGetUserMedia) { // moz-prefixed for Firefox 
        // display HTML5 camera
        document.getElementById("userMedia").style.display = '';
        // adding click event to take photo from webcam
        document.getElementById("snap").addEventListener("click", function () {
            context.drawImage(video, 0, 0, 640, 480);
        });
        navigator.mozGetUserMedia(videoObj, function (stream) {
            video.mozSrcObject = stream;
            video.play();
        }, errBack);
    }

}, false);

function handleSuccess(stream) {
    var video = document.querySelector('video');
    var videoTracks = stream.getVideoTracks();
    console.log('Got stream with constraints:', constraints);
    console.log(`Using video device: ${videoTracks[0].label}`);
    window.stream = stream; // make variable available to browser console
    video.srcObject = stream;
}

function handleError(error) {
    if (error.name === 'ConstraintNotSatisfiedError') {
        var v = constraints.video;
        errorMsg(`The resolution ${v.width.exact}x${v.height.exact} px is not supported by your device.`);
    } else if (error.name === 'PermissionDeniedError') {
        errorMsg('Permissions have not been granted to use your camera and ' +
            'microphone, you need to allow the page access to your devices in ' +
            'order for the demo to work.');
    }
    errorMsg(`getUserMedia error: ${error.name}`, error);
}

function errorMsg(msg, error) {
    var errorElement = document.querySelector('#errorMsg');
    errorElement.innerHTML += `<p>${msg}</p>`;
    if (typeof error !== 'undefined') {
        console.error(error);
    }
}


// (HTML5 based camera only)
// uploads the image to the server 
function UploadToCloud() {

    if($.trim($("#txtPDFcoAPIKey").val()) === ""){
        alert("PDF.co API Key can not be empty!");
        return;
    }

    if($.trim($("#txtAreaBarcodeTypes").val()) === ""){
        alert("PDF.co Barcode Types can not be empty!");
        return;
    }

    $('#report').html("scanning the current frame......");
    context.drawImage(video, 0, 0, 640, 480);
    var img = canvas.toDataURL('image/jpeg', 0.9);//.split(',')[1];

    readBarcodeFromPDF(img);

    timer = setTimeout(UploadToCloud, 3000);  // will capture new image to detect barcode after 3000 mili second
}

// (flash based camera only) stop the capturing 
function stopCall() {
    $('#report').html("STOPPED Scanning.");
    clearTimeout(timer);
}

function readBarcodeFromPDF(img) {

    const PDFcoAPIKey = $("#txtPDFcoAPIKey").val();
    const barcodeTypes = $("#txtAreaBarcodeTypes").val();

    var form = new FormData();
    form.append("file", img);
    form.append("name", `Frame_${new Date().getTime()}.jpg`);

    var settings_base64Upload = {
        "url": "https://api.pdf.co/v1/file/upload/base64",
        "method": "POST",
        "timeout": 0,
        "headers": {
            "x-api-key": PDFcoAPIKey
        },
        "processData": false,
        "mimeType": "multipart/form-data",
        "contentType": false,
        "data": form
    };

    // Upload Base64 to PDF.co Cloud 
    $.ajax(settings_base64Upload).done(function (resp_upload) {

        var json_resp_upload = JSON.parse(resp_upload);

        var oData_barcodeRead = {
            "url": json_resp_upload.url,
            "types": barcodeTypes,
            "encrypt": false,
            "async": false
        };

        //console.log(oData_barcodeRead);

        var settings_barcode_read = {
            "url": "https://api.pdf.co/v1/barcode/read/from/url",
            "method": "POST",
            "timeout": 0,
            "headers": {
                "x-api-key": PDFcoAPIKey,
                "Content-Type": "application/json"
            },
            "data": JSON.stringify(oData_barcodeRead),
        };

        $.ajax(settings_barcode_read).done(function (response_barcode) {

            if(response_barcode.barcodes && response_barcode.barcodes.length > 0){

                for (let i = 0; i < response_barcode.barcodes.length; i++) {
                    const elmBarcode = response_barcode.barcodes[i];

                    let htmlSelect = document.getElementById('OutListBoxHTML5');
                    htmlSelect.value = elmBarcode.Value + "\r\n" + htmlSelect.value;
                }

            }
        });
    });

}

// WebcamJS v1.0.25
// Webcam library for capturing JPEG/PNG images in JavaScript
// Attempts getUserMedia, falls back to Flash
// Author: Joseph Huckaby: http://github.com/jhuckaby
// Based on JPEGCam: http://code.google.com/p/jpegcam/
// Copyright (c) 2012 - 2017 Joseph Huckaby
// Licensed under the MIT License

(function(window) {
var _userMedia;

// declare error types

// inheritance pattern here:
// https://stackoverflow.com/questions/783818/how-do-i-create-a-custom-error-in-javascript
function FlashError() {
    var temp = Error.apply(this, arguments);
    temp.name = this.name = "FlashError";
    this.stack = temp.stack;
    this.message = temp.message;
}

function WebcamError() {
    var temp = Error.apply(this, arguments);
    temp.name = this.name = "WebcamError";
    this.stack = temp.stack;
    this.message = temp.message;
}

var IntermediateInheritor = function() {};
IntermediateInheritor.prototype = Error.prototype;

FlashError.prototype = new IntermediateInheritor();
WebcamError.prototype = new IntermediateInheritor();

var Webcam = {
    version: '1.0.25',

    // globals
    protocol: location.protocol.match(/https/i) ? 'https' : 'http',
    loaded: false,   // true when webcam movie finishes loading
    live: false,     // true when webcam is initialized and ready to snap
    userMedia: true, // true when getUserMedia is supported natively

    iOS: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream,

    params: {
        width: 0,
        height: 0,
        dest_width: 0,         // size of captured image
        dest_height: 0,        // these default to width/height
        image_format: 'jpeg',  // image format (may be jpeg or png)
        jpeg_quality: 90,      // jpeg image quality from 0 (worst) to 100 (best)
        enable_flash: true,    // enable flash fallback,
        force_flash: false,    // force flash mode,
        flip_horiz: false,     // flip image horiz (mirror mode)
        fps: 30,               // camera frames per second
        upload_name: 'webcam', // name of file in upload post data
        constraints: null,     // custom user media constraints,
        swfURL: '',            // URI to webcam.swf movie (defaults to the js location)
        flashNotDetectedText: 'ERROR: No Adobe Flash Player detected.  Webcam.js relies on Flash for browsers that do not support getUserMedia (like yours).',
        noInterfaceFoundText: 'No supported webcam interface found.',
        unfreeze_snap: true,    // Whether to unfreeze the camera after snap (defaults to true)
        iosPlaceholderText: 'Click here to open camera.',
        user_callback: null,    // callback function for snapshot (used if no user_callback parameter given to snap function)
        user_canvas: null       // user provided canvas for snapshot (used if no user_canvas parameter given to snap function)
    },

    errors: {
        FlashError: FlashError,
        WebcamError: WebcamError
    },

    hooks: {}, // callback hook functions

    init: function() {
        // initialize, check for getUserMedia support
        var self = this;

        // Setup getUserMedia, with polyfill for older browsers
        // Adapted from: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
        this.mediaDevices = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ? 
            navigator.mediaDevices : ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
                getUserMedia: function(c) {
                    return new Promise(function(y, n) {
                        (navigator.mozGetUserMedia ||
                        navigator.webkitGetUserMedia).call(navigator, c, y, n);
                    });
                }
        } : null);

        window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
        this.userMedia = this.userMedia && !!this.mediaDevices && !!window.URL;

        if (this.iOS) {
            this.userMedia = null;
        }

        // Older versions of firefox (< 21) apparently claim support but user media does not actually work
        if (navigator.userAgent.match(/Firefox\D+(\d+)/)) {
            if (parseInt(RegExp.$1, 10) < 21) this.userMedia = null;
        }

        // Make sure media stream is closed when navigating away from page
        if (this.userMedia) {
            window.addEventListener( 'beforeunload', function(event) {
                self.reset();
            } );
        }
    },

    exifOrientation: function(binFile) {
        // extract orientation information from the image provided by iOS
        // algorithm based on exif-js
        var dataView = new DataView(binFile);
        if ((dataView.getUint8(0) != 0xFF) || (dataView.getUint8(1) != 0xD8)) {
            console.log('Not a valid JPEG file');
            return 0;
        }
        var offset = 2;
        var marker = null;
        while (offset < binFile.byteLength) {
            // find 0xFFE1 (225 marker)
            if (dataView.getUint8(offset) != 0xFF) {
                console.log('Not a valid marker at offset ' + offset + ', found: ' + dataView.getUint8(offset));
                return 0;
            }
            marker = dataView.getUint8(offset + 1);
            if (marker == 225) {
                offset += 4;
                var str = "";
                for (n = 0; n < 4; n++) {
                    str += String.fromCharCode(dataView.getUint8(offset+n));
                }
                if (str != 'Exif') {
                    console.log('Not valid EXIF data found');
                    return 0;
                }

                offset += 6; // tiffOffset
                var bigEnd = null;

                // test for TIFF validity and endianness
                if (dataView.getUint16(offset) == 0x4949) {
                    bigEnd = false;
                } else if (dataView.getUint16(offset) == 0x4D4D) {
                    bigEnd = true;
                } else {
                    console.log("Not valid TIFF data! (no 0x4949 or 0x4D4D)");
                    return 0;
                }

                if (dataView.getUint16(offset+2, !bigEnd) != 0x002A) {
                    console.log("Not valid TIFF data! (no 0x002A)");
                    return 0;
                }

                var firstIFDOffset = dataView.getUint32(offset+4, !bigEnd);
                if (firstIFDOffset < 0x00000008) {
                    console.log("Not valid TIFF data! (First offset less than 8)", dataView.getUint32(offset+4, !bigEnd));
                    return 0;
                }

                // extract orientation data
                var dataStart = offset + firstIFDOffset;
                var entries = dataView.getUint16(dataStart, !bigEnd);
                for (var i=0; i<entries; i++) {
                    var entryOffset = dataStart + i*12 + 2;
                    if (dataView.getUint16(entryOffset, !bigEnd) == 0x0112) {
                        var valueType = dataView.getUint16(entryOffset+2, !bigEnd);
                        var numValues = dataView.getUint32(entryOffset+4, !bigEnd);
                        if (valueType != 3 && numValues != 1) {
                            console.log('Invalid EXIF orientation value type ('+valueType+') or count ('+numValues+')');
                            return 0;
                        }
                        var value = dataView.getUint16(entryOffset + 8, !bigEnd);
                        if (value < 1 || value > 8) {
                            console.log('Invalid EXIF orientation value ('+value+')');
                            return 0;
                        }
                        return value;
                    }
                }
            } else {
                offset += 2+dataView.getUint16(offset+2);
            }
        }
        return 0;
    },

    fixOrientation: function(origObjURL, orientation, targetImg) {
        // fix image orientation based on exif orientation data
        // exif orientation information
        //    http://www.impulseadventure.com/photo/exif-orientation.html
        //    link source wikipedia (https://en.wikipedia.org/wiki/Exif#cite_note-20)
        var img = new Image();
        img.addEventListener('load', function(event) {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');

            // switch width height if orientation needed
            if (orientation < 5) {
                canvas.width = img.width;
                canvas.height = img.height;
            } else {
                canvas.width = img.height;
                canvas.height = img.width;
            }

            // transform (rotate) image - see link at beginning this method
            switch (orientation) {
                case 2: ctx.transform(-1, 0, 0, 1, img.width, 0); break;
                case 3: ctx.transform(-1, 0, 0, -1, img.width, img.height); break;
                case 4: ctx.transform(1, 0, 0, -1, 0, img.height); break;
                case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
                case 6: ctx.transform(0, 1, -1, 0, img.height , 0); break;
                case 7: ctx.transform(0, -1, -1, 0, img.height, img.width); break;
                case 8: ctx.transform(0, -1, 1, 0, 0, img.width); break;
            }

            ctx.drawImage(img, 0, 0);
            // pass rotated image data to the target image container
            targetImg.src = canvas.toDataURL();
        }, false);
        // start transformation by load event
        img.src = origObjURL;
    },

    attach: function(elem) {
        // create webcam preview and attach to DOM element
        // pass in actual DOM reference, ID, or CSS selector
        if (typeof(elem) == 'string') {
            elem = document.getElementById(elem) || document.querySelector(elem);
        }
        if (!elem) {
            return this.dispatch('error', new WebcamError("Could not locate DOM element to attach to."));
        }
        this.container = elem;
        elem.innerHTML = ''; // start with empty element

        // insert "peg" so we can insert our preview canvas adjacent to it later on
        var peg = document.createElement('div');
        elem.appendChild( peg );
        this.peg = peg;

        // set width/height if not already set
        if (!this.params.width) this.params.width = elem.offsetWidth;
        if (!this.params.height) this.params.height = elem.offsetHeight;

        // make sure we have a nonzero width and height at this point
        if (!this.params.width || !this.params.height) {
            return this.dispatch('error', new WebcamError("No width and/or height for webcam.  Please call set() first, or attach to a visible element."));
        }

        // set defaults for dest_width / dest_height if not set
        if (!this.params.dest_width) this.params.dest_width = this.params.width;
        if (!this.params.dest_height) this.params.dest_height = this.params.height;

        this.userMedia = _userMedia === undefined ? this.userMedia : _userMedia;
        // if force_flash is set, disable userMedia
        if (this.params.force_flash) {
            _userMedia = this.userMedia;
            this.userMedia = null;
        }

        // check for default fps
        if (typeof this.params.fps !== "number") this.params.fps = 30;

        // adjust scale if dest_width or dest_height is different
        var scaleX = this.params.width / this.params.dest_width;
        var scaleY = this.params.height / this.params.dest_height;

        if (this.userMedia) {
            // setup webcam video container
            var video = document.createElement('video');
            video.setAttribute('autoplay', 'autoplay');
            video.style.width = '' + this.params.dest_width + 'px';
            video.style.height = '' + this.params.dest_height + 'px';

            if ((scaleX != 1.0) || (scaleY != 1.0)) {
                elem.style.overflow = 'hidden';
                video.style.webkitTransformOrigin = '0px 0px';
                video.style.mozTransformOrigin = '0px 0px';
                video.style.msTransformOrigin = '0px 0px';
                video.style.oTransformOrigin = '0px 0px';
                video.style.transformOrigin = '0px 0px';
                video.style.webkitTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
                video.style.mozTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
                video.style.msTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
                video.style.oTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
                video.style.transform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
            }

            // add video element to dom
            elem.appendChild( video );
            this.video = video;

            // ask user for access to their camera
            var self = this;
            this.mediaDevices.getUserMedia({
                "audio": false,
                "video": this.params.constraints || {
                    mandatory: {
                        minWidth: this.params.dest_width,
                        minHeight: this.params.dest_height
                    }
                }
            })
            .then( function(stream) {
                // got access, attach stream to video
                video.onloadedmetadata = function(e) {
                    self.stream = stream;
                    self.loaded = true;
                    self.live = true;
                    self.dispatch('load');
                    self.dispatch('live');
                    self.flip();
                };
                // as window.URL.createObjectURL() is deprecated, adding a check so that it works in Safari.
                // older browsers may not have srcObject
                if ("srcObject" in video) {
                      video.srcObject = stream;
                }
                else {
                      // using URL.createObjectURL() as fallback for old browsers
                      video.src = window.URL.createObjectURL(stream);
                }
            })
            .catch( function(err) {
                // JH 2016-07-31 Instead of dispatching error, now falling back to Flash if userMedia fails (thx @john2014)
                // JH 2016-08-07 But only if flash is actually installed -- if not, dispatch error here and now.
                if (self.params.enable_flash && self.detectFlash()) {
                    setTimeout( function() { self.params.force_flash = 1; self.attach(elem); }, 1 );
                }
                else {
                    self.dispatch('error', err);
                }
            });
        }
        else if (this.iOS) {
            // prepare HTML elements
            var div = document.createElement('div');
            div.id = this.container.id+'-ios_div';
            div.className = 'webcamjs-ios-placeholder';
            div.style.width = '' + this.params.width + 'px';
            div.style.height = '' + this.params.height + 'px';
            div.style.textAlign = 'center';
            div.style.display = 'table-cell';
            div.style.verticalAlign = 'middle';
            div.style.backgroundRepeat = 'no-repeat';
            div.style.backgroundSize = 'contain';
            div.style.backgroundPosition = 'center';
            var span = document.createElement('span');
            span.className = 'webcamjs-ios-text';
            span.innerHTML = this.params.iosPlaceholderText;
            div.appendChild(span);
            var img = document.createElement('img');
            img.id = this.container.id+'-ios_img';
            img.style.width = '' + this.params.dest_width + 'px';
            img.style.height = '' + this.params.dest_height + 'px';
            img.style.display = 'none';
            div.appendChild(img);
            var input = document.createElement('input');
            input.id = this.container.id+'-ios_input';
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');
            input.setAttribute('capture', 'camera');

            var self = this;
            var params = this.params;
            // add input listener to load the selected image
            input.addEventListener('change', function(event) {
                if (event.target.files.length > 0 && event.target.files[0].type.indexOf('image/') == 0) {
                    var objURL = URL.createObjectURL(event.target.files[0]);

                    // load image with auto scale and crop
                    var image = new Image();
                    image.addEventListener('load', function(event) {
                        var canvas = document.createElement('canvas');
                        canvas.width = params.dest_width;
                        canvas.height = params.dest_height;
                        var ctx = canvas.getContext('2d');

                        // crop and scale image for final size
                        ratio = Math.min(image.width / params.dest_width, image.height / params.dest_height);
                        var sw = params.dest_width * ratio;
                        var sh = params.dest_height * ratio;
                        var sx = (image.width - sw) / 2;
                        var sy = (image.height - sh) / 2;
                        ctx.drawImage(image, sx, sy, sw, sh, 0, 0, params.dest_width, params.dest_height);

                        var dataURL = canvas.toDataURL();
                        img.src = dataURL;
                        div.style.backgroundImage = "url('"+dataURL+"')";
                    }, false);

                    // read EXIF data
                    var fileReader = new FileReader();
                    fileReader.addEventListener('load', function(e) {
                        var orientation = self.exifOrientation(e.target.result);
                        if (orientation > 1) {
                            // image need to rotate (see comments on fixOrientation method for more information)
                            // transform image and load to image object
                            self.fixOrientation(objURL, orientation, image);
                        } else {
                            // load image data to image object
                            image.src = objURL;
                        }
                    }, false);

                    // Convert image data to blob format
                    var http = new XMLHttpRequest();
                    http.open("GET", objURL, true);
                    http.responseType = "blob";
                    http.onload = function(e) {
                        if (this.status == 200 || this.status === 0) {
                            fileReader.readAsArrayBuffer(this.response);
                        }
                    };
                    http.send();

                }
            }, false);
            input.style.display = 'none';
            elem.appendChild(input);
            // make div clickable for open camera interface
            div.addEventListener('click', function(event) {
                if (params.user_callback) {
                    // global user_callback defined - create the snapshot
                    self.snap(params.user_callback, params.user_canvas);
                } else {
                    // no global callback definied for snapshot, load image and wait for external snap method call
                    input.style.display = 'block';
                    input.focus();
                    input.click();
                    input.style.display = 'none';
                }
            }, false);
            elem.appendChild(div);
            this.loaded = true;
            this.live = true;
        }
        else if (this.params.enable_flash && this.detectFlash()) {
            // flash fallback
            window.Webcam = Webcam; // needed for flash-to-js interface
            var div = document.createElement('div');
            div.innerHTML = this.getSWFHTML();
            elem.appendChild( div );
        }
        else {
            this.dispatch('error', new WebcamError( this.params.noInterfaceFoundText ));
        }

        // setup final crop for live preview
        if (this.params.crop_width && this.params.crop_height) {
            var scaled_crop_width = Math.floor( this.params.crop_width * scaleX );
            var scaled_crop_height = Math.floor( this.params.crop_height * scaleY );

            elem.style.width = '' + scaled_crop_width + 'px';
            elem.style.height = '' + scaled_crop_height + 'px';
            elem.style.overflow = 'hidden';

            elem.scrollLeft = Math.floor( (this.params.width / 2) - (scaled_crop_width / 2) );
            elem.scrollTop = Math.floor( (this.params.height / 2) - (scaled_crop_height / 2) );
        }
        else {
            // no crop, set size to desired
            elem.style.width = '' + this.params.width + 'px';
            elem.style.height = '' + this.params.height + 'px';
        }
    },

    reset: function() {
        // shutdown camera, reset to potentially attach again
        if (this.preview_active) this.unfreeze();

        // attempt to fix issue #64
        this.unflip();

        if (this.userMedia) {
            if (this.stream) {
                if (this.stream.getVideoTracks) {
                    // get video track to call stop on it
                    var tracks = this.stream.getVideoTracks();
                    if (tracks && tracks[0] && tracks[0].stop) tracks[0].stop();
                }
                else if (this.stream.stop) {
                    // deprecated, may be removed in future
                    this.stream.stop();
                }
            }
            delete this.stream;
            delete this.video;
        }

        if ((this.userMedia !== true) && this.loaded && !this.iOS) {
            // call for turn off camera in flash
            var movie = this.getMovie();
            if (movie && movie._releaseCamera) movie._releaseCamera();
        }

        if (this.container) {
            this.container.innerHTML = '';
            delete this.container;
        }

        this.loaded = false;
        this.live = false;
    },

    set: function() {
        // set one or more params
        // variable argument list: 1 param = hash, 2 params = key, value
        if (arguments.length == 1) {
            for (var key in arguments[0]) {
                this.params[key] = arguments[0][key];
            }
        }
        else {
            this.params[ arguments[0] ] = arguments[1];
        }
    },

    on: function(name, callback) {
        // set callback hook
        name = name.replace(/^on/i, '').toLowerCase();
        if (!this.hooks[name]) this.hooks[name] = [];
        this.hooks[name].push( callback );
    },

    off: function(name, callback) {
        // remove callback hook
        name = name.replace(/^on/i, '').toLowerCase();
        if (this.hooks[name]) {
            if (callback) {
                // remove one selected callback from list
                var idx = this.hooks[name].indexOf(callback);
                if (idx > -1) this.hooks[name].splice(idx, 1);
            }
            else {
                // no callback specified, so clear all
                this.hooks[name] = [];
            }
        }
    },

    dispatch: function() {
        // fire hook callback, passing optional value to it
        var name = arguments[0].replace(/^on/i, '').toLowerCase();
        var args = Array.prototype.slice.call(arguments, 1);

        if (this.hooks[name] && this.hooks[name].length) {
            for (var idx = 0, len = this.hooks[name].length; idx < len; idx++) {
                var hook = this.hooks[name][idx];

                if (typeof(hook) == 'function') {
                    // callback is function reference, call directly
                    hook.apply(this, args);
                }
                else if ((typeof(hook) == 'object') && (hook.length == 2)) {
                    // callback is PHP-style object instance method
                    hook[0][hook[1]].apply(hook[0], args);
                }
                else if (window[hook]) {
                    // callback is global function name
                    window[ hook ].apply(window, args);
                }
            } // loop
            return true;
        }
        else if (name == 'error') {
            var message;
            if ((args[0] instanceof FlashError) || (args[0] instanceof WebcamError)) {
                message = args[0].message;
            } else {
                message = "Could not access webcam: " + args[0].name + ": " + 
                    args[0].message + " " + args[0].toString();
            }

            // default error handler if no custom one specified
            alert("Webcam.js Error: " + message);
        }

        return false; // no hook defined
    },

    setSWFLocation: function(value) {
        // for backward compatibility.
        this.set('swfURL', value);
    },

    detectFlash: function() {
        // return true if browser supports flash, false otherwise
        // Code snippet borrowed from: https://github.com/swfobject/swfobject
        var SHOCKWAVE_FLASH = "Shockwave Flash",
            SHOCKWAVE_FLASH_AX = "ShockwaveFlash.ShockwaveFlash",
            FLASH_MIME_TYPE = "application/x-shockwave-flash",
            win = window,
            nav = navigator,
            hasFlash = false;

        if (typeof nav.plugins !== "undefined" && typeof nav.plugins[SHOCKWAVE_FLASH] === "object") {
            var desc = nav.plugins[SHOCKWAVE_FLASH].description;
            if (desc && (typeof nav.mimeTypes !== "undefined" && nav.mimeTypes[FLASH_MIME_TYPE] && nav.mimeTypes[FLASH_MIME_TYPE].enabledPlugin)) {
                hasFlash = true;
            }
        }
        else if (typeof win.ActiveXObject !== "undefined") {
            try {
                var ax = new ActiveXObject(SHOCKWAVE_FLASH_AX);
                if (ax) {
                    var ver = ax.GetVariable("$version");
                    if (ver) hasFlash = true;
                }
            }
            catch (e) {;}
        }

        return hasFlash;
    },

    getSWFHTML: function() {
        // Return HTML for embedding flash based webcam capture movie        
        var html = '',
            swfURL = this.params.swfURL;

        // make sure we aren't running locally (flash doesn't work)
        if (location.protocol.match(/file/)) {
            this.dispatch('error', new FlashError("Flash does not work from local disk.  Please run from a web server."));
            return '<h3 style="color:red">ERROR: the Webcam.js Flash fallback does not work from local disk.  Please run it from a web server.</h3>';
        }

        // make sure we have flash
        if (!this.detectFlash()) {
            this.dispatch('error', new FlashError("Adobe Flash Player not found.  Please install from get.adobe.com/flashplayer and try again."));
            return '<h3 style="color:red">' + this.params.flashNotDetectedText + '</h3>';
        }

        // set default swfURL if not explicitly set
        if (!swfURL) {
            // find our script tag, and use that base URL
            var base_url = '';
            var scpts = document.getElementsByTagName('script');
            for (var idx = 0, len = scpts.length; idx < len; idx++) {
                var src = scpts[idx].getAttribute('src');
                if (src && src.match(/\/webcam(\.min)?\.js/)) {
                    base_url = src.replace(/\/webcam(\.min)?\.js.*$/, '');
                    idx = len;
                }
            }
            if (base_url) swfURL = base_url + '/webcam.swf';
            else swfURL = 'webcam.swf';
        }

        // if this is the user's first visit, set flashvar so flash privacy settings panel is shown first
        if (window.localStorage && !localStorage.getItem('visited')) {
            this.params.new_user = 1;
            localStorage.setItem('visited', 1);
        }

        // construct flashvars string
        var flashvars = '';
        for (var key in this.params) {
            if (flashvars) flashvars += '&';
            flashvars += key + '=' + escape(this.params[key]);
        }

        // construct object/embed tag
        html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" type="application/x-shockwave-flash" codebase="'+this.protocol+'://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+this.params.width+'" height="'+this.params.height+'" id="webcam_movie_obj" align="middle"><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+swfURL+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/><embed id="webcam_movie_embed" src="'+swfURL+'" wmode="opaque" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+this.params.width+'" height="'+this.params.height+'" name="webcam_movie_embed" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'"></embed></object>';

        return html;
    },

    getMovie: function() {
        // get reference to movie object/embed in DOM
        if (!this.loaded) return this.dispatch('error', new FlashError("Flash Movie is not loaded yet"));
        var movie = document.getElementById('webcam_movie_obj');
        if (!movie || !movie._snap) movie = document.getElementById('webcam_movie_embed');
        if (!movie) this.dispatch('error', new FlashError("Cannot locate Flash movie in DOM"));
        return movie;
    },

    freeze: function() {
        // show preview, freeze camera
        var self = this;
        var params = this.params;

        // kill preview if already active
        if (this.preview_active) this.unfreeze();

        // determine scale factor
        var scaleX = this.params.width / this.params.dest_width;
        var scaleY = this.params.height / this.params.dest_height;

        // must unflip container as preview canvas will be pre-flipped
        this.unflip();

        // calc final size of image
        var final_width = params.crop_width || params.dest_width;
        var final_height = params.crop_height || params.dest_height;

        // create canvas for holding preview
        var preview_canvas = document.createElement('canvas');
        preview_canvas.width = final_width;
        preview_canvas.height = final_height;
        var preview_context = preview_canvas.getContext('2d');

        // save for later use
        this.preview_canvas = preview_canvas;
        this.preview_context = preview_context;

        // scale for preview size
        if ((scaleX != 1.0) || (scaleY != 1.0)) {
            preview_canvas.style.webkitTransformOrigin = '0px 0px';
            preview_canvas.style.mozTransformOrigin = '0px 0px';
            preview_canvas.style.msTransformOrigin = '0px 0px';
            preview_canvas.style.oTransformOrigin = '0px 0px';
            preview_canvas.style.transformOrigin = '0px 0px';
            preview_canvas.style.webkitTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
            preview_canvas.style.mozTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
            preview_canvas.style.msTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
            preview_canvas.style.oTransform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
            preview_canvas.style.transform = 'scaleX('+scaleX+') scaleY('+scaleY+')';
        }

        // take snapshot, but fire our own callback
        this.snap( function() {
            // add preview image to dom, adjust for crop
            preview_canvas.style.position = 'relative';
            preview_canvas.style.left = '' + self.container.scrollLeft + 'px';
            preview_canvas.style.top = '' + self.container.scrollTop + 'px';

            self.container.insertBefore( preview_canvas, self.peg );
            self.container.style.overflow = 'hidden';

            // set flag for user capture (use preview)
            self.preview_active = true;

        }, preview_canvas );
    },

    unfreeze: function() {
        // cancel preview and resume live video feed
        if (this.preview_active) {
            // remove preview canvas
            this.container.removeChild( this.preview_canvas );
            delete this.preview_context;
            delete this.preview_canvas;

            // unflag
            this.preview_active = false;

            // re-flip if we unflipped before
            this.flip();
        }
    },

    flip: function() {
        // flip container horiz (mirror mode) if desired
        if (this.params.flip_horiz) {
            var sty = this.container.style;
            sty.webkitTransform = 'scaleX(-1)';
            sty.mozTransform = 'scaleX(-1)';
            sty.msTransform = 'scaleX(-1)';
            sty.oTransform = 'scaleX(-1)';
            sty.transform = 'scaleX(-1)';
            sty.filter = 'FlipH';
            sty.msFilter = 'FlipH';
        }
    },

    unflip: function() {
        // unflip container horiz (mirror mode) if desired
        if (this.params.flip_horiz) {
            var sty = this.container.style;
            sty.webkitTransform = 'scaleX(1)';
            sty.mozTransform = 'scaleX(1)';
            sty.msTransform = 'scaleX(1)';
            sty.oTransform = 'scaleX(1)';
            sty.transform = 'scaleX(1)';
            sty.filter = '';
            sty.msFilter = '';
        }
    },

    savePreview: function(user_callback, user_canvas) {
        // save preview freeze and fire user callback
        var params = this.params;
        var canvas = this.preview_canvas;
        var context = this.preview_context;

        // render to user canvas if desired
        if (user_canvas) {
            var user_context = user_canvas.getContext('2d');
            user_context.drawImage( canvas, 0, 0 );
        }

        // fire user callback if desired
        user_callback(
            user_canvas ? null : canvas.toDataURL('image/' + params.image_format, params.jpeg_quality / 100 ),
            canvas,
            context
        );

        // remove preview
        if (this.params.unfreeze_snap) this.unfreeze();
    },

    snap: function(user_callback, user_canvas) {
        // use global callback and canvas if not defined as parameter
        if (!user_callback) user_callback = this.params.user_callback;
        if (!user_canvas) user_canvas = this.params.user_canvas;

        // take snapshot and return image data uri
        var self = this;
        var params = this.params;

        if (!this.loaded) return this.dispatch('error', new WebcamError("Webcam is not loaded yet"));
        // if (!this.live) return this.dispatch('error', new WebcamError("Webcam is not live yet"));
        if (!user_callback) return this.dispatch('error', new WebcamError("Please provide a callback function or canvas to snap()"));

        // if we have an active preview freeze, use that
        if (this.preview_active) {
            this.savePreview( user_callback, user_canvas );
            return null;
        }

        // create offscreen canvas element to hold pixels
        var canvas = document.createElement('canvas');
        canvas.width = this.params.dest_width;
        canvas.height = this.params.dest_height;
        var context = canvas.getContext('2d');

        // flip canvas horizontally if desired
        if (this.params.flip_horiz) {
            context.translate( params.dest_width, 0 );
            context.scale( -1, 1 );
        }

        // create inline function, called after image load (flash) or immediately (native)
        var func = function() {
            // render image if needed (flash)
            if (this.src && this.width && this.height) {
                context.drawImage(this, 0, 0, params.dest_width, params.dest_height);
            }

            // crop if desired
            if (params.crop_width && params.crop_height) {
                var crop_canvas = document.createElement('canvas');
                crop_canvas.width = params.crop_width;
                crop_canvas.height = params.crop_height;
                var crop_context = crop_canvas.getContext('2d');

                crop_context.drawImage( canvas, 
                    Math.floor( (params.dest_width / 2) - (params.crop_width / 2) ),
                    Math.floor( (params.dest_height / 2) - (params.crop_height / 2) ),
                    params.crop_width,
                    params.crop_height,
                    0,
                    0,
                    params.crop_width,
                    params.crop_height
                );

                // swap canvases
                context = crop_context;
                canvas = crop_canvas;
            }

            // render to user canvas if desired
            if (user_canvas) {
                var user_context = user_canvas.getContext('2d');
                user_context.drawImage( canvas, 0, 0 );
            }

            // fire user callback if desired
            user_callback(
                user_canvas ? null : canvas.toDataURL('image/' + params.image_format, params.jpeg_quality / 100 ),
                canvas,
                context
            );
        };

        // grab image frame from userMedia or flash movie
        if (this.userMedia) {
            // native implementation
            context.drawImage(this.video, 0, 0, this.params.dest_width, this.params.dest_height);

            // fire callback right away
            func();
        }
        else if (this.iOS) {
            var div = document.getElementById(this.container.id+'-ios_div');
            var img = document.getElementById(this.container.id+'-ios_img');
            var input = document.getElementById(this.container.id+'-ios_input');
            // function for handle snapshot event (call user_callback and reset the interface)
            iFunc = function(event) {
                func.call(img);
                img.removeEventListener('load', iFunc);
                div.style.backgroundImage = 'none';
                img.removeAttribute('src');
                input.value = null;
            };
            if (!input.value) {
                // No image selected yet, activate input field
                img.addEventListener('load', iFunc);
                input.style.display = 'block';
                input.focus();
                input.click();
                input.style.display = 'none';
            } else {
                // Image already selected
                iFunc(null);
            }            
        }
        else {
            // flash fallback
            var raw_data = this.getMovie()._snap();

            // render to image, fire callback when complete
            var img = new Image();
            img.onload = func;
            img.src = 'data:image/'+this.params.image_format+';base64,' + raw_data;
        }

        return null;
    },

    configure: function(panel) {
        // open flash configuration panel -- specify tab name:
        // "camera", "privacy", "default", "localStorage", "microphone", "settingsManager"
        if (!panel) panel = "camera";
        this.getMovie()._configure(panel);
    },

    flashNotify: function(type, msg) {
        // receive notification from flash about event
        switch (type) {
            case 'flashLoadComplete':
                // movie loaded successfully
                this.loaded = true;
                this.dispatch('load');
                break;

            case 'cameraLive':
                // camera is live and ready to snap
                this.live = true;
                this.dispatch('live');
                break;

            case 'error':
                // Flash error
                this.dispatch('error', new FlashError(msg));
                break;

            default:
                // catch-all event, just in case
                // console.log("webcam flash_notify: " + type + ": " + msg);
                break;
        }
    },

    b64ToUint6: function(nChr) {
        // convert base64 encoded character to 6-bit integer
        // from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
        return nChr > 64 && nChr < 91 ? nChr - 65
            : nChr > 96 && nChr < 123 ? nChr - 71
            : nChr > 47 && nChr < 58 ? nChr + 4
            : nChr === 43 ? 62 : nChr === 47 ? 63 : 0;
    },

    base64DecToArr: function(sBase64, nBlocksSize) {
        // convert base64 encoded string to Uintarray
        // from: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
        var sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
            nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, 
            taBytes = new Uint8Array(nOutLen);

        for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
            nMod4 = nInIdx & 3;
            nUint24 |= this.b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
            if (nMod4 === 3 || nInLen - nInIdx === 1) {
                for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
                    taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
                }
                nUint24 = 0;
            }
        }
        return taBytes;
    },

    upload: function(image_data_uri, target_url, callback) {
        // submit image data to server using binary AJAX
        var form_elem_name = this.params.upload_name || 'webcam';

        // detect image format from within image_data_uri
        var image_fmt = '';
        if (image_data_uri.match(/^data\:image\/(\w+)/))
            image_fmt = RegExp.$1;
        else
            throw "Cannot locate image format in Data URI";

        // extract raw base64 data from Data URI
        var raw_image_data = image_data_uri.replace(/^data\:image\/\w+\;base64\,/, '');

        // contruct use AJAX object
        var http = new XMLHttpRequest();
        http.open("POST", target_url, true);

        // setup progress events
        if (http.upload && http.upload.addEventListener) {
            http.upload.addEventListener( 'progress', function(e) {
                if (e.lengthComputable) {
                    var progress = e.loaded / e.total;
                    Webcam.dispatch('uploadProgress', progress, e);
                }
            }, false );
        }

        // completion handler
        var self = this;
        http.onload = function() {
            if (callback) callback.apply( self, [http.status, http.responseText, http.statusText] );
            Webcam.dispatch('uploadComplete', http.status, http.responseText, http.statusText);
        };

        // create a blob and decode our base64 to binary
        var blob = new Blob( [ this.base64DecToArr(raw_image_data) ], {type: 'image/'+image_fmt} );

        // stuff into a form, so servers can easily receive it as a standard file upload
        var form = new FormData();
        form.append( form_elem_name, blob, form_elem_name+"."+image_fmt.replace(/e/, '') );

        // send data to server
        http.send(form);
    }

};

Webcam.init();

if (typeof define === 'function' && define.amd) {
    define( function() { return Webcam; } );
} 
else if (typeof module === 'object' && module.exports) {
    module.exports = Webcam;
} 
else {
    window.Webcam = Webcam;
}

}(window));