<script type="text/javascript">
	var iteris_icon_hover = {
		abbr_to_full_dir: function(dir) {
			switch(dir) {
				case 'N': return 'Northbound';
				case 'S': return 'Southbound';
				case 'E': return 'Eastbound';
				case 'W': return 'Westbound';
				case 'B': return 'Both Directions';
				default: return 'N/A';
			}
		},
		waze_subtype: function(type) {
			switch(type) {
				case "ACCIDENT_MINOR": return "Minor Accident";
				case "ACCIDENT_MAJOR": return "Major Accident";
				case "JAM_MODERATE_TRAFFIC": return "Moderate Traffic";
				case "JAM_HEAVY_TRAFFIC": return "Heavy Traffic";
				case "JAM_STAND_STILL_TRAFFIC": return "Stand Still Traffic";
				case "HAZARD_ON_ROAD": return "Hazard On Road";
				case "HAZARD_ON_ROAD_OBJECT": return "Object On Road";
				case "HAZARD_WEATHER_FOG": return "Weather - Fog";
				case "HAZARD_WEATHER_HAIL": return "Weather - Hail";
				case "HAZARD_WEATHER_HEAVY_RAIN": return "Weather - Heavy Rain";
				case "HAZARD_WEATHER_HEAVY_SNOW": return "Weather - Heavy Snow";
				case "HAZARD_WEATHER_FLOOD": return "Weather - Flood";
				case "HAZARD_WEATHER_TORNADO": return "Weather - Tornado";
				case "HAZARD_WEATHER_HEAT_WAVE": return "Weather - Heat Wave";
				case "HAZARD_WEATHER_HURRICANE": return "Weather - Hurricane";
				case "HAZARD_WEATHER_FREEZING_RAIN": return "Weather - Freezing Rain";
				case "HAZARD_ON_ROAD_LANE_CLOSED": return "Lane Closed";
				case "HAZARD_ON_ROAD_OIL": return "Oil On Road";
				case "HAZARD_ON_ROAD_ICE": return "Ice On Road";
				case "HAZARD_ON_ROAD_CONSTRUCTION": return "Road Construction";
				case "HAZARD_ON_ROAD_CAR_STOPPED": return "Car Stopped On Road";
				case "ROAD_CLOSED_HAZARD": return "Road Closed Due To Hazard";
				case "ROAD_CLOSED_CONSTRUCTION": return "Road Closed Due To Construction";
				case "ROAD_CLOSED_EVENT": return "Road Closed Due To Event";
				case "HAZARD_ON_SHOULDER_CAR_STOPPED": return "Hazard - Car Stopped On Shoulder";
				default: return "";
			}
		},
		convert_timestamp: function(etime) {
			return moment(etime*1000).tz('America/New_York').format('MMM DD YYYY, h:mm A');
		},
		stream_available: function(rtsp) {
			if (typeof rtsp === "undefined") {
				return "Provides Still Images Only";
			} else {
				return "Has Streaming Video";
			}
		}
	};

	function cleanMessage(message){
		var cleanText;
		cleanText = $(message).text();
		if(cleanText.length > 23){
			cleanText = cleanText.substring(0, 20);
			cleanText += "...";
			}
		return cleanText;
	}
</script>
<style type="text/css">
    #pu_balloon_container {
        background: #ECF0FF;
        width: 100%;
    }

    .popup_table {
		width: 100%;
    }

    .popup_table .header {
        height: 28px;
        line-height: 12px !important;
        text-align: center;
        font: bold 12px 'Arial';
        color: #000B33;
        width: 100%;
    }

    .popup_table .image {
        width: 30px;
    }

/*
    .popup_table .header img.icon {
        width: 16px;
        height: 16px;
        padding: 0px 4px;
        vertical-align: middle;
        text-align: center;
    }
*/

    .popup_table td.subtitle,
    .popup_table td.other_row,
    .popup_table td.centered_row {
        border-top: 1px dashed #CCCCCC;
    }

		.popup_table td.centered_row {
			text-align: center;
		}

    .popup_table  td.label {
        font-weight: bold;
        color: #444444;
        padding: 6px 8px 4px 2px;
        white-space: nowrap;
        vertical-align: top;
    }

    .popup_table td.data {
        padding-right: 6px;
    }

    .popup_table td.bold {
        font-weight: bold;
    }

		img.still {
			width: 200px;
		}
</style>
<script type="text/x-jqote-template" id="template-map-icon-hover">
<% if(this.derived.layer_name.match(/cams/g)) { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
			<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
			Camera
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="title label">
			Traffic Nearest to Camera is Traveling: <%= iteris_icon_hover.abbr_to_full_dir(this.feature.dir) %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Location: <%= this.feature.route %> @ <%= this.feature.cross_street %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="title label">
			Camera: <%= this.feature.name %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Still Image: <img class="still" src="<%= this.feature.url %>" />
		</td>
	</tr>
	<tr>
		<td colspan="2" class="centered_row label">
			This Camera <%= iteris_icon_hover.stream_available(this.feature.RTSP) %>
		</td>
	</tr>
</table>
<% } else if(this.derived.layer_name.match(/vspl/g)) { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
			<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
			<%= this.feature.road_type %>
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="title label">
			Name
		</td>
		<td class="title bold data">
			<%= this.feature.name %>
		</td>
	</tr>
	<tr>
		<td class="subtitle label">
			Speed
		</td>
		<td class="subtitle bold" style="background-color:rgb(<%= this.feature.color %>);">
			Speed Here: <%= this.feature.report %>
		</td>
	</tr>
	<tr>
		<td class="subtitle label">
			Location
		</td>
		<td class="subtitle bold data">
			<%= this.feature.location_description %>
		</td>
	</tr>
  <% if(this.derived.count > 1) { %>
	<tr>
		<td class="other_row label">
			Others
		</td>
		<td class="other_row data">
			This icon also represents <b><%= (this.derived.count - 1) %></b> other nearby signs. Click to see all.
		</td>
	</tr>
  <% } %>
</table>
<% } else if(this.derived.layer_name.match(/dmsg/g)) { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
			<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
			Message Sign
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="title label">
			Route <%= this.feature.route %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Direction <%= iteris_icon_hover.abbr_to_full_dir(this.feature.dir) %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Cross Street <%= this.feature.cross_street %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Click Icon to View Sign Information
		</td>
	</tr>
</table>
<% } else if(this.derived.layer_name.match(/incd$/g) || this.derived.layer_name.match(/hinc$/g)) { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
			<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
			<%= this.feature.headline %>
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="title label">
			Location: <%= this.feature.location_description %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Affected: <%= this.feature.lanes %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Expected Clear Time: <%= iteris_icon_hover.convert_timestamp(this.feature.expected_end) %>
		</td>
	</tr>
</table>
<% } else if(this.derived.layer_name == 'acon') { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
			<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
			<%= this.feature.headline %>
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="title label">
			Location: <%= this.feature.location_description %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Affected: <%= this.feature.lanes %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Expected Completion Time: <%= iteris_icon_hover.convert_timestamp(this.feature.expected_end) %>
		</td>
	</tr>
</table>
<% } else if(this.derived.layer_name == 'fcon') { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
			<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
			<%= this.feature.headline %>
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="title label">
			Location: <%= this.feature.location_description %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Affected: <%= this.feature.lanes %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Scheduled Start: <%= iteris_icon_hover.convert_timestamp(this.feature.start) %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Expected End: <%= iteris_icon_hover.convert_timestamp(this.feature.expected_end) %>
		</td>
	</tr>
</table>
<% } else if(this.derived.layer_name == 'info') { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
				<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
				General Info
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="title label">
			Title <%= this.feature.title %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Message <%= cleanMessage(this.feature.message) %>
		</td>
	</tr>
</table>
<% } else if(this.derived.layer_name == 'wacc') { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
				<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
				Waze Report
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="title label centered_row">
			<%= iteris_icon_hover.waze_subtype(this.feature.subtype) %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label centered_row">
			<%= this.feature.street %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label centered_row">
			<%= iteris_icon_hover.convert_timestamp(this.feature.unixtime) %>
		</td>
	</tr>
</table>
<% } else if(this.derived.layer_name == 'whaz') { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
				<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
				Waze Report
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="title label centered_row">
			<%= iteris_icon_hover.waze_subtype(this.feature.subtype) %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label centered_row">
			<%= this.feature.street %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label centered_row">
			<%= iteris_icon_hover.convert_timestamp(this.feature.unixtime) %>
		</td>
	</tr>
</table>
<% } else if(this.derived.layer_name == 'wtrf') { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
				<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
				Waze Report
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="title label centered_row">
			<%= iteris_icon_hover.waze_subtype(this.feature.subtype) %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label centered_row">
			<%= this.feature.street %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label centered_row">
			<%= iteris_icon_hover.convert_timestamp(this.feature.unixtime) %>
		</td>
	</tr>
</table>
<% } else if(this.derived.layer_name == 'wshd') { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
				<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
				Waze Report
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="title label centered_row">
			<%= iteris_icon_hover.waze_subtype(this.feature.subtype) %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label centered_row">
			<%= this.feature.street %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label centered_row">
			<%= iteris_icon_hover.convert_timestamp(this.feature.unixtime) %>
		</td>
	</tr>
</table>
<% } else if(this.derived.layer_name == 'spec') { %>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td class="header menu_hdr_gradient">
				<img src="<%= this.derived.legend_icon %>" class="icon" /><br/>
				Special Event
		</td>
	</tr>
</table>
<table class="popup_table" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2" class="title label">
			Title <%= this.feature.title %>
		</td>
	</tr>
	<tr>
		<td colspan="2" class="subtitle label">
			Message <%= cleanMessage(this.feature.message) %>
		</td>
	</tr>
</table>
<% } %>
</script>
