jQuery.extend(app.options, {
	highlightOpacity: 0.2,
	highlightAnimation: 800,
	mouseoverUnhighlightDelay: 1200}
);

/**

 */
function isViewZoneFx() {
	return true;
}

var pendingShapeUpdates=0;

/**

 */
var shapes_super_imageMapDefined=imageMapDefined;

imageMapDefined = function(imgWidth, imgHeight) {
	shapes_super_imageMapDefined(imgWidth, imgHeight);
	pendingShapeUpdates++;
}

/**

 */
var shapes_super_scaleImageMap=scaleImageMap;

scaleImageMap = function(scale) {
	shapes_super_scaleImageMap(scale);
	if(pendingShapeUpdates<1) updateSceneObjectShapes();
}

/**

 */
var shapes_super_initializeImagePos=initializeImagePos;

initializeImagePos = function() {
	shapes_super_initializeImagePos();


	if(pendingShapeUpdates>0) {
		pendingShapeUpdates--;
		updateSceneObjectShapes();
	}
}

var sceneObjectShapes;
var paper;

/**

 */
function updateSceneObjectShapes() {
	if(paper!=null) {

		for(var i=0; i<sceneObjectShapes.length; i++) {
			var shapes=sceneObjectShapes[i];
			if(shapes) for(var s=0; s<shapes.length; s++) {
				shapes[s].stop();
			}
    	}
		paper.remove();
	}
	
	paper=null;
	sceneObjectShapes=[];
	
	var list=$("#surfaceShapeList>li");
	if(list.size()==0) return;
	
	var anchor=$('#ImageBox a:last');
	paper = Raphael("paper", anchor.width(), anchor.height());
	$(paper.canvas).css({position: "absolute", left: (getImageMapScale() < 1.0 ? getImagePosX()-imageBorder : 0)});
	
	list.each(function(i) {
		var li=$(this);
		var ownerObjectIndex=parseInt(li.attr("owner"));
		var pathString=li.text();
		var path = paper.path(pathString);
		path.scale(getImageMapScale(), getImageMapScale(), 0, 0);
		path.attr(initialShapeAttr(ownerObjectIndex));
		
		path.click(function () {
			shapeSelected(ownerObjectIndex);
		}).mouseover(function () {
			highlight(ownerObjectIndex);
			


			var ms=app.options.mouseoverUnhighlightDelay;
			if(ms>0) {
				clearTimeout($.data(this, "timer"));
			    var wait = setTimeout(function() {
			    	unhighlight(ownerObjectIndex);
			    }, ms);
			    $.data(this, "timer", wait);
			}
        }).mouseout(function () {
        	if(app.options.mouseoverUnhighlightDelay>0) {
        		clearTimeout($.data(this, "timer"));
        	}
        	unhighlight(ownerObjectIndex);
        });
		
		var shapes=sceneObjectShapes[ownerObjectIndex];
		if(shapes!=null) shapes.push(path);
		else sceneObjectShapes[ownerObjectIndex]=[path];
	});
}

app.options.shapeColors=['#900000', '#009000', '#000090'];
function initialShapeAttr(sceneObjectIndex) {
	var c=app.options.shapeColors;
	var ci=sceneObjectIndex%c.length;
	return {fill: c[ci], stroke: "none", opacity: 0};
}

function shapeSelected(sceneObjectIndex) {
}

function highlight(sceneObjectIndex) {
	var shapes=sceneObjectShapes[sceneObjectIndex];
	var op=app.options.highlightOpacity;
	var ms=app.options.highlightAnimation;
	for(var s=0; s<shapes.length; s++) {
		shapes[s].animate({opacity: op}, ms, "elastic");
	}
}

function unhighlight(sceneObjectIndex) {
	var shapes=sceneObjectShapes[sceneObjectIndex];
	var ms=app.options.highlightAnimation;
	for(var s=0; s<shapes.length; s++) {
		shapes[s].animate({opacity: 0}, ms);
	}
}