var wfirstActiveColour   = "#ffffff";
var wfirstInactiveColour = "#f0f0f0";

var wfirstMarkerUrl = '/pages/interactiveMapContents.jsp';

var wfirstMapIcons = [
    { id: 27, png: { src: "star.png",     width: "34", height: "32" }, gif: { src: "star.gif",     width: "29", height: "27" }, title: "Colleges (main sites)"            },
    { id: 25, png: { src: "circle.png",   width: "26", height: "25" }, gif: { src: "circle.gif",   width: "22", height: "22" }, title: "Industrial and/or Business Parks" },
    { id: 30, png: { src: "diamond.png",  width: "30", height: "29" }, gif: { src: "diamond.gif",  width: "26", height: "26" }, title: "Key Attractions"                  },
    { id: 28, png: { src: "flag.png",     width: "30", height: "27" }, gif: { src: "flag.gif",     width: "26", height: "22" }, title: "Key Development Areas"            },
    { id: 29, png: { src: "square.png",   width: "24", height: "23" }, gif: { src: "square.gif",   width: "20", height: "20" }, title: "Managed Workspace"                },
    { id: 26, png: { src: "triangle.png", width: "26", height: "23" }, gif: { src: "triangle.gif", width: "22", height: "19" }, title: "Strategic Businesses"             }
  ];

var wfirstActiveCats = [];

function WfirstMarkerControl() {};

WfirstMarkerControl.prototype = new GControl();

WfirstMarkerControl.prototype.initialize = function( map ) {
    var container = document.createElement( "div" );

    container.style.background = wfirstInactiveColour;
    container.style.border     = "1px solid #000000";
    container.style.padding    = "4px 4px 4px 4px";

    var catDiv;
    var msie6     = ( $.browser.msie && parseInt( jQuery.browser.version ) == 6 );
    var itemWidth = ( ( msie6 ) ? 204 : 160 ) + "px"

    for( var i = 0 ; i < wfirstMapIcons.length ; i++ )
    {
      catDiv = document.createElement( "div" );

      catDiv.id = "catDiv" + wfirstMapIcons[i].id;

      catDiv.title = "Hide " + wfirstMapIcons[i].title + " Locations";

      var iconImage = ( ( msie6 ) ? wfirstMapIcons[i].gif : wfirstMapIcons[i].png );

      catDiv.style.background    = wfirstActiveColour + " url('/art/map/" + iconImage.src+ "') no-repeat " + ( 19 - iconImage.width / 2 ) + "px " + ( 16 - iconImage.height / 2 ) + "px";
      catDiv.style.width         = itemWidth;
      catDiv.style.height        = "32px";
      catDiv.style.lineHeight    = "32px";
      catDiv.style.verticalAlign = "middle";
      catDiv.style.cursor        = "pointer";
      catDiv.style.padding       = "0px 2px 0px 40px";

      GEvent.addDomListener( catDiv, "click", function() {
          wfirstToggle( this );
        } );

      catDiv.appendChild( document.createTextNode( wfirstMapIcons[i].title ) );

      container.appendChild( catDiv );

      wfirstActiveCats.push( wfirstMapIcons[i].id );
    }

    map.getContainer().appendChild( container );

    return container;
  };

WfirstMarkerControl.prototype.getDefaultPosition = function() {
    return new GControlPosition( G_ANCHOR_TOP_RIGHT, new GSize( 7, 30 ) );
  };

function wfirstToggle( catDiv )
{
  var catId = catDiv.id.substring( "catDiv".length );

  var removed = false;

  for( var i = wfirstActiveCats.length -1 ; i >= 0 ; i-- )
  {
    if( wfirstActiveCats[i] == catId )
    {
      wfirstActiveCats.splice( i, 1 );
      catDiv.title = "Show" + catDiv.title.substring( 4 );
      catDiv.style.backgroundColor = wfirstInactiveColour;
      removed = true;
      break;
    }
  }

  if( !removed )
  {
    wfirstActiveCats.push( catId );
    catDiv.title = "Hide" + catDiv.title.substring( 4 );
    catDiv.style.backgroundColor = wfirstActiveColour;
  }

  Mappr.reloadMarkers( wfirstMarkerUrl + "?catIds=" + wfirstActiveCats.join( "," ) );
}

function wfirstShowMap()
{
  return Mappr.popup( wfirstMarkerUrl, { blank: '#000', blankFade: 0.5, centreOnTags: true, control: new WfirstMarkerControl() } );
}