// Public

function Graph(divName, imgPath, points) {

    this.div = document.getElementById(divName);
    this.div.style.backgroundImage = "url("+imgPath+")";
    this.x = 0;
    this.y = 0;
    this.points = points;
    this.fillWidth = 13;
    this.fillHeight = 13;
    this.fimg = new Image(this.fillWidth, this.fillHeight);
    this.fimg.src = "/img/is4u_fill.gif";
    this.piximg = new Image(2,2);
    this.piximg.src = "/img/pix.gif";
    this.enabled = true;


    this.hoverPoint = null;
    this.hoverImage = null;

    this.expandPoints();

    this.div.onmousemove = this.eventHandler("onmove");
}
Graph.prototype.topLeft = function(x,y) {
    this.x = x;
    this.y = y;
    this.draw();
}
Graph.prototype.enable = function() {
    this.enabled = true;
}
Graph.prototype.disable = function() {
    this.enabled = false;
    this.removeHoverPoint();
}

// Private
Graph.prototype.expandPoints = function() {

    for (var i in this.points) {
        var point = this.points[i];

        if (!point.left) {
            point.left = point.x - this.fillWidth / 2;
        }
        if (!point.width) {
            point.width = this.fillWidth;
        }
        if (!point.top) {
            point.top = point.y - this.fillHeight / 2;
        }
        if (!point.height) {
            point.height = this.fillHeight;
        }

        if (!point.centerX) {
            point.centerX = point.x;
        }
        if (!point.centerY) {
            point.centerY = point.y;
        }

        point.right = point.left + point.width;
        point.bottom = point.top + point.height;
    }
}
Graph.prototype.eventHandler = function(methodName) {
    var self = this;
    return function(event) {
        event = event || window.event;
        if (event.target && !event.srcElement) {
            event.srcElement = event.target;
        }
        self[methodName](event);
    };
}
Graph.prototype.animateTopLeft = function(x, y) {
    var count = 8;
    this.steps = [];
    this.steps[0] = [x,y];
    var dx = (this.x-x)/count;
    var dy = (this.y-y)/count;
    for (var i=1;i<count;++i) {
        this.steps[i] = [x+dx*i, y+dy*i];
    }

    this.animate();
}
Graph.prototype.animate = function() {
    //alert(this.steps);
    var step = this.steps[this.steps.length - 1];
    this.steps.length = this.steps.length - 1;
    this.topLeft(step[0], step[1]);
    globalGraph = this;
    if (this.steps.length>0) {
        //alert(this.steps.length);
        setTimeout("globalGraph.animate()",1);
    } else {
        this.steps = null;
    }
}
Graph.prototype.animateCenter = function(x, y) {
    this.animateTopLeft(x - this.div.offsetWidth / 2, y - this.div.offsetHeight / 2);
}
Graph.prototype.draw=function() {
    this.div.style.backgroundPosition = (-this.x)+"px "+(-this.y)+"px";
}

Graph.prototype.getXYOf = function(a) {
   var r=new Object();
   if (a==document.body) {
      r.x=0;
      r.y=0;
      return r;
   }
   p = this.getXYOf(a.offsetParent);
   r.x = a.offsetLeft+p.x;
   r.y = a.offsetTop+p.y;
   return r;
}

Graph.prototype.event2coord = function(event) {

    var p;
    if (event.offsetX) {
        p = new Object();
        p.x = event.offsetX;
        p.y = event.offsetY;
    } else {
        p = this.getXYOf(event.srcElement);
        p.x = event.pageX - p.x;
        p.y = event.pageY - p.y;
    }

    p.x = this.x + p.x;
    p.y = this.y + p.y;

    return p;
}
Graph.prototype.onclick = function(event) {
    if (this.hoverPoint.method) {
        eval(this.hoverPoint.method);
    } else {
        this.animateCenter(this.hoverPoint.centerX, this.hoverPoint.centerY);
        this.removeHoverPoint();
    }

}
Graph.prototype.onmove = function(event) {
    if (event.srcElement == this.div && this.enabled) {
        var point = this.pointUnder(this.event2coord(event));
        this.adjustHover(point);
    }
}

Graph.prototype.removeHoverPoint = function() {
    this.div.removeChild(this.hoverImage);
    this.hoverPoint = null;
    this.hoverImage = null;
}
Graph.prototype.adjustHover = function(point) {
    if (this.hoverPoint==point) {
        return;
    }
    if (this.hoverPoint!=null) {
        this.removeHoverPoint();
    }

    if (point!=null) {
        this.hoverPoint = point;

        this.hoverImage = document.createElement("img");
        this.hoverImage.style.position = "relative";
        this.hoverImage.style.cursor = "pointer";
        this.hoverImage.onclick = this.eventHandler("onclick");

        if (point.customHover) {
            this.hoverImage.style.left = point.left - this.x + "px";
            this.hoverImage.style.top = point.top - this.y + "px";
            this.hoverImage.style.width = point.width + "px";
            this.hoverImage.style.height = point.height + "px";
            this.hoverImage.src = this.piximg.src;

        } else {
            this.hoverImage.src = this.fimg.src;
            this.hoverImage.style.left = point.left - this.x +"px";
            this.hoverImage.style.top = point.top - this.y + "px"
        }
        this.div.appendChild(this.hoverImage);
    }
}
Graph.prototype.pointUnder = function (c) {
    for (var i in this.points) {
        var point = this.points[i];
        if (c.x>point.left && c.x<point.right &&
            c.y>point.top && c.y<point.bottom) {
            return point;
        }
    }
    return null;
}