var isIE = document.documentElement.getAttribute("style") == document.documentElement.style;

//====================
//ラベル
//====================
//コンストラクタ
function Label(text,x,y) {
    this.text    =text;
    this.x       =x;
    this.y       =y;
    this.color   ="#000000";
    this.fontSize=12;
    this.node=document.createElement("span");
    this.node.appendChild(document.createTextNode(text));

    this.node.setAttribute("style",
        "position:absolute;"+
        "color:"+this.color+";"+
        "font-family:monospace;"+
        "font-size:"+this.fontSize+"px;"+
        "left:"+this.x+"px;"+
        "top:"+this.y+"px;");

    getElement("canvas").insertBefore(
        this.node,getElement("canvas").firstChild );
}

//テキストの指定
Label.prototype.setText=function(text) {
    this.text=text;
    this.node.replaceChild(document.createTextNode(text),this.node.firstChild);
    this.update();
}

//XY座標の指定
Label.prototype.setXY=function(x,y) {
    this.x=x;
    this.y=y;
    this.update();
}

//色の指定
Label.prototype.setColor=function(red,green,blue) {
    this.color=rgb2str(red,green,blue);
    this.update();
}

//フォントサイズの指定
Label.prototype.setFontSize=function(fontSize) {
    this.fontSize=fontSize;
    this.update();
}

//更新
if (isIE) {
    Label.prototype.update=function() {
        var cssText =
            "position:absolute;"+
            "font-family:monospace;"+
            "color:"+this.color+";"+
            "font-size:"+this.fontSize+"px;"+
            "left:"+this.x+"px;"+
            "top:"+this.y+"px;";

        this.node.style.cssText = cssText;
    }
} else {
    Label.prototype.update=function() {
        var style = this.node.style;
        style.color = this.color;
        style.fontSize = this.fontSize + "px";
        style.left = this.x + "px";
        style.top = this.y + "px";
    }
}

//====================
//矩形
//====================
//コンストラクタ
function Rectangle(x,y,w,h) {
    this.x    =x;
    this.y    =y;
    this.w    =w;
    this.h    =h;
    this.color="#ffffff";
    this.node=document.createElement("span");

    this.node.setAttribute("style",
        "position:absolute;"+
        "background-color:"+this.color+";"+
        "left:"+this.x+"px;"+
        "top:"+this.y+"px;"+
        "width:"+this.w+"px;"+
        "height:"+this.h+"px");

    getElement("canvas").insertBefore(
        this.node,getElement("canvas").firstChild );

}

//XY座標の指定
Rectangle.prototype.setXY=function(x,y) {
    this.x=x;
    this.y=y;
    this.update();
}

//幅の指定
Rectangle.prototype.setWidth=function(w) {
    this.w=w;
    this.update();
}

//高さの指定
Rectangle.prototype.setHeight=function(h) {
    this.h=h;
    this.update();
}

//色の指定
Rectangle.prototype.setColor=function(red,green,blue) {
    this.color=rgb2str(red,green,blue);
    this.update();
}

//更新
if (isIE) {
    Rectangle.prototype.update=function(){
        var cssText=
            "position:absolute;"+
            "background-color:"+this.color+";"+
            "left:"+this.x+"px;"+
            "top:"+this.y+"px;"+
            "width:"+this.w+"px;"+
            "height:"+this.h+"px";
        this.node.style.cssText = cssText;
    }
} else {
    Rectangle.prototype.update=function(){
        var style = this.node.style;
        style.backgroundColor = this.color;
        style.left = this.x + "px";
        style.top = this.y + "px";
        style.width = this.w + "px";
        style.height = this.h + "px";
    }
}


//====================
//イメージ
//====================
//コンストラクタ
function Image(src,x,y) {
    this.x       =x;
    this.y       =y;
    this.node=document.createElement("img") ;
    this.node.setAttribute("src",src);
    getElement("canvas").insertBefore(
        this.node,getElement("canvas").firstChild );

    var cssText=
        "position:absolute;"+
        "left:"+this.x+"px;"+
        "top:"+this.y+"px;";
    if (this.node.getAttribute("style")==this.node.style) {
        this.node.style.cssText=cssText;
    } else {
        this.node.setAttribute("style",cssText);
    }
}

//XY座標の指定
Image.prototype.setXY=function(x,y) {
    this.x=x;
    this.y=y;
    this.update();
}

//更新
if (isIE) {
    Image.prototype.update=function(){
        var cssText=
            "position:absolute;"+
            "left:"+this.x+"px;"+
            "top:"+this.y+"px;";
        this.node.style.cssText=cssText;
    }
} else {
    Image.prototype.update=function(){
        var style = this.node.style;
        style.left = this.x + "px";
        style.top = this.y + "px";
    }
}


//====================
//ユーティリティ
//====================
//要素の取得
function getElement(name) {
    if(document.getElementById) return document.getElementById(name);
    if(document.all) return document.all(name);
    return null;
}

//RGB文字列の取得
function rgb2str(red,green,blue) {
    var color="#";
    if (red<16) color+="0";
    color+=red.toString(16);
    if (green<16) color+="0";
    color+=green.toString(16);
    if (blue<16) color+="0";
    color+=blue.toString(16);
    return color;
}

//幅の取得
function getWidth() {
    if (self.innerWidth) {
        return self.innerWidth;
    } else if (document.body.clientWidth) {
        return document.body.clientWidth;
    }
    return 640;
}

//高さの取得
function getHeight() {
    if (self.innerHeight) {
        return self.innerHeight;
    } else if (document.body.clientHeight) {
        return document.body.clientHeight;
    }
    return 480;
}

//距離の2乗の計算
function calcLen(x0,y0,x1,y1) {
    return (x0-x1)*(x0-x1)+(y0-y1)*(y0-y1);
}
    
//乱数の取得
function rand(num) {
    return Math.floor(Math.random()*num);
}