if (Object.isUndefined(CodeCompany)) { var CodeCompany = {}; }

CodeCompany.ImageMap = Class.create({

	log: function(str) {
		if (!Object.isUndefined(site)) { site.log('ImageMap: '+str); }
	},

	initialize: function(imageElement,options) {
		// Get dimensions from image
		this.width = imageElement.getWidth();
		this.height = imageElement.getHeight();

		//this.log('ImageMap ('+this.width+'x'+this.height+')');

		this.options = Object.extend({
			pointDefaults: {
				infoHtml:		' ',
				popupHtml:		'[popup]',
				xPosition:		0,
				yPosition:		0,
				xOffset:		0,
				yOffset:		0,
				appearDuration: 1,
				fadeDuration:	1
			}
		},options || {});

		// Instantiate appContainer container and wrap imageElement in it
		this.appContainer = new Element('div');
		this.appContainer.addClassName('imagemap_container');
		this.appContainer.style.width = this.width+'px';
		this.appContainer.style.height = this.height+'px';
		imageElement.wrap(this.appContainer);

		// Instantiate pointsContainer and add to appContainer
		this.pointsContainer = new Element('div');
		this.pointsContainer.addClassName('imagemap_points');
		this.pointsContainer.style.position = 'absolute';
		this.appContainer.insert({top: this.pointsContainer});

		// Tweak image
		imageElement.addClassName('imagemap_image');

		// Array of points
		this.points = [];

		//this.log('Initialized');
	},

	addPoint: function(options) {

		if (undefined===options.xPosition) { return; }
		if (undefined===options.yPosition) { return; }

		// We'll be calculating with these, so make sure they're integers
		options.xPosition = parseInt(options.xPosition,10);
		options.yPosition = parseInt(options.yPosition,10);

		if ((options.xPosition<0) || (options.xPosition>=this.width) ||
			(options.yPosition<0) || (options.yPosition>=this.height)) {
			this.log('Point at '+options.xPosition+','+options.yPosition+' outside image ('+this.width+'x'+this.height+')');
			return false;
		}

		this.points.push(new CodeCompany.ImageMapPoint(
			this.pointsContainer,
			Object.extend(this.options.pointDefaults,options || {}))
		);

		return true;
	}

});


CodeCompany.ImageMapPoint = Class.create({

	log: function(str) {
		if (!Object.isUndefined(site)) { site.log('ImageMapPoint: '+str); }
	},

	initialize: function(pointsContainer,options) {
		this.options = Object.extend({
			infoHtml:			'',
			popupHtml:			'',
			xPosition:			0,
			yPosition:			0,
			xOffset:			0,
			yOffset:			0,
			/*
			xMoveOffset:		-200,
			yMoveOffset:		0,
			*/
			appearDuration:		0.5,
			fadeDuration:		0.5,
			rolloutDuration:	0.5
		},options || {});

		// Create point container
		this.container = new Element('div');
		this.container.hide();
		this.container.addClassName('imagemap_point');
		this.container.style.position = 'absolute';
		this.positionContainer();

		// Create info element
		this.info = new Element('div');
		this.info.addClassName('imagemap_point_info');
		this.info.update(this.options.infoHtml);
		this.infoContainer = new Element('div');
		this.infoContainer.addClassName('imagemap_point_infocontainer');
		this.info.wrap(this.infoContainer);
		this.container.insert({bottom: this.infoContainer});

		// Create popup element
		this.popup = new Element('div');
		this.popup.addClassName('imagemap_point_popup');
		this.popup.update(
			'<div class="imagemap_point_popup_inner">'+
				this.options.popupHtml+
			'</div>'
		);
		this.popupContainer = new Element('div');
		this.popupContainer.addClassName('imagemap_point_popupcontainer');
		this.popup.wrap(this.popupContainer);
		this.container.insert({bottom: this.popupContainer});

		pointsContainer.insert({top: this.container});

		/*
		this.popup.style.position = 'relative';
		this.popup.style.left = this.options.xMoveOffset+'px';
		this.popup.style.top = this.options.yMoveOffset+'px';
		*/
		this.popup.hide();

		this.container.appear({duration: this.options.appearDuration});

		// Popup effect
		this.popupEffect1 = undefined;
		this.popupEffect2 = undefined;

		// Observers
		this.container.observe('mouseenter',this.onMouseEnter.bindAsEventListener(this));
		this.container.observe('mouseleave',this.onMouseLeave.bindAsEventListener(this));

		this.log('Point added at '+this.options.xPosition+','+this.options.yPosition);
	},

	positionContainer: function() {
		// Position coordinates
		var	x = this.options.xPosition + this.options.xOffset;
		var y = this.options.yPosition + this.options.yOffset;

		// Position element
		this.container.style.left = x+'px';
		this.container.style.top = y+'px';
	},

	cancelEffects: function() {
		this.log("Cancelling effects..");
		if (!Object.isUndefined(this.popupEffect1)) { this.popupEffect1.cancel(); }
		if (!Object.isUndefined(this.popupEffect2)) { this.popupEffect2.cancel(); }
	},

	onMouseEnter: function(event) {
		this.log("onMouseEnter()");
		this.cancelEffects();

		this.container.addClassName('imagemap_point_popped');
		this.positionContainer();

		/*
		this.popupEffect1 = new Effect.Move(this.popup,{
			mode: 'absolute',
			duration: this.options.rolloutDuration,
			x: 0,
			y: 0
		});
		*/

		this.popupEffect2 = new Effect.Appear(this.popup,{
			duration: this.options.rolloutDuration
		});
	},

	onMouseLeave: function(event,point) {
		this.log("onMouseLeave()");
		this.cancelEffects();

		/*
		this.popupEffect1 = new Effect.Move(this.popup,{
			mode:'absolute',
			x: this.options.xMoveOffset,
			y: this.options.yMoveOffset,
			duration: this.options.rolloutDuration,
			afterFinish: (function(){
				this.container.removeClassName('imagemap_point_popped');
				this.positionContainer();
				this.popup.hide();
			}).bind(this)
		});
		*/

		this.popupEffect2 = new Effect.Fade(this.popup,{
			duration: this.options.rolloutDuration
		});
	}

});



if (Object.isUndefined(CodeCompany)) { var CodeCompany = {}; }

CodeCompany.ImageMapLoader = Class.create({

	log: function(str) {
		if (!Object.isUndefined(site)) { site.log('ImageMapLoader: '+str); }
	},

	initialize: function(options) {
		this.options = Object.extend({
			maxTextLength:		15,
			textTruncator:		'&hellip;'
		},options || {});

		// Run through images and match on regular expression
		var count = 0;
		$$('img').each(function(element){
			var match = element.src.match(/miljo(\d+)/);
			if (match!==null) {
				this.createImageMap(element,RegExp.$1);
				count++;
			}
		},this);
		if (count==0) {
			this.log('No matching images in this page');
		}
	},

	createImageMapFromJSON: function(im,jsonStr) {
		var json;
		try { json=jsonStr.evalJSON(); }
		catch (error) {
			this.log('Malformed JSON: '+jsonStr);
			return;
		}
		json.each(function(point){
			if ((undefined===point.xcoord) || (point.xcoord==='')) { return; }
			if ((undefined===point.ycoord) || (point.ycoord==='')) { return; }
			if (undefined===point.link) { point.link=''; }
			if (undefined===point.text) { point.text=''; }
			point.opennew = (point.opennew===true);

			// Escape link text
			var text = point.text;
			text = text.replace(/&gt;/i,'>');
			text = text.replace(/&lt;/i,'<');

			// Truncate text?
			if ((this.options.maxTextLength!==undefined) && (text.length>this.options.maxTextLength)) {
				text = text.substr(0,this.options.maxTextLength-1)+this.options.textTruncator;
			}

			// Build popupHTML
			var popupHTML;
			if (point.link != '') {
				popupHTML = '<a href="'+point.link+'"';
				if (point.opennew) { popupHTML += ' target="_blank"'; }
				popupHTML += '>'+text+'</a>';
			} else {
				popupHTML = text;
			}

			// Encapsulate in .coloredlink
			popupHTML = '<div class="coloredlink">'+popupHTML+'</div>';

			// Add point
			im.addPoint({
				'xPosition':	point.xcoord,
				'yPosition':	point.ycoord,
				'xOffset':		-20,
				'yOffset':		-20,
				'popupHtml':	popupHTML
			});
		},this);
	},

	createImageMap: function(element,docId) {
		this.log('Creating ImageMap for element with docId '+docId);

		// Instantiate ImageMap
		var im = new CodeCompany.ImageMap(element);

		var url = '/miljo?docId='+docId;
		new Ajax.Request(url,{
			method: 'get',
			onSuccess: (function(transport){
				this.createImageMapFromJSON(im,transport.responseText);
			}).bind(this),
			onError: (function(transport){
				this.log('JSON request failed: '+url);
			}).bind(this)
		});
	}

});