// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
 // Initialization
 this.setValues(opt_options);

 // Label specific
 var span = this.span_ = document.createElement('span');
 var table = this.table_ = document.createElement('table');	// 10/1/11
 span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
                      'white-space: nowrap; border: 1px solid black; ' +
                      
                      'padding: 0px;-moz-border-radius: 2px;-webkit-border-radius:  2px;z-index:1000;';
//                      'padding: 2px; background-color: red';
// could do with circularity, fixed size/variable font and semi-transparency here

 
 var div = this.div_ = document.createElement('div');
 div.style.cssText = 'position: absolute; display: none;';
 div.style.cssText = div.style.cssText + 'opacity:1;filter:alpha(opacity=100);';
 //div.style.cssText = div.style.cssText + 'opacity:0.4;filter:alpha(opacity=40);';	// transparency/opacity
 
 table.style.cssText = 'position: absolute;border: 1px solid black;text-align:center;white-space: nowrap;';
 // http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
 // http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text
 
 div.appendChild(table); 	// 10/1/11

 
 
 var poibookid = this.poibookid_;
 var lng = this.lat_;
 var lng = this.lng_;
};

Label.prototype = new google.maps.OverlayView;



// Implement onAdd
Label.prototype.onAdd = function() {
	this.div_.style.visibility = "hidden";	// REMmed this out because PoI show wasn't making labels visible (where there were no listeners) - maybe restore if markers too ugly at start
	var pane = this.getPanes().overlayMouseTarget;		// put labels on overlayMouseTarget (layer 5 of 6) because directions were obscuring them on overlayLayer, making them unclickable
 pane.appendChild(this.div_);

 // Ensures the label is redrawn if the text or position is changed.
 var me = this;
 this.listeners_ = [
   google.maps.event.addListener(this, 'position_changed',
       function() { me.draw(); }),
   google.maps.event.addListener(this, 'text_changed',
       function() { me.draw(); })
 ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
 this.div_.parentNode.removeChild(this.div_);

 // Label is removed from the map, stop updating its position/text.
 for (var i = 0, I = this.listeners_.length; i < I; ++i) {
   maps.google.event.removeListener(this.listeners_[i]);
 }
};

// Implement draw
Label.prototype.draw = function() {
 var projection = this.getProjection();
 var position = projection.fromLatLngToDivPixel(this.get('position'));

 var div = this.div_;
 div.style.left = position.x + parseInt((Math.random()-0.5)*50) + 'px';		// random displacement +/- 25 pixels
 div.style.top = position.y + parseInt((Math.random()-0.5)*50) + 'px';
 div.style.display = 'block';
 
 div.title = this.get('title');
 
 this.span_.style.backgroundColor = this.get('colour');	// get colour for label
 if (this.span_.style.backgroundColor == 'black')
	 {
	 	this.span_.style.borderColor = 'white';
	 	this.span_.style.borderStyle = 'double';
	 }
 
 this.table_.style.backgroundColor = this.get('colour');	// get colour for label
 if (this.table_.style.backgroundColor == 'black')
	 {
	 	this.table_.style.borderColor = 'white';
	 	this.table_.style.borderStyle = 'double';
	 }

 //If not IE, skip leading <TABLE> and add <BR /> between rows (also no border ?)


 var clickListenerString;
 // need to get to TABLE element
 clickListenerString = " onmouseup = " + String.fromCharCode(34) + "javascript:function(e){var rightclick;if (!e) var e = window.event;if (e.which) rightclick = (e.which == 3);else if (e.button) rightclick = (e.button == 2);/*alert('Rightclick: ' + rightclick);*/ if (rightclick==false){toggleWaypoint(this,new google.maps.LatLng(" + this.getLat() + "," + this.getLng() + ")," + this.get('poibookid') + "," + this.get('text') + " " + this.get('ordinal') + "," + this.get('bookId') + "," + this.get('description') + "," + this.get('poiid') + ");}else{new google.maps.InfoWindow({content:'<HTML><DIV class='content'><IMG SRC='images/GGlogo6.png' STYLE='float:right;margin:5px;' WIDTH=50 HEIGHT=50><P><BUTTON onclick='getNearbyWiki(" + this.getLat() + ',' + this.getLng() +  ')">Show Wikipedia articles</BUTTON></P><P><BUTTON onclick="getNearbyHotels(' + this.getLat() + ',' + this.getLng() + ',' + 'document.getElementById(' + String.fromCharCode(39) + 'AccomSelect' + this.get('poibookid') + String.fromCharCode(39) + ').value)">Show Accommodation</BUTTON>&nbsp;Within :&nbsp;<SELECT id=' + String.fromCharCode(39) + 'AccomSelect' + this.get('poibookid') + String.fromCharCode(39) + "><OPTION VALUE=1>1 km<OPTION VALUE=5>5 km<OPTION VALUE=10>10 km<OPTION VALUE=20>20 km<OPTION VALUE=50>50 km</SELECT></P></DIV></HTML>" + String.fromCharCode(39) + ",position:map.getCenter()}).open(map);}}" + String.fromCharCode(34);
 clickListenerString = " onclick = " + String.fromCharCode(34) + "javascript:alert('leftclick on label');toggleWaypoint(this,new google.maps.LatLng(" + this.getLat() + "," + this.getLng() + ")," + this.get('poibookid') + "," + this.get('text') + " " + this.get('ordinal') + "," + this.get('bookId') + "," + this.get('description') + "," + this.get('poiid') + ");" + String.fromCharCode(34);
 clickListenerString = " onclick = " + String.fromCharCode(34) + "javascript:alert('leftclick on label');" + String.fromCharCode(34)
  
 // http://www.howtocreate.co.uk/tutorials/javascript/domtables
 
 tbody = document.createElement('tbody');
 tr1 = document.createElement('tr');
 tr2 = document.createElement('tr');
 tr3 = document.createElement('tr');
 tr4 = document.createElement('tr');
  td1 = document.createElement('td');
  td2 = document.createElement('td');
  td3 = document.createElement('td');
  td4 = document.createElement('td');
  
  if (this.table_.rows.length < 1)
  {
 
 if (this.get('fontstyle')=='italic')
 {
	 td1.innerHTML = '<SPAN style="font-family:Verdana;font-size:12pt;font-weight:italic" >' + this.get('text').toString() + '</SPAN><SPAN style="font-family:Verdana;font-size:6pt">' + this.get('ordinal').toString() + '</SPAN>';
	 td2.innerHTML = '<SPAN style="font-family:Verdana;font-size:8pt">' + this.get('description') + '</SPAN>';
	 td3.innerHTML = this.get('genreIds'); 

 }
 else if (this.get('fontstyle')=='bold')
 {
	 td1.innerHTML = '<SPAN style="font-family:Verdana;font-size:12pt;font-weight:bold" >' +  this.get('text').toString() + '</SPAN><SPAN style="font-family:Verdana;font-size:6pt">';
	 td2.innerHTML = '<SPAN style="font-family:Verdana;font-size:8pt">' + this.get('description') + '</SPAN>';
	 td3.innerHTML = this.get('genreIds'); 
 }
 else
 {	
 	td1.innerHTML = '<SPAN style="font-family:Verdana;font-size:12pt" >' + this.get('text').toString() + '</SPAN><SPAN style="font-family:Verdana;font-size:6pt">' + this.get('ordinal').toString() + ' ' + this.get('description')  + '</SPAN>' + this.get('genreIds');
 	td2.innerHTML = '<SPAN style="font-family:Verdana;font-size:8pt">' + this.get('description') + '</SPAN>';
	 td3.innerHTML = this.get('genreIds'); 
 }
 
 	this.table_.appendChild(tbody);
	if (this.table_.style.backgroundColor != 'black')	// don't print large title row if only a loi/location (without page#)
	{
	 	tr1.appendChild(td1);
	 	 tbody.appendChild(tr1);
	}
 	 tr2.appendChild(td2);
 	 tbody.appendChild(tr2);

 	 var genreIds = this.get('genreIds');
 	 var genreIconString = "";
 	 var genreDescription = "";
 	 var iconRows = new Array();
 	 var iconCells = new Array();
 	 var intRowCounter = 0;	// start at zero to ease array indexing of cells
 	 
 	 if (genreIds != null)
 	 {
 		 var genreIdsSplit = genreIds.split(",");
 		 for (i=0;i<genreIdsSplit.length;i++)
 		 {
 			 if (parseInt(genreIdsSplit[i]) == globalNumberGenres)	// if comprehensive genres
 			 {
 				for (j=0;j<globalNumberGenres;j++)
 				{
 					genreIdsSplit[j] = j + 1;	// pad out array with entries for all existing genres
 				}
 			 }
 		 }
 		 
 		 // could weed out duplicate genreids here . . .
 		 
 		 for (i=0;i<genreIdsSplit.length-1;i++)	// for every genre (-1 for avoiding overstepping?)
 		 {
 			for (j=i+1;j<genreIdsSplit.length;j++)//
 			{
 				if (genreIdsSplit[i]==genreIdsSplit[j])
 				{
 					genreIdsSplit.splice(j,1);		// take out any duplicated genreids
 				}
 			}
 		 }
 		 
 		 
 		iconRows[0] = document.createElement('tr');
 		iconCells[0] = document.createElement('td');
 		 
 		 for (i=0;i<genreIdsSplit.length;i++)	// for every genre, add an icon
 		 {
 			 if (navigator.appName == "Microsoft Internet Explorer")
 			 {
 				 if (document.getElementById('genrelabel' + genreIdsSplit[i]))	// necessary to test for null else IE gets teasy
 					 if (document.getElementById('genrelabel' + genreIdsSplit[i]).innerHTML.substring(document.getElementById('genrelabel' + genreIdsSplit[i])) != null)
 						 genreDescription = document.getElementById('genrelabel' + genreIdsSplit[i]).innerHTML.substring(document.getElementById('genrelabel' + genreIdsSplit[i]).innerHTML.indexOf('globalGenresHidden++') + 67 -((genreIdsSplit[i]<10) ? 1 : 0)); 				 
 			 }			// looking (if IE) for javascript segment characters in front of genre description text (minus 1 to allow for single digits if genre id less than 10)	//document.getElementById('genrelabel' + genreIdsSplit[i]).innerHTML.indexOf('globalGenresHidden++') +  
 			 else
 			 {
 				 if (document.getElementById('genrelabel' + genreIdsSplit[i]) != null)
 					 genreDescription = document.getElementById('genrelabel' + genreIdsSplit[i]).textContent;
 			 }

 			 genreIconString += '<IMG SRC="images/genreicons/genreicon' + genreIdsSplit[i] + '.png" WIDTH="20" HEIGHT="20" TITLE="' + genreDescription + '">';
 			 
 			 if ((i+1)%6 == 0)	// after every x images
 			 {		// make a new row
 				 iconRows[intRowCounter] = document.createElement('tr');
 		 		iconCells[intRowCounter] = document.createElement('td');
 				 iconCells[intRowCounter].innerHTML = genreIconString;	// add string to row after x genre icons
 				genreIconString = '';	// wipe string after adding to just-added row
  				intRowCounter++;	// increment counter to begin a new row

 			 }
 		 }	// end of genre icon adding for loop

 		 iconRows[intRowCounter] = document.createElement('tr');
		 iconCells[intRowCounter] = document.createElement('td'); 		 
		 iconCells[intRowCounter].innerHTML = genreIconString;	// add icons to latest row reached
		 intRowCounter++;
 		 
		 for (i=0;i<intRowCounter;i++)
 		 {
	 	 	 iconRows[i].appendChild(iconCells[i]);	// take advantage of jscript implicit indexing to set up rows with cells (of genre icon IMGs)
	 	 	 tbody.appendChild(iconRows[i]);
 		 }

 		 
 	 
 	 }	// end of check for empty genreIds

  }	// if loop to avoid duplication of cells
 
 };

//Label.prototype.opacity = function(opacity_value) {  if (this.div_) {    /*this.div_.style.visibility = "hidden";*/ if (navigator.appName == "Microsoft Internet Explorer"){this.div_.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=opacity_value;} else {this.div_.style.opacity = opacity_value/100;}  }}
 Label.prototype.opacity = function(opacity_value) {  if (this.div_) {    /*this.div_.style.visibility = "hidden";*/ if (navigator.appName == "Microsoft Internet Explorer"){if (this.div_.filters.length > 0) this.div_.filters.item("alpha").Opacity=opacity_value;else this.div_.style.filter ='alpha(Opacity=' + opacity_value + ')'; } else {this.div_.style.opacity = opacity_value/100;}  }}
 Label.prototype.hide = function() {  if (this.div_) {    this.div_.style.visibility = "hidden"; }}
Label.prototype.show = function() {  if (this.div_) {    this.div_.style.visibility = "visible";  }}
Label.prototype.toggle = function() {  if (this.div_) {    if (this.div_.style.visibility == "hidden") {      this.show();    } else {      this.hide();    }  }}

Label.prototype.getDiv = function() {  if (this.div_) {    return this.div_;  }}
Label.prototype.setWhite = function() {  if (this.div_) { if (this.table_.style.backgroundColor != 'black') {this.table_.style.color = 'white';this.table_.style.color='white';} else {this.table_.style.color = 'red';}  }}	// set to show up
Label.prototype.setBlack = function() {  if (this.div_) { if (this.table_.style.backgroundColor != 'black') {this.table_.style.color = 'black';this.table_.style.color='black';} else {this.table_.style.color = 'white';} }}	// back to normal


Label.prototype.setBorderAsArea = function() {if (this.div_) {this.div_.style.borderStyle='inset';/*this.span_.style.borderWidth='10px';*/} }
// div.style may be more persistent 

Label.prototype.setPoibookid = function(myPoibookid) { this.poibookid_ = myPoibookid; }	// allow, but don't force, poibookid to be set, stored & gotten
Label.prototype.getPoibookid = function() { return this.poibookid_; }
Label.prototype.setDescription = function(Description) { this.div_.title = Description + '. ' + this.div_.title; }

Label.prototype.setLat = function(lat) { this.lat_ = lat; }	// allow, but don't force, poibookid to be set, stored & gotten
Label.prototype.setLng = function(lng) { this.lng_ = lng; }	// allow, but don't force, poibookid to be set, stored & gotten
Label.prototype.getLat = function() { return this.lat_; }	// allow, but don't force, poibookid to be set, stored & gotten
Label.prototype.getLng = function() { return this.lng_; }	// allow, but don't force, poibookid to be set, stored & gotten