'use strict';
// Canvas and contexts
var video;
var dis;
var disCtx;
var thu;
var thuCtx;

// Coordinates of the upper-left ROI point  
var roi = {x : 0, y : 0, width : 0, height : 0};

// Boolean variable (zoomed or not zoomed)
var zoomed;

// Boolean variable (dragging in progress or not)
var dragging;

// doLoad will be call onload
onload=doLoad;

// PLEASE COMPLETE THIS FUNCTION

function doLoad() {

	// Getting video infos

	// Getting principal canvas context

	// Getting previz canvas context


	// Variable initialisation 

	// Events management
	// Use addEventListener
        // handleMouseScroll, dragStart, dragStop et dragZoomedRegion (to be completed)


    

	// Copy the first video frame in the 2 other canvas
	
	computeFrame();
	video.addEventListener('play',timerCallback,false);

}


// Canvas/frame drawing  (drawImage)

function computeFrame() {

    // If zoomed
    
    // If not zoomed 
}


// Event Handler for mouse wheel event
// We first aim at determining if the user wants to zoom in or zoom out

function handleMouseScroll(event) {
}



// Zooming function

function zoom(event) {
	if (!zoomed) {

        // Size of the zoomed region

        // Updates
	

	}
}



// Unzoom function

function zoomOut(event) {
}


// Handler dragStart  (only if zoomed)

function dragStart(event) {

	if (zoomed) {
		// TBC

	}
}

// Handler dragStop  (only if zoomed)

function dragStop(event) {
	if (dragging) {
		// TBC
	}
}


// Handler dragZoomedRegion (only if dargging)

function dragZoomedRegion(event) {
	if (dragging) {

        // Apply the translation 

        computeFrame();
	}
}


// Dealing with boundaries effects 

function checkBoundaries(roi, video) {


}

// Recursive frame updates
function timerCallback() {
	if (video.paused || video.ended) {
  		return;
	}
	computeFrame();
	// timerCallback recursive call for refreshing the display
	requestAnimationFrame(timerCallback);
 }
