//Written by Alec Scaresbrook 2008
//www.scaresbrooks.co.uk
//This is coding to draw a Google map of the Congleton Cycle Network.  
//The coding is divided into four sections:
//Section 1: Javascript for Google map
//Section 2: Available markers
//Section 3: Map marker overlays
//Section 4: Line overlays
//
//This file runs in conjunction with markers.js and the image files in the 'markers' folder.

function load() {
//~Check to see if object exists
    if (document.getElementById("map"))
    {

//--------------Start - Section 1: Javascript for Google map 
       var map = "";
       function createMarker(point,html,icons) 
       {var emarker = new GMarker(point,icons);
        GEvent.addListener(emarker, "click", function() {
          emarker.openInfoWindowHtml(html);
        });return emarker;} 

//Create the map
     map = new GMap2(document.getElementById("map"));
//Map navigation control
     map.addControl(new GSmallMapControl());
//Map overview control
     var ovcontrol = new GOverviewMapControl(new GSize(170,170)); 
     map.addControl(ovcontrol);
//Type of map control
     map.addControl(new GMapTypeControl());
//Set the map centre using latitude and longitude co-ordinates and set the opening zoom level of the map. 
//The smaller the number, the smaller the scale. For example, replacing 14 with 1 will display the whole world.
     map.setCenter(new GLatLng(53.121951,-4.11644), 14);
//---------------End - Section 1: Javascript for Google map 

// --------------Start - Section 2: Available markers------------------
// icon70 - cycle route 70
// icon73 - cycle route 73
// icon55 - cycle route 55
// iconthink - road hazard
// iconorange
// iconblue
// iconyellow
// icondarkgreen
// iconred
// iconhelp - tourist information
// --------------End - Section 2: Available markers------------------

//---------------Start - Section 3: Map marker overlays
//Markers 1 - Route 70 
//Set point co-ordinates
   var point = new GLatLng(53.1704,-2.2488);
//This is the text that appears in the info window. Note that the double quotes are nested within the single quotes in this coding.
//Ensure there are no hard returns within the characters between the single quotes.
   var html = '<div style="width:240px">Dinorwic Quarry<p>See map:<a href="http://www.landscape-guides.co.uk" class=""stylenewrickylinks"">Dinorwic Quarry </a></p></div>';
//Choose a marker from the list above.
var title= '<div style="width:80px">dINORWIC</div>';

   var icontype = icon70;
//Create the marker

   var marker = createMarker(point,html,icontype);
//Add the overlay

   map.addOverlay(marker);
   
  
//ELABELS CODE
// ELabel.js 
//
//   This Javascript is provided by Mike Williams
//   Blackpool Community Church Javascript Team
//   http://www.commchurch.freeserve.co.uk/   
//   http://econym.googlepages.com/index.htm
//
//   This work is licenced under a Creative Commons Licence
//   http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.2      the .copy() parameters were wrong
// version 1.0      added .show() .hide() .setContents() .setPoint() .setOpacity() .overlap
// version 1.1      Works with GMarkerManager in v2.67, v2.68, v2.69, v2.70 and v2.71
// version 1.2      Works with GMarkerManager in v2.72, v2.73, v2.74 and v2.75
// version 1.3      add .isHidden()
// version 1.4      permit .hide and .show to be used before addOverlay()
// version 1.5      fix positioning bug while label is hidden
// version 1.6      added .supportsHide()
// version 1.7      fix .supportsHide()


      function ELabel(point, html, classname, pixelOffset, percentOpacity, overlap) {
        // Mandatory parameters
        this.point = point;
        this.html = html;
        
        // Optional parameters
        this.classname = classname||"";
        this.pixelOffset = pixelOffset||new GSize(0,0);
        if (percentOpacity) {
          if(percentOpacity<0){percentOpacity=0;}
          if(percentOpacity>100){percentOpacity=100;}
        }        
        this.percentOpacity = percentOpacity;
        this.overlap=overlap||false;
        this.hidden = false;
      } 
      
      ELabel.prototype = new GOverlay();

      ELabel.prototype.initialize = function(map) {
        var div = document.createElement("div");
        div.style.position = "absolute";
        div.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
        map.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(div);
        this.map_ = map;
        this.div_ = div;
        if (this.percentOpacity) {        
          if(typeof(div.style.filter)=='string'){div.style.filter='alpha(opacity:'+this.percentOpacity+')';}
          if(typeof(div.style.KHTMLOpacity)=='string'){div.style.KHTMLOpacity=this.percentOpacity/100;}
          if(typeof(div.style.MozOpacity)=='string'){div.style.MozOpacity=this.percentOpacity/100;}
          if(typeof(div.style.opacity)=='string'){div.style.opacity=this.percentOpacity/100;}
        }
        if (this.overlap) {
          var z = GOverlay.getZIndex(this.point.lat());
          this.div_.style.zIndex = z;
        }
        if (this.hidden) {
          this.hide();
        }
      }

      ELabel.prototype.remove = function() {
        this.div_.parentNode.removeChild(this.div_);
      }

      ELabel.prototype.copy = function() {
        return new ELabel(this.point, this.html, this.classname, this.pixelOffset, this.percentOpacity, this.overlap);
      }

      ELabel.prototype.redraw = function(force) {
        var p = this.map_.fromLatLngToDivPixel(this.point);
        var h = parseInt(this.div_.clientHeight);
        this.div_.style.left = (p.x + this.pixelOffset.width) + "px";
        this.div_.style.top = (p.y +this.pixelOffset.height - h) + "px";
      }

      ELabel.prototype.show = function() {
        if (this.div_) {
          this.div_.style.display="";
          this.redraw();
        }
        this.hidden = false;
      }
      
      ELabel.prototype.hide = function() {
        if (this.div_) {
          this.div_.style.display="none";
        }
        this.hidden = true;
      }
      
      ELabel.prototype.isHidden = function() {
        return this.hidden;
      }
      
      ELabel.prototype.supportsHide = function() {
        return true;
      }

      ELabel.prototype.setContents = function(html) {
        this.html = html;
        this.div_.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
        this.redraw(true);
      }
      
      ELabel.prototype.setPoint = function(point) {
        this.point = point;
        if (this.overlap) {
          var z = GOverlay.getZIndex(this.point.lat());
          this.div_.style.zIndex = z;
        }
        this.redraw(true);
      }
      
      ELabel.prototype.setOpacity = function(percentOpacity) {
        if (percentOpacity) {
          if(percentOpacity<0){percentOpacity=0;}
          if(percentOpacity>100){percentOpacity=100;}
        }        
        this.percentOpacity = percentOpacity;
        if (this.percentOpacity) {        
          if(typeof(this.div_.style.filter)=='string'){this.div_.style.filter='alpha(opacity:'+this.percentOpacity+')';}
          if(typeof(this.div_.style.KHTMLOpacity)=='string'){this.div_.style.KHTMLOpacity=this.percentOpacity/100;}
          if(typeof(this.div_.style.MozOpacity)=='string'){this.div_.style.MozOpacity=this.percentOpacity/100;}
          if(typeof(this.div_.style.opacity)=='string'){this.div_.style.opacity=this.percentOpacity/100;}
        }
      }

      ELabel.prototype.getPoint = function() {
        return this.point;
      }
      ELabel.prototype.U = function() {
        return this.point;
      }
      ELabel.prototype.V = function() {
        return this.point;
      }
      ELabel.prototype.W = function() {
        return this.point;
      }
      ELabel.prototype.X = function() {
        return this.point;
      }
      ELabel.prototype.Y = function() {
        return this.point;
      }
      ELabel.prototype.Z = function() {
        return this.point;
      }
	  
	  //var label = new ELabel(new GLatLng(53.145303,-4.128284), "Deiniolen", "styleelabel");
//map.addOverlay(label);
	  
//var label = new ELabel(new GLatLng(53.128852,-4.11532), "Vivian Quarry", "styleelabel");
//map.addOverlay(label);

//var label = new ELabel(new GLatLng(53.146719,-4.157124), "Brynrefail", "styleelabel");
//map.addOverlay(label);

var label = new ELabel(new GLatLng(53.120951,-4.11445), "National Slate Museum", "styleelabel");
map.addOverlay(label);

var label = new ELabel(new GLatLng(53.124654,-4.141502), "Glyn Rhonwy Quarries ", "styleelabel");
map.addOverlay(label);


var label = new ELabel(new GLatLng(53.111519,-4.117986), "Snowdon Mountain Railway ", "styleelabel");
map.addOverlay(label);

var label = new ELabel(new GLatLng(53.121178,-4.123167), " Llanberis Lake Railway", "styleelabel");
map.addOverlay(label);

var label = new ELabel(new GLatLng(53.126144,-4.126400), "Quarry Hospital Museum  ", "styleelabel");
map.addOverlay(label);

var label = new ELabel(new GLatLng(53.125968,-4.114739), "Padarn Country Park   ", "styleelabel");
map.addOverlay(label);

var label = new ELabel(new GLatLng(53.1313369,-4.125045), "Dinorwic Tramway ", "styleelabel");
map.addOverlay(label);

var label = new ELabel(new GLatLng(53.128646,-4.105798), "Dinorwic Quarries ", "styleelabel");
map.addOverlay(label);

var label = new ELabel(new GLatLng(53.118139,-4.119561), "Electric Mountain ", "styleelabel");
map.addOverlay(label);

 
 
 
//Markers 4 - Route 70 


   
   
   
   var point = new GLatLng(53.121951,-4.11644);
   var html = '<div style="width:240px"> Llanberis Lake Railway (2ft gauge running on 4ft Padarn Railway trackbed)<p><br> <img src="images/llanberislakerailway.jpg"><br><a href="http://www.locoperformance.co.uk/edition27/snowdonllanberis-gallery.htm" class="stylenewrickylinks"><br>link: Llanberis Lake Railway</a></p></div>';
 var title= '<div style="width:80px">  Llanberis Lake Railway</div>';
   var icontype = icondarkgreen;
   var marker = createMarker(point,html,title,icontype);
   map.addOverlay(marker);
   
   
   var point = new GLatLng(53.126174,-4.141502);
   var html = '<div style="width:240px">Glyn Rhonwy Quarries N.W. Llanberis<p><br><img src="images/glynrhonwyquarries.jpg"></p></div>';
 var title= '<div style="width:80px">Glyn Rhonwy Quarries</div>';
   var icontype = icondarkgreen;
   var marker = createMarker(point,html,title,icontype);
   map.addOverlay(marker);
   
   
      var point = new GLatLng(53.113219,-4.118586);
   var html = '<div style="width:240px">Snowdon Mountain Railway (800mm Gauge)<p><br><a href="http://www.snowdonrailway.co.uk/gallery.html" class="stylenewrickylinks">link: Snowdon Railway Photo Gallery</a></p></div>';
 var title= '<div style="width:80px">Snowdon Mountain Railway </div>';
   var icontype = icondarkgreen;
   var marker = createMarker(point,html,title,icontype);
   map.addOverlay(marker);
   

         var point = new GLatLng(53.121178,-4.115367);
   var html = '<div style="width:240px">  National Slate Museum, Llanberis<p><br><a href="http://www.museumwales.ac.uk/en/slate/" class="stylenewrickylinks">link: National Slate Musem</a></p></div>';
 var title= '<div style="width:80px"> National Slate Museum</div>';
   var icontype = icondarkgreen;
   var marker = createMarker(point,html,title,icontype);
   map.addOverlay(marker);
   
   
    var point = new GLatLng(53.125144,-4.119015);
   var html = '<div style="width:240px">Quarry Hospital Museum and Padarn Park<p><br><a href="http://www.llanberis.org/padarn.htm" class="stylenewrickylinks">link: Padarn Park</a></p></div>';
 var title= '<div style="width:80px">Quarry Hospital Museum  </div>';
   var icontype = icondarkgreen;
   var marker = createMarker(point,html,title,icontype);
   map.addOverlay(marker);
   
   
     var point = new GLatLng(53.125968,-4.115539);
   var html = '<div style="width:240px">Padarn Country Park(1843 4ft gauge), <p><br><a href="http://www.llanberis.org/padarn.htm" class="stylenewrickylinks">link: Padarn Park</a></p></div>';
 var title= '<div style="width:80px">Padarn Country Park   </div>';
   var icontype = icondarkgreen;
   var marker = createMarker(point,html,title,icontype);
   map.addOverlay(marker);
   
   
       var point = new GLatLng(53.132869,-4.120045);
   var html = '<div style="width:240px">Dinorwic Tramway (1824 2ft gauge), <p><br>Description here & possible hyperlinks to maps etc etc</p></div>';
 var title= '<div style="width:80px">Dinorwic Tramway   </div>';
   var icontype = icondarkgreen;
   var marker = createMarker(point,html,title,icontype);
   map.addOverlay(marker);
   
      var point = new GLatLng(53.128646,-4.106998);
   var html = '<div style="width:240px">Dinorwic Quarries, Padarn Country Park</p><br><a href="http://www.landscape-guides.co.uk/otherpdffulldownloads/dinorwicsalescat-freeview.pdf" class="stylenewrickylinks">link: Download Dinorwic Sales Catalogue</a></p></div>';
 var title= '<div style="width:80px">Dinorwic Quarries   </div>';
   var icontype = icondarkgreen;
   var marker = createMarker(point,html,title,icontype);
   map.addOverlay(marker);
   
   

   
    var point = new GLatLng(53.118139,-4.120761);
   var html = '<div style="width:240px">Llanberis Electric Mountain</p><br><a href="http://www.fhc.co.uk/electric_mountain.htm" class="stylenewrickylinks">link: Electric Mountain - Llanberis</a></p></div>';
 var title= '<div style="width:80px">Llanberis Electric Mountain   </div>';
   var icontype = icondarkgreen;
   var marker = createMarker(point,html,title,icontype);
   map.addOverlay(marker);
   
   //      var point = new GLatLng(53.148119,-4.157124);
  // var html = '<div style="width:240px">Brynrefail</p><br></p></div>';
// var title= '<div style="width:80px">Brynrefail   </div>';
//   var icontype = icon1new;
 //  var marker = createMarker(point,html,icontype);
 //  map.addOverlay(marker);
   
   
   //  var point = new GLatLng(53.128652,-4.11132);
 //  var html = '<div style="width:240px">Vivian Quarry</p><br></p></div>';
// var title= '<div style="width:80px">Vivian Quarry   </div>';
//   var icontype = icon3new;
//   var marker = createMarker(point,html,icontype);
 //  map.addOverlay(marker);

//  var point = new GLatLng(53.138372,-4.138112);
//   var html = '<div style="width:240px">Padarn Country Park</p><br></p></div>';
// var title= '<div style="width:80px">Padarn Country Park   </div>';
 //  var icontype = icon2new;
 //  var marker = createMarker(point,html,icontype);
 //  map.addOverlay(marker);


//---------------End - Section 3: Map marker overlays

//---------------Start - Section 4: Line overlays
//Lamberts Lane
//1st bit
//linecolor, lineweight and lineopacity are self explanatory 
//var linecolor='#FF0000';var lineweight=4;var lineopacity=0.5;var gpline=new GPolyline([new GLatLng(53.146719,-4.157124), new GLatLng(53.125968,-4.114739),new GLatLng(53.128852,-4.11232),new GLatLng(53.145303,-4.128284),new GLatLng(53.128852,-4.11232),new GLatLng(53.145303,-4.128284)],linecolor,lineweight,lineopacity);
//map.addOverlay(gpline);


//--------------------End - Section 4: Line overlays

//~If object exists - end bracket
  }
//~********************************
}
    
window.onload = load;