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;


var mobileWebKit=$.browser.webkit && RegExp(" mobile/").test(navigator.userAgent.toLowerCase()) ? true: false;

/**

 */
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));
		







		if(!mobileWebKit) {
			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);
	        });
		} else {
			path.click(function () {

				highlight(ownerObjectIndex, true);
				shapeSelected(ownerObjectIndex);
				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, skipAnimation) {
	var shapes=sceneObjectShapes[sceneObjectIndex];
	var op=app.options.highlightOpacity;
	var ms=app.options.highlightAnimation;
	for(var s=0; s<shapes.length; s++) {
		if(!skipAnimation) shapes[s].animate({opacity: op}, ms, "elastic");
		else shapes[s].attr({opacity: op});
	}
}

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);
	}
}