var MediaGIconVersion = 1;

var MIconSet=new Class({
	options:{
	title:'Icon Set',
	description:'This is an Icon set'
},
initialize:function(options,icons){
	if(icons)
	{
		this.icons=icons;
		this.isLoaded=true;
	}

	this.setOptions(options);
},
toTable:function(userOptions,tbl){
	return MIconSet.generateTable(this.icons, userOptions,tbl);
}
});

MIconSet.implement(new Options());
MIconSet.defaultTableOptions={
		width:4,
		emptyEl:true,
		click:function(icon){},	/*click defaults to an empty function... should be overwritten*/
		mouseover:function(icon){
			icon.style.opacity="1";
			icon.style.border='2px solid blue';
		},
		mouseout:function(icon){
			icon.style.opacity=(BrowserDetect.browser=="Explorer"?'1':'0.6');
			icon.style.border='2px solid grey';
		},
		styles:{
			opacity:(BrowserDetect.browser=="Explorer"?'1':'0.6'),
			cursor:"pointer",
			border: '2px solid grey'
		},
		'class':"menuMarker"	/*default class prefix*/
};
/**
 * Static method: MIconSet.generateTable
 * generates a table of elements (where each element is assigned a class for css)
 * 
 *  **this static method is attached to MIconSet, only for convenience, since it 
 *    only needs/assumes an array of image urls.
 */

MIconSet.FloatImageTable=function(icons, options, tbl){
	var config=options||{"class":"floatIcons-"};
	if(!tbl)
	{	
		if(BrowserDetect.browser=="Explorer")var tableEl=$(document.createElement('table'));
		else var tableEl=new Element('table');

	}else{
		tableEl=tbl;
	}
	tableEl.addClass(config['class']+"Icon");
	if(BrowserDetect.browser=="Explorer")var currentRow=$(tableEl.insertRow());
	else {
		var currentRow=new Element('tr');
		tableEl.appendChild(currentRow);
	}
	currentRow.addClass(config['class']+"IconRow");

	if(BrowserDetect.browser=="Explorer")var cell=$(currentRow.insertCell());
	else{		
		var cell=new Element('td');
		currentRow.appendChild(cell);
	}
	cell.addClass(config['class']+"IconData");

	var images=new Asset.images(icons,{
		onComplete:function(){
		$each(images,function(i){
			cell.appendChild(i);
			i.addClass(config['class']+"IconImage");
			if(config.imageFn)config.imageFn(i);
		});
	}});

	return tableEl;

};

MIconSet.generateTable=function(iconSet, userOptions, tbl){
	/*default settings*/

	var options={};
	$extend(options,MIconSet.defaultTableOptions);	
	/*
	 * must separate extend calls otherwise options could become static and multiple
	 * instances will become linked with a static method updating a single instance 
	 * (bug-fix)
	 */
	$extend(options,userOptions); //overrides default settings

	if(!tbl)
	{	
		if(BrowserDetect.browser=="Explorer")tbl=$(document.createElement('table'));
		else tbl=new Element('table');
		tbl.addClass(options['class']+"Icon");
		//tbl.title="Select an icon::click on one of the icons to activate it";

	}
	var currentRow=null;	
	var counter=0;	//counter % width = 0 on first iteration

	/*
	 * create a new row for every 'options.width' (5) icons and append to table tbl
	 */
	$each(iconSet,function(img){
		if((counter%options.width)==0)	//check if it is a new row
		{
			if(BrowserDetect.browser=="Explorer")currentRow=$(tbl.insertRow());
			else {
				currentRow=new Element('tr');
				tbl.appendChild(currentRow);
			}
			currentRow.addClass(options['class']+"IconRow");
		}
		if(BrowserDetect.browser=="Explorer")var cell=$(currentRow.insertCell());
		else{		
			var cell=new Element('td');
			currentRow.appendChild(cell);
		}
		cell.addClass(options['class']+"IconData");
		var image=new Element('img',
				{
			'class':options['class']+"IconImage",
			src:img,
			events:{
			mouseover:function(){
			options.mouseover(image);
		},
		mouseout:function(){
			options.mouseout(image);	
		},
		click:function(){
			options.click(image);
		}
		},
		styles:options.styles
				});
		cell.appendChild(image);
		MIconSet.ParseIconTip(img,cell);
		counter++;
	});
	/*
	 * add empty elements to fill table completely (if enabled in options).
	 */
	if(options.emptyEl)
	{
		var remaining=(options.width-iconSet.length%options.width)%options.width; 
		if(remaining&&currentRow)
		{
			for(var i=0;i<remaining;i++)
			{
				if(BrowserDetect.browser=="Explorer")var empty=$(currentRow.insertCell());
				else{
					var empty=new Element('td');
					currentRow.appendChild(empty);
				}
				empty.addClass(options['class']+"IconDataEmpty");
			}
		}
	}
	return tbl;
};
MIconSet.ParseIconTip=function(url, cell){
	mm_debug(url);
	var dirSects=url.split("/");
	var name=dirSects[dirSects.length-1].split('.')[0];
	mm_debug(name);
	if(IconLegend[name]){
		cell.title=name.capitalize()+"::"+IconLegend[name];
	}else
	{
		cell.title="Select an icon::click on one of the icons to activate it";
	}
	new mediaTips(cell);

};

/**
 * custom internet icon sets
 */
var GoogleIconSet=new MIconSet(
		{title:"Google Icons",description:"This is the default icon set provided by google"},
		["http://maps.google.com/mapfiles/ms/micons/red.png",
		 "http://maps.google.com/mapfiles/ms/micons/red-dot.png",
		 "http://maps.google.com/mapfiles/ms/micons/blue-dot.png",
		 "http://maps.google.com/mapfiles/ms/micons/ltblue-dot.png",
		 "http://maps.gstatic.com/intl/en_ca/mapfiles/ms/micons/green.png",
		 "http://maps.gstatic.com/intl/en_ca/mapfiles/ms/micons/green-dot.png",
		 "http://maps.gstatic.com/intl/en_ca/mapfiles/ms/micons/pink.png",
		 "http://maps.gstatic.com/intl/en_ca/mapfiles/ms/micons/pink-dot.png",
		 "http://maps.gstatic.com/intl/en_ca/mapfiles/ms/micons/yellow.png",
		 "http://maps.gstatic.com/intl/en_ca/mapfiles/ms/micons/yellow-dot.png",
		 "http://maps.google.com/mapfiles/kml/paddle/purple-circle.png",
		 "http://maps.google.com/mapfiles/kml/paddle/wht-blank.png"
		 ]
);



/**
 * retrieves an icon set as a json object formatted as follows: * 	
 * json={exists:boolean, icons:[string...], title:string, description:string}
 * 
 */
MIconSet.AjaxSet=MIconSet.extend({
	initialize:function(options)
	{
	var me=this;
	me.isLoaded=false;
	me.parent(options,null);
	/*add optional loadFunction as event listener*/
	if(options.onLoadFunction)
		me.addEvent('onLoaded',options.onLoadFunction);
	AjaxRequest(options.url,
			{
		method:"get", 
		onSuccess:function(json)
		{
		var iconSet=Json.evaluate(json);
		if(iconSet.exists&&iconSet.icons.length>0)
		{
			me.icons=iconSet.icons;
			me.fireEvent('onLoaded',true);
			me.isLoaded=true;
		}
		else
		{
			me.fireEvent('onLoaded',false);
			me.isLoaded=true;
		}
		},
		onFailure:function(){me.fireEvent('onLoaded',false);}
			});

	},
	toTable:function(userOptions,tbl){
		var me=this;
		if(me.icons)
			return MIconSet.generateTable(me.icons,userOptions,tbl);
		else
		{
			if(!tbl)
				tbl=new Element('table',{title:"Select an icon::click on one of the icons to activate it"});
			this.addEvent('onLoaded',function(){
				MIconSet.generateTable(me.icons,userOptions,tbl);
			});
			return tbl;
		}
	}
});
MIconSet.AjaxSet.implement(new Events());

var IconLegend={
		right:"Directional marker",
		left:"Directional marker",
		up:"Directional marker",
		down:"Directional marker",
		downright:"Directional marker",
		downleft:"Directional marker",
		upright:"Directional marker",
		upleft:"Directional marker",
		microscope:"Use this marker for identifying locations where further data is required",
		autoroute:"Use this marker for identifying road - highway issues",
		forest:"Use this marker for identifying forestry related issues",
		development:"Use this marker for identifying development related issues",
		wildlife:"Use this marker for identifying wildlife related issues",
		attention:"Use this marker for identifying blockages or bottlenecks",
		agriculture:"Use this marker for identifying agriculture related issues",
		'wetland-riparian':"Use this marker for identifying wetland or riparian related issues",
		park:"Use this marker for identifying park related issues",
		panoramic:"Use this marker for general comments",
		recreation:"Use this marker for identifying recreational related issues"
};

var MLegend=new Class({
	options:{},
	initialize:function(options){}
});
var MIconLegend=new Class({
	options:{},
	initialize:function(){}
});