//consist parameter
const FRAME_MOVE_RATIO	= 15;  //amount of frame move related on mouse move length
const FRAME_DURATION	= 0.1;

//variable for program
var down_flag = false;
var down_pos_x = 0;
var down_pos_y = 0;
var v;

//functions
function mouse_down(e) {
	down_flag = true;
	down_pos_x = e.pageX;
	down_pos_y = e.pageY;
	//console.log(down_pos_x + '  ' + down_pos_y);
}

function mouse_up(e) {
	down_flag = false;
	down_pos_x = 0;
	down_pos_y = 0;
	//console.log(down_pos_x + '  ' + down_pos_y);
}

function floor_custom(val) {
	if( val >= 0) {
		return Math.floor(val)
	} else {
		return Math.floor(val) + 1;
	}
}

/*
function move_frame(e) {
	var delta_x	 = e.pageX - down_pos_x;
	var frame_amount = floor_custom(delta_x / FRAME_MOVE_RATIO);
	console.log(frame_amount);
	if( frame_amount != 0) {
		tot_current_time = v.currentTime + (FRAME_DURATION * frame_amount);
		if ( tot_current_time > 0 ) {
			v.currentTime = tot_current_time % v.duration;
			down_pos_x = e.pageX;  
		} else {
			v.currentTime = tot_current_time % v.duration + v.duration;
			down_pos_x = e.pageX;
		}
	}
}
*/

function move_frame(e) {
	var down_x;
	var step = 10;
	var delta_before = 0;
	//var canvas = myCanvas;  //store canvas outside event loop
	var dx = e.pageX - down_pos_x;
	var now_position;
	
	frame = floor_custom((dx)/FRAME_MOVE_RATIO);
	//console.log('frame : ' + frame);
	/*
	if(frame>0) {
		//$('.viewPort').css('background-position-y','+='+frame*640+'px');
		down_pos_x = e.pageX;
	} else if(frame<0) {
		//$('.viewPort').css('background-position-y','-='+frame*-1*640+'px');
		down_pos_x = e.pageX;
	}
	*/
	if(frame!==0){
		//$('.viewPort').css('background-position-y','+='+frame*640+'px');
		var viewport_h = $('.viewPort').height();
		now_position = parseInt($('.viewPort').css('background-position').split(" ")[1]);
		new_position = now_position+frame*viewport_h;
		
		$('.viewPort').css('background-position','0px '+new_position+'px');
		down_pos_x = e.pageX;
		console.log(now_position);
	}
	
	//$('div.view_port').css('background-position-y',$('div.view_port').css('background-position-y').replace('px', '')-frame*640+'px');
	
}





function draw_film(obj, thumb_url, film_url) {
	$(obj).html('<div class="splash"><div>');
	//$('.viewPort .splash').css('background-image',"url("+ thumb_url + ")");
	
	$(obj).css('background-image',"url("+ film_url + ")");
	init_mouse(obj);
}


function init_mouse(obj){
	$(obj).on("mousedown vmousedown", function(e) {
		mouse_down(e);
		$('.guide_360').fadeOut();
	});
	$('body').on("mouseup vmouseup vmouseout mouseout", function(e) {
		mouse_up(e);
	});
	$('body').on("vmousemove mousemove", function(e) {
		if(down_flag){
			move_frame(e);	
		} else {
			//e.stopPropagation();
		}
	});
	
}




// events function
$(document).ready(function() {
	v = document.getElementById("video360");
	
	$('.play').click(function() {
		v.play();
	});
	$('.next').click(function() {
		console.log(v.currentTime);
		v.currentTime += 0.1;
	});
	$('.prev').click(function() {
		v.play();
	});
	$('video#video360').on("vmousedown mousedown", function(e) {
		mouse_down(e);
	});
	$('body').on("vmouseup vmouseout mouseout", function(e) {
		mouse_up(e);
	});
	$('body').on("vmousemove mousemove", function(e) {
		if(down_flag){
			move_frame(e);	
		} else {
			//e.stopPropagation();
		}
	});
	

});