in_package('mapsack.mapping');

mapsack.mapping.CategoryList = new Class({
	
	map_view : null,
	el : null,
	
	tree : null,
	ul_lookup : null,
	
	initialize: function(el, mv)
	{
		this.el = $(el);
		this.setMapView(mv);
		this.updateCategories();
	},
	
	setMapView : function(map_view)
	{
		this.map_view = map_view;
	},
	
	updateCategories : function()
	{
		this.buildTree();
		this.buildList();	
	},
	
	buildList : function()
	{
		var cont = this.el;
		cont.innerHTML = '';
		
		this.ul_lookup = new Hash();
		this.header_lookup = new Hash();
		
		
		var _this = this;
		
		var group = new Element('li', {'class' : 'selected'});
		var link = new Element('a', {'href' : '#'});
		link.innerHTML = 'All categories';
		link.onclick = function() {
			_this.setCategory(null);
			return false;
		};
		group.appendChild(link);
		cont.appendChild(group);
		this.header_lookup.set(null, link);
		
		this.tree.each(function(v, k){
			
			var group = new Element('li', {'class' : 'closed'});
			var cat = this.findCatById(k);
			
			var link = new Element('a', {'href' : '#'});
			link._parent_id = null;
			link.innerHTML = cat.title;
			link.onclick = function() {
				_this.toggleGroup(cat.id);
				_this.setCategory(cat.id);
				return false;
			};
			link.onmouseover = function()
			{
				_this.hoverCategory(cat.id);
			}
			link.onmouseout = function()
			{
				_this.map_view.getMarkerManager().dehilightAllMarkers();
			}
			
			group.appendChild(link);
			var ul = new Element('ul');
			group.appendChild(ul);	
			this.header_lookup.set(cat.id, link);
					
			v.each(function(c){
				
				var cat2 = this.findCatById(c);
				var option = new Element('li');
				
				var link = new Element('a', {'href' : '#'});
				link._parent_id = cat.id; 
				link.innerHTML = cat2.title;
				link.onclick = function() {
					_this.setCategory(cat2.id);
					return false;
				};
				this.header_lookup.set(cat2.id, link);
				
				link.onmouseover = function()
				{
					_this.hoverCategory(cat2.id);
				}
				
				link.onmouseout = function()
				{
					_this.map_view.getMarkerManager().dehilightAllMarkers();
				}
				
				option.appendChild(link);
				ul.appendChild(option);
			
			}, this);
			
			this.ul_lookup.set(cat.id, group);
			cont.appendChild(group);
		
		}, this);
	},
	
	hoverCategory : function(id)
	{
		var mm = this.map_view.getMarkerManager();
		var children = (this.tree.hasKey(id)) ? this.tree.get(id) : [];
	
		var filter = function(item, marker)
		{
			//return (item.category_id == id);
			return (children.contains(item.category_id) || (item.category_id == id));
			
		}
		
		mm.hlightMarkersByFilter(filter);
	},
	
	setCategory : function(id)
	{
		this.map_view.closePopup();
		var mm = this.map_view.getMarkerManager();	
		
		if (id != null)
		{
			var children = (this.tree.hasKey(id)) ? this.tree.get(id) : [];
			//alert(children);
			
			mm.filter = function(item, marker, bounds)
			{
				var category = Map.view.category_list.findCatById(item.category_id);

				if (category == null) return true;
				
				var zoom = Map.view.map_view.getGMap().getZoom();
				
				if (category.zoom_from && (zoom < category.zoom_from)) return false;
				if (category.zoom_to && (zoom > category.zoom_to)) return false;
				
				return (children.contains(item.category_id) || (item.category_id == id));
			}
			
			if (children.length > 0)
			{
				this.toggleGroup(id);
			} else {
				var el = this.header_lookup.get(id);
				if (el._parent_id) this.toggleGroup(el._parent_id);
			}
		} else {
			this.toggleGroup(null);
			
			mm.filter = function(item, marker, bounds)
			{
				var category = Map.view.category_list.findCatById(item.category_id);

				if (category == null) return true;
				
				var zoom = Map.view.map_view.getGMap().getZoom();
				
				if (category.zoom_from && (zoom < category.zoom_from)) return false;
				if (category.zoom_to && (zoom > category.zoom_to)) return false;
				
				return true;
			}
		}
		
		this.header_lookup.each(function(v,k){
			v.className = '';
		});
		
		this.header_lookup.get(id).className = 'selected';
		
		
		
		mm.filterAllItems();
	},
	
	buildTree : function()
	{
		var tree = new Hash();
		var categories = this.getCategories();
		
		/*categories.each(function(cat){
				
			var parent_id = cat['parent_id'];
			
			if (parent_id == null) 
			{
				tree.set(cat['category_id'], []);
			}
		});*/
		
		categories.each(function(cat){
				
			if (cat.is_shown == 0) return;	
				
			var parent_id = cat['parent_id'];
			
			if (parent_id == null) 
			{
				if (!tree.hasKey(cat['category_id'])) tree.set(cat['category_id'], []);
				return;
			}
			
			if (!tree.hasKey(parent_id)) tree.set(parent_id, []);
			
			var children = tree.get(parent_id);
			children.push(cat['category_id']);
		});
		
		this.tree = tree;
	},
	
	findCatById : function(id)
	{
		var categories = this.getCategories();
		
		for(var i=0; i < categories.length; i++)
		{
			var cat = categories[i];
			
			if (cat.category_id == id) return cat;
		}
		return null;
	},
	
	getCategories : function()
	{
		return data.categories;
	},
	
	toggleGroup : function(id)
	{
		//var el = this.ul_lookup.get(id);
		//if (el) el.className = (el.className == 'closed') ? 'open' : 'closed';
		
		this.ul_lookup.each(function(v,k){
			v.className = (k == id) ? 'open' : 'closed';
		});
	}
	
	
});

/********************************************************/


in_package('mapsack.mapping');

mapsack.mapping.MarkerList = new Class({
	
	map_view : null,
	el : null,
	item_lookup : null,
	
	initialize: function(el, mv)
	{
		this.el = $(el);
		this.setMapView(mv);
		this.updateItems();
	},
	
	setMapView : function(map_view)
	{
		this.map_view = map_view;
		//GEvent.addListener(map_view.getGMap(), 'dragend', this.updateItems.bind(this));
		
		var mm = this.map_view.getMarkerManager(); 
		mm.addEvent('markerHover', this.hilightItem.bind(this));
		mm.addEvent('markerDeHover', this.dehilightItem.bind(this));
		mm.addEvent('itemsUpdated', this.updateItems.bind(this));
	},
	
	getMapView : function()
	{
		return this.map_view;
	},
	
	updateItems : function()
	{
		var items = this.map_view.getMarkerManager().getItems();
		
		this.buildList(items);
	},
	
	buildList : function(items)
	{
		this.el.innerHTML = '';
		this.item_lookup = new Hash();
		
		for(var i=0; i < items.length; i++)
		{
			if (!items[i].is_visible) continue;
			
			var li = new Element('li');
			li._item_id = items[i].id;
			li.innerHTML = '<a href="#" onclick="return false;">'+items[i].title+'</a>';
			li._list = this;
			li.onclick = this.itemClicked;
			li.onmouseover = this.itemMouseover;
			li.onmouseout = this.itemMouseout;
			
			this.item_lookup.set(items[i].id, li);
			
			this.el.appendChild(li);
		}
	},
	
	itemClicked : function()
	{
		this._list.getMapView().getMarkerManager().openInfoWindowById(this._item_id);
	},
	
	itemMouseover : function()
	{
		this._list.getMapView().getMarkerManager().hilightMarkerById(this._item_id);
	},
	
	itemMouseout : function()
	{
		this._list.getMapView().getMarkerManager().dehilightMarkerById(this._item_id);
	},
	
	
	hilightItem : function(id)
	{
		if (!this.item_lookup.hasKey(id)) return;
		this.item_lookup.get(id).className = 'hover';
	},
	
	dehilightItem : function(id)
	{
		if (!this.item_lookup.hasKey(id)) return;
		this.item_lookup.get(id).className = '';
	}
	
});

mapsack.mapping.EditorMarkerList = new Class({
	
	map_view : null,
	el : null,
	
	initialize: function(el, mv)
	{
		this.el = $(el);
		this.setMapView(mv);
		this.updateItems();
	},
	
	setMapView : function(map_view)
	{
		this.map_view = map_view;
	},
	
	getMapView : function()
	{
		return this.map_view;
	},
	
	updateItems : function()
	{
		var items = this.map_view.getMarkerManager().getItems();
		
		this.buildList(items);
	},
	
	buildList : function(items)
	{
		this.el.innerHTML = '';
		
		for(var i=0; i < items.length; i++)
		{
						
			var li = new Element('li');
			li._item_id = items[i].id;
			li.innerHTML = '<a href="#" onclick="return false;">'+items[i].title+'</a>';
			li._list = this;
			li.onclick = this.itemClicked;
			li.onmouseover = this.itemMouseover;
			li.onmouseout = this.itemMouseout;
			
			this.el.appendChild(li);
		}
	},
	
	itemClicked : function()
	{
		this._list.getMapView().getMarkerManager().openInfoWindowById(this._item_id);
	},
	
	itemMouseover : function()
	{
		this._list.getMapView().getMarkerManager().hilightMarkerById(this._item_id);
	},
	
	itemMouseout : function()
	{
		this._list.getMapView().getMarkerManager().dehilightMarkerById(this._item_id);
	}
	
	
});






in_package('mapsack.mapping.infowindow');

mapsack.mapping.infowindow.EditableInfoWindow = new Class({
	
	map_view : null,
	
	initialize : function(map_view)
	{
		this.map_view = map_view;
	},
	
	show : function(item, marker)
	{
		
		if (item.body == null) item.body_html = '';
		
		var html = 	'<div class="ms_speech">'+
					'<h3 class="title">'+item.title+'</h3>'+
					'<img class="tmb" src="'+item.img_url_tmb+'" />'+
					'<p class="body">'+item.body_html+'</p>'+
					'<p class="ms_speech_admin">'+
					'<a href="javascript: MyMap.view.editMarkerClicked('+item.id+');">Edit</a> '+
					'<a href="javascript: MyMap.view.moveMarkerClicked('+item.id+');">Move</a> '+
					'<a href="javascript: MyMap.view.deleteMarkerClicked('+item.id+');">Delete</a>'+
					'</p></div>';

		this.map_view.getGMap().openInfoWindowHtml(marker.getPoint(), html);
		
	},
	
	hide : function()
	{
		this.map_view.getGMap().closeInfoWindow();
	}
	
});


in_package('mapsack.mapping.infowindow');

mapsack.mapping.infowindow.InfoWindow = new Class({
	
	map_view : null,
	
	initialize : function(map_view)
	{
		this.map_view = map_view;
	},
	
	show : function(item, marker)
	{
		
		if (item.body_html == '') item.body_html = '';		

		/*var html = 	'<div class="ms_speech">'+
					'<h3 class="title">'+item.title+'</h3>'+
					'<img class="tmb" src="'+item.img_url_tmb+'" />'+
					'<p class="body">'+item.body_html+'</p>'+
					((item.link_url) ? '<p><a href="'+item.link_url+'">'+item.link_title+'</a></p>' : '')+
					'<p id="popup_buttons"></p>'+
					'</div>';*/
					
		var html = 	'<div class="ms_dc_speech">'+
					'<h3 class="title">'+item.title+'</h3>'+
					'<table>'+
					'<tr>'+
					'<td class="left">'+
						item.body_html+
					'</td>'+
					'<td class="right" rowspan="2">'+
						'<div style="width: 100px; height: 100px; padding-bottom: 1px; text-align: center;"><img class="tmb" src="'+item.img_url_sml+'" /></div>'+
						'<div id="popup_buttons"></div>'+
					'</td>'+
					'</tr>'+
					'<tr>'+
					'<td>'+
						((item.link_url) ? '<p><a target="_blank" href="'+item.link_url+'">'+item.link_title+'</a></p>' : '')+
					'</td>'+
					'</tr>'+
					'</table>';

		this.map_view.getGMap().openInfoWindowHtml(marker.getPoint(), html);
		
		var a = new Element('a');
		a.innerHTML = 'Zoom';
		a.href = '#';
		var _this = this;
		a.onclick = function(){_this.map_view.zoomToItem(item);};
		$('popup_buttons').appendChild(a);
	},
	
	hide : function()
	{
		this.map_view.getGMap().closeInfoWindow();
	}
	
});

mapsack.mapping.infowindow.DCInfoWindow = new Class({
	
	map_view : null,
	
	initialize : function(map_view)
	{
		this.map_view = map_view;
	},
	
	show : function(item, marker)
	{
		
		var category = Map.view.category_list.findCatById(item.category_id);
		
		if (category['class'] == 'textlabel')
		{
			this.map_view.zoomToItem(item);
			return;
		}
		
		if (item.body_html == '') item.body_html = '';		

		var logo = '/images/partner/dc/logo.png';
		
		if (data.map.account_id == 5)
		{
			logo = '/images/partner/hb/logo.png';
		}

		var html = 	'<div class="ms_dc_speech">'+
					'<h3 class="title">'+item.title+'</h3>'+
					'<table>'+
					'<tr>'+
					'<td class="left">'+
						item.body_html+
					'</td>'+
					'<td class="right">'+
						'<div style="width: 100px; height: 100px; padding-bottom: 1px; text-align: center;"><img class="tmb" src="'+item.img_url_sml+'" /></div>'+
					'</td>'+
					'</tr>'+
					'<tr>'+
					'<td>'+
						((item.link_url) ? '<p><a target="_blank" href="'+item.link_url+'">'+item.link_title+'</a></p>' : '')+
						'<a target="_blank" href="'+item.link_url+'"><img src="'+logo+'" width="211" height="41" /></a>'+
					'</td>'+
					'<td><div id="popup_buttons"></div></td>'
					'</tr>'+
					'</table>';
					
					//'<img class="tmb" src="'+item.img_url_tmb+'" />'+
					//'<p class="body">'+item.body_html+'</p>'+
					//((item.link_url) ? '<p><a href="'+item.link_url+'">'+item.link_title+'</a></p>' : '')+
					//'<p id="popup_buttons"></p>'+
					//'</div>';

		//this.map_view.getGMap().openInfoWindowHtml(marker.getPoint(), html);
		this.map_view.getGMap().openInfoWindowHtml(marker.getPoint(), html);
		
		
		var _this = this;

		setTimeout(function(){
			if (item.link_url_other) _this.addMapButton('Video', '/images/icons/dc_video_icon.gif', function(){window.location.href=item.link_url_other;});
		
			_this.addMapButton('Zoom in', '/images/icons/png8/magnifier_zoom_in.png', function(){_this.map_view.zoomToItem(item);});
		
			_this.addMapButton('Zoom out', '/images/icons/png8/magnifier_zoom_in.png', function(){_this.map_view.zoomFromItem(item);});
		}, 100);
	},
	
	addMapButton : function(text, icon, onclick)
	{
		var outer = new Element('div');
		var a = new Element('a');
		a.innerHTML = text;
		a.href = '#';
		a.style.background = 'url('+icon+') left no-repeat';
		a.style.padding = '3px 3px 3px 16px';
		outer.style.padding = '3px 0px';
		a.onclick = onclick;
		outer.appendChild(a);
		
		$('popup_buttons').appendChild(outer);
	},
	
	hide : function()
	{
		this.map_view.getGMap().closeInfoWindow();
	}
	
});



mapsack.mapping.DefaultIconFactory = new Class({
	
	getMarkerIcon : function(item)
	{
		return '/images/markers/food.png';
	},
	
	getMarkerIconHilight : function(item)
	{
		return '/images/markers/hotel.png';
	},
	
	setMarkerIcon : function(marker, item)
	{
		
		//Get category
	
		if (item.category_id == 0)
		{
			this.setDot(marker, item);
			return;
			
		}
	
		var category = null;
		
		for(var i=data.categories.length-1; i>=0; i--)
		{
			category = data.categories[i];
			
			if (category.category_id == item.category_id) break;
		}
		
		
		if (!category) return;
		
		var cls = category['class'];
		
		if (cls == 'textlabel')
		{
			this.setDot(marker, item);
			return;	
		}
		
		//marker._icon = item.img_url_tmb;
		marker._icon = '/images/markers/'+cls+'.png';
		marker._hilightIcon = '/images/markers/'+cls+'.png';
		//marker._icon = this.getMarkerIcon(item);
		//marker._hilightIcon = this.getMarkerIconHilight(item);
		
		marker.setIcon(this.getBaseMarkerIcon());
		
		marker.setImage(marker._icon);
		marker.setMode(0);
	},
	
	setDot : function(marker, item)
	{
		var icon = new GIcon();
		icon.shadow = "/images/markers/orange/dot.png";
		icon.image = "/images/markers/orange/dot.png";
		icon.iconSize = new GSize(12, 12);
		
		icon.shadowSize = new GSize(12,12);
		icon.iconAnchor = new GPoint(6, 6);
		
		marker.setIcon(icon);
		marker.setMode(1);
	},
	
	getBaseMarkerIcon : function()
	{
		var icon = new GIcon();
		icon.shadow = "/images/markers/shadow.png";
		icon.image = "/images/markers/food.png";
		icon.iconSize = new GSize(21, 26);
		
		icon.shadowSize = new GSize(35, 26);
		icon.iconAnchor = new GPoint(6, 26);
		return icon;
	},
	
	getBaseMarkerIcon2 : function()
	{
		var icon = new GIcon();
		icon.shadow = "/images/markers/orange/dot.png";;
		icon.image = "/images/markers/food.png";
		icon.iconSize = new GSize(12, 12);
		
		icon.shadowSize = new GSize(12, 12);
		icon.iconAnchor = new GPoint(6,6);
		return icon;
	}
	
});


