//ウィンドウサイズ
var WIDTH=835;
var HEIGHT=746;

var mouseDown = false;
var mouseX = 0;
var mouseY = 0;

//canvas context
var ctx;
var img1;
var img2;
var m1;
var m2;
var m3;
var m4;
var m5;
var m6;


var cnt=0;
var inProc=false;
var first = 0;
//キー入力
var key=[0,0,0,0,0]; // left, right, up, down

//スプライトのプロトタイプ
//クリック型プロトタイプ
function Imgs(src,sx,sy)
{
    this.img = new Image();
    this.img.src = src;
    this.sx  = sx;
    this.sy  = sy;
    this.Hit = function(px,py){
        var ex = this.sx+this.img.width;
        var ey = this.sy+this.img.height;
        if( this.sx <= px && px <= ex ){
            if( this.sy <= py && py <= py ){
                return true;
            }
        }
        return false;
    };
    this.putImage = function(ctx){
        ctx.drawImage(this.img,this.sx,this.sy);
    };
};


var xx;
var yy;
var xxo=-1;
var yyo=-1;
var character;
var back;

//イベントリスナーの登録
var observe = window.addEventListener
? function(target, type, listener) {
target.addEventListener(type, listener, false); }
: function(target, type, listener) {
target.attachEvent('on' + type, function() { listener.call(target,window.event); }); };

window.onload = function init(){
    cnt=0;//初期化
    xx = ~~(WIDTH/2);
    yy = ~~(HEIGHT/2);//スプライトのインスタンス
    xxo = xx;
    yyo = yy;
    ctx = document.getElementById('mainWindow').getContext('2d'); //描画するコンテキスト
    img1 = new Image();
    img1.src = "img/yun_2055.jpg";
    img2 = new Image();
    img2.src = "img/anim.png";
    m1 = new Imgs("img/menu_top.png",0,0);
    m2 = new Imgs("img/menu_com.png",139, 0);
    m3 = new Imgs("img/menu_pdt.png",139*2, 0);
    m4 = new Imgs("img/menu_blg.png",139*3, 0);
    m5 = new Imgs("img/menu_mov.png",139*4, 0);
    m6 = new Imgs("img/menu_qry.png",139*5, 0);
    wait();
    
};
function wait()
{
    if( (! ctx) || (! img1.complete) || ( ! img2.complete ) || (! m1.img.complete )||(! m2.img.complete)||(! m3.img.complete)||(! m4.img.complete)||(! m5.img.complete) ||(! m6.img.complete)  ){
        setTimeout(wait,500);
    }
    observe(document,"mousemove", onMouseMove);
    observe(document,"mouseup", onMouseUp);
    Refresh();
    setTimeout(main,80); //コンテキストが取得できたならmain()関数を 繰り返し実行する
}
function Refresh()
{
    ctx.drawImage(img1,0,0);
    m1.putImage(ctx);
    m2.putImage(ctx);
    m3.putImage(ctx);
    m4.putImage(ctx);
    m5.putImage(ctx);
    m6.putImage(ctx);
}
function main(){
    inProc = true;
    cnt = (cnt+1)%8;
    updateString();
    draw();
    inProc = false;
    setTimeout(main,80);
}

/* 一度描画したものは残りつづける為、毎回初期化する */
function draw(){
    //画面の初期化
    if( yy <= 60 || yyo <= 60){
        if( first > 0 ){
            ctx.putImageData(back, xxo,yyo);
        }else{
            ctx.drawImage(img1,xxo,yyo,60,60,xxo,yyo,60,60);
            first++;
        }
         //ここにアニメーション
        back = ctx.getImageData(xx,yy,60,60);
        ctx.drawImage(img2, 0, cnt*60, 60, 60,   xx, yy, 60, 60);
        xxo = xx;
        yyo = yy;
    }else{
        first = 0;
        ctx.drawImage(img1,xxo,yyo,60,60,xxo,yyo,60,60);
        ctx.drawImage(img2, 0, cnt*60, 60, 60,   xx, yy, 60, 60);
        xxo = xx;
        yyo = yy;
    }
}

function updateString(){
    var dx  = ~~(Math.abs(mouseX-xx)/4);
    var dy  = ~~(Math.abs(mouseY-yy)/4);
    if( mouseX<xx && xx>dx){
        xx -= dx;
    }
    if( mouseX>xx && xx<WIDTH-60-dx){
        xx += dx;
    }
    if( mouseY<yy && yy>dy){
        yy -= dy;
    }
    if( mouseY>yy && yy<HEIGHT-60-dy){
        yy += dy;
    }
    if( mouseDown ){
        mouseDown = false;
        if( m1.Hit(mouseX,mouseY) ){
            alert("m1");
        }else if( m2.Hit(mouseX,mouseY) ){
            location.href = "page2.html";
        }else if( m3.Hit(mouseX,mouseY) ){
            location.href = "page3.html";
        }else if( m4.Hit(mouseX,mouseY) ){
            location.href = "http://www.make-it.co.jp/wordpress/";
        }else if( m5.Hit(mouseX,mouseY) ){
            location.href = "wcu.html";
        }else if( m6.Hit(mouseX,mouseY) ){
            location.href = "page6.php";
        }
    }
}

function onMouseMove(e){
    if( ! ctx || inProc ) return;
    var X = e.clientX;
    var Y = e.clientY;
    mouseY = Y-ctx.canvas.offsetTop+document.body.scrollTop-30;
    mouseX = X-ctx.canvas.offsetLeft+document.body.scrollLeft-30;
}

function onMouseUp(){
    mouseDown = true;
}