<script type="text/javascript">
	function iterisGetIconImgByType(event_id) {
		var metastruct = getFeatureByAttribute('fid', event_id);
		var img = metastruct.layer.legendIcon;
		return img;
	}
	function quick_jump_event_browser(event_id) {
		$.getJSON('report-json.pl?idents='+ encodeURIComponent([event_id]), function(reports) {
			var markup = $('#report-formatting').jqote({event_list: reports});
			fill_info(markup);
		});
		var metastruct = getFeatureByAttribute('fid', event_id);
		var center_point = metastruct.feature.geometry.coordinates;
		map.setCenter(center_point);
		map.zoomTo(12);
		var lName = metastruct.layer.layerName, cName = lName+"-cluster";
		map.moveLayer(cName, "top");
		map.moveLayer(lName, "top");
		if (!$('button#btn_'+lName).hasClass('active')) {
			$('button#btn_'+lName).trigger('click');
		}
	}
	function quick_jump_event_browser_lite(event_id) {
		var metastruct = getFeatureByAttribute('fid', event_id);
		var bounds = metastruct.feature.geometry.bounds;
		var center_point = new OpenLayers.LonLat((bounds.left + bounds.right) / 2, (bounds.top  + bounds.bottom) / 2);
		map.setCenter(center_point);
		map.zoomToScale(54168, true);
	}
	function get_sign_width(phases) {
	var long_string = 10; // min string length
	for(var i in phases) {
		var lines = phases[i].split('<br>');

		for(var j in lines) {
			long_string = (lines[j].length > long_string) ? lines[j].length : long_string;
		}
	}
	var sign_width = ((long_string * 7) + 4);
	return sign_width + 'px';
}
</script>
<script type="text/x-jqote-template" id="report-formatting">
	<% for(var k in this.event_list) { %>
		<% var evt = this.event_list[k]; %>
		<% var event_flag = (evt.event_type == 'dms'  &&  evt.report.match(/<hr>/g)) ? 'multi_dms' : 'normal'; %>
		<table class="report_table <%= event_flag %>" cellpadding="0" cellspacing="0">
		<tr>
			<td class="icon_type menu_hdr_gradient" valign="middle">
				<% var imgsrc = iterisGetIconImgByType(evt.id); %>
				<% if((evt.event_type=="special_event")||(evt.event_type=="general_info")) { %>
					<% if(evt.event_type=="special_event") { %>
						<img src="atis-static.iteriscdn.com/WebApps/SC/SafeTravel4/v1.0/images/map_icons/mappin_special_event_c.png?v=[% options.config.app_version %]" class="legend_icon" />
					<% } else { %>
						<img src="atis-static.iteriscdn.com/WebApps/SC/SafeTravel4/v1.0/images/map_icons/mappin_general_info_c.png?v=[% options.config.app_version %]" class="legend_icon" />
					<% } %>
				<% }
				else { %>
					<img src="<%= imgsrc %>" class="legend_icon" />
				<% } %>
			</td>
			<td class="title menu_hdr_gradient" valign="middle">
				<%= evt.label %>
				<% if(evt.display_time) { %>
					<div class="last_update"> (last updated <%= evt.display_date %> at <%= evt.display_time %>)</div>
				<% } %>
			</td>
		</tr>
		<tr>
			<td colspan="2" class="body <%= evt.event_type %>">
				<% if(event_flag == 'multi_dms') { %>
					<% var phases = evt.report.split('<hr>'); %>
					<div class="phase0_container">
						<div class="<%= evt.event_type %> phase0" style="width: <%= get_sign_width(phases) %>"><%= phases[0] %></div><br/>
						<div class="current_phase phase0">(phase 1 of 2)</div>
					</div>
					<div class="phase1_container" style="display: none;">
						<div class="<%= evt.event_type %> phase1" style="width: <%= get_sign_width(phases) %>"><%= phases[1] %></div><br/>
						<div class="current_phase phase1">(phase 2 of 2)</div>
					</div>
				<% } else if (evt.event_type=="vsl") { %>
					<div class="<%= evt.event_type %>" >
						<%= evt.report %>
					</div>
				<% } else { %>
					<div class="<%= evt.event_type %>">
						<%= evt.report %>
					</div>
				<% } %>
			</td>
		</tr>
		<% if(this.add_map_link) { %>
			<tr>
				<td colspan="2" class="quick_jump <%= evt.event_type %>">
					<span class="<%= evt.event_type %> quick_jump" onclick="quick_jump_event_browser('<%= evt.id %>');">
					Show on Map
					</span>
				</td>
			</tr>
		<% } %>
		<% if(this.add_map_link_lite) { %>
			<tr>
					<td colspan="2" class="quick_jump <%= evt.event_type %>">
						<span class="<%= evt.event_type %> quick_jump" onclick="quick_jump_event_browser_lite('<%= evt.id %>');">
							Show on Map
						</span>
					</td>
					</tr>
				<% } %>
		</table>
	<% } %>
</script>
