var HotSpotPic = {
	obj: null,
	hotspots: new Array(),
	hotspotSize: null,
	init: function(obj) {
		obj.hotspots = this.hotspots;
		obj.hotSpotSize = this.hotspotSize;
		obj.addHotspot = this.addHotspot;
		obj.checkMessage = this.checkMessage;
	},
	addHotspot: function(x,y,id) {
		var o = HotSpotPic.obj = this;
		var hotspot = {x: x, y: y, id: id}
		o.hotspots.push(hotspot);
	},
	checkMessage: function(x,y) {
		var o = HotSpotPic.obj = this;
		for (i=0;i<o.hotspots.length;i++) {
			var hotspot = o.hotspots[i];
			var node = document.getElementById(hotspot.id);
			if (node != null) {
				if (x > (hotspot.x-o.hotspotSize) && x < (hotspot.x+o.hotspotSize) && y > (hotspot.y-o.hotspotSize) && y < (hotspot.y+o.hotspotSize)) {
					node.style.visibility = "visible";
				} else {
					node.style.visibility = "hidden";
				}
			}
		}
	}

};

var HotSpotController = {
	init: function(fullpicID, thumbnailID, magnifierID, viewPortID, viewPortSize) {

	    var fullscreen = document.getElementById(fullpicID);
        var magnifier = document.getElementById(magnifierID);
		var thumbImage = document.getElementById(thumbnailID);
		var viewPort = document.getElementById(viewPortID);
		this.setSize(viewPort, viewPortSize, viewPortSize);

		this.fullscreen = fullscreen;
		this.magnifier = magnifier;

		this.scaleFactor = thumbImage.width/fullscreen.width;
		this.setSize(magnifier, viewPortSize*this.scaleFactor, viewPortSize*this.scaleFactor);
		xMin = viewPortSize - fullscreen.width;
		yMin = viewPortSize - fullscreen.height;
		xMax = thumbImage.width - (viewPortSize * this.scaleFactor);
		yMax = thumbImage.height - (viewPortSize * this.scaleFactor);

		Drag.init(fullscreen, null, xMin, 0, yMin, 0);
		Drag.init(magnifier, null, 0, xMax, 0, yMax);
		Moveable.init(fullscreen);
		Moveable.init(magnifier);
		HotSpotPic.init(fullscreen);

		fullscreen.onDrag = function(x, y) {
			  curr_x = -1*x;
			  curr_y = -1*y;
			  HotSpotController.magnifier.move(curr_x*HotSpotController.scaleFactor, curr_y*HotSpotController.scaleFactor);
			  HotSpotController.fullscreen.checkMessage(curr_x,curr_y);
		}


		magnifier.onDrag = function(x, y) {
			curr_x = x/HotSpotController.scaleFactor;
			curr_y = y/HotSpotController.scaleFactor;
			HotSpotController.fullscreen.move(-1*curr_x, -1*curr_y);
			HotSpotController.fullscreen.checkMessage(curr_x,curr_y)
		}
	},
	setHotspotSize: function(size) {
		this.fullscreen.hotspotSize = size;
	},
	addHotspot: function(x,y,id) {
		this.fullscreen.addHotspot(x,y,id);
	},
	setSize: function(obj, height, width) {
	//set the size of obj to height and width in pixels.
    	obj.style.width = width + "px";
		obj.style.height = height + "px";
	}

};