window.addEventListener("load", loaded, false);
window.addEventListener("orientationchange", orientationchanged, false);
document.addEventListener("touchstart", tStart, false);
document.addEventListener("touchmove", tMove, false);
document.addEventListener("touchend", tEnd, false);
var stpx = 0;
var movpx = 0;

function loaded() {
    setTimeout(hideURLbar, 100);
    draw();
}


function orientationchanged(){
hideURLbar();
}

function tStart(event) {

    event.preventDefault();
    if (event.touches.length == 2) {
        stpx = Math.abs(event.touches[0].pageX - event.touches[1].pageX);
        
    }
    touchHandler(event);
    //dt = setInterval("draw()",50);
}
function tMove(event) {	
    event.preventDefault();
    touchHandler(event);
    draw();
}
function tEnd(event) {
    event.preventDefault();
    if (event.touches.length < 2) {
        stpx = 0;
        movpx = 0;
    }
    //clearInterval(dt);
    draw();
}

function touchHandler(event) {
     if (event.touches.length == 2) {
//        movpx = Math.abs(event.touches[0].pageX - event.touches[1].pageX) - stpx;
        movpx = stpx - Math.abs(event.touches[1].pageX - event.touches[0].pageX);
//        movpx = Math.abs(event.touches[0].pageX - event.touches[1].pageX);
        if (movpx < 0) {
            movpx = 0;
        }
    }
}
function draw() {
	setTimeout(function(){
	var canvas = $('cupha');
    var ctx = canvas.getContext('2d');
    var img = $("cp");
    var img2 = $("cp2");
    var img3 = $("cp3");
    var img4 = $("cp4");
    var img10 = $("cp10");
    ctx.clearRect(0, 0, 320, 380);
    if (canvas.getContext) {
//    	ctx.drawImage(img2, 100 - movpx / 3, 45, movpx*2/3+10, 325)
//    	ctx.drawImage(img, 160 - movpx / 4, 45, movpx/2, 325)
    	ctx.drawImage(img10, 0, 0, 320, 416)
if(0 <= movpx && movpx < 60){
    	ctx.drawImage(img,  movpx / 2 - 90, 90 , 200 , 200)
        ctx.drawImage(img3, 190-movpx / 2, 90, 200 , 200)
}else if(60 <= movpx && movpx < 100){
    	ctx.drawImage(img2,  movpx / 2 - 90, 90 , 200 , 200)
        ctx.drawImage(img3, 190-movpx / 2, 90, 200 , 200)
}else if(100 <= movpx && movpx < 225){
    	ctx.drawImage(img2,  movpx / 2 - 90, 90 , 200 , 200)
        ctx.drawImage(img4, 190-movpx / 2, 90, 200 , 200)
}else if(240 <= movpx && movpx < 295){
    	ctx.drawImage(img2,  movpx / 3 - 70, 90 , 200 , 200)
        ctx.drawImage(img3, 170-movpx / 3, 90, 200 , 200)
}
    }
	}, 0);
}
function hideURLbar() {
    window.scrollTo(0, 1);
}
function $(id) {
    return document.getElementById(id);
}