/**************************************************
       *                      Menu
       **************************************************/
       
      function Menu($div){
        var that = this, 
            ts = null;
        
        this.$div = $div;
        this.items = [];
        
        // create an item using a new closure 
        this.create = function(item){
          var $item = $('<div class="item '+item.cl+'">'+item.label+'</div>');
          $item
            // bind click on item
            .click(function(){
              if (typeof(item.fnc) === 'function'){
                item.fnc.apply($(this), []);
              }
            })
            // manage mouse over coloration
            .hover(
              function(){$(this).addClass('hover');},
              function(){$(this).removeClass('hover');}
            );
          return $item;
        };
        this.clearTs = function(){
          if (ts){
            clearTimeout(ts);
            ts = null;
          }
        };
        this.initTs = function(t){
          ts = setTimeout(function(){that.close()}, t);
        };
      }
      
      // add item
      Menu.prototype.add = function(label, cl, fnc){
        this.items.push({
          label:label,
          fnc:fnc,
          cl:cl
        });
      }
      
      // close previous and open a new menu 
      Menu.prototype.open = function(event){
        this.close();
        var k,
            that = this,
            offset = {
              x:0, 
              y:0
            },
            $menu = $('<div id="menu"></div>');
            
        // add items in menu
        for(k in this.items){
          $menu.append(this.create(this.items[k]));
        }
        
        // manage auto-close menu on mouse hover / out
        $menu.hover(
          function(){that.clearTs();},
          function(){that.initTs(3000);}
        );
        
        // change the offset to get the menu visible (#menu width & height must be defined in CSS to use this simple code)
        if ( event.pixel.y + $menu.height() > this.$div.height()){
          offset.y = -$menu.height();
        }
        if ( event.pixel.x + $menu.width() > this.$div.width()){
          offset.x = -$menu.width();
        }
        
        // use menu as overlay
        this.$div.gmap3({
          action:'addOverlay',
          latLng: event.latLng,
          content: $menu,
          offset: offset
        });
        
        // start auto-close
        this.initTs(5000);
      }
      
      // close the menu
      Menu.prototype.close = function(){
        this.clearTs();
        this.$div.gmap3({action:'clear', name:'overlay'});
      }
      
      
      /**************************************************
       *                      Main
       **************************************************/
    
      $(function(){
		var format;
        var $map = $('#googleMap'), 
        	menu = new Menu($map),
            
            current,  // current click event (used to save as start / end position)
            m1,       // marker "from"
            m2,       // marker "to"
            center = [52.295042, 1.244202];
        
        // update marker
        function updateMarker(marker, isM1){
            m1 = marker;
        }
		        
        // add marker and manage which one it is (A, B)
        function addMarker(isM1){
          // clear previous marker if set
          var clear = {action:'clear', name:'marker', tag:''};
          if (isM1 && m1) {
            clear.tag = 'from';
            $map.gmap3(clear);
          } else if (!isM1 && m2){
            clear.tag = 'to';
            $map.gmap3(clear);
          }
          // add marker and store it
          $map.gmap3({
            action:'addMarker',
            latLng:current.latLng,
            options:{
              draggable:true,
              icon:new google.maps.MarkerImage('http://angliarenewableenergy.co.uk/assets/img/siteimages/happy.png')
            },
            tag: (isM1 ? 'from' : 'to'),
            events: {
			  dragend: function(marker){
                updateMarker(marker, isM1);
			  },
			  dragend: function(marker){
                  $(this).gmap3({
         			 action:'getAddress',
         			 latLng:marker.getPosition(),
          			callback:function(results, marker){
						var address = results[1].formatted_address;
						format = address.split(',');
						 	//$('#request-1').slideToggle('slow');
							//$('#request-3').slideDown('slow');
						document.free_quote.street.value = format[0];
						document.free_quote.first.value = format[1];
						document.free_quote.second.value = format[2];
						document.free_quote.latLng.value = marker.getPosition();
						document.completion2.src= 'http://angliarenewableenergy.co.uk/assets/img/siteimages/tick_32.png';
				 	}
					});			  
			},
			  
              },
            callback: function(marker){
              updateMarker(marker, isM1);
			  $(this).gmap3({
         			 action:'getAddress',
         			 latLng:marker.getPosition(),
          			callback:function(results,maker){
						var address = results[1].formatted_address;
						format = address.split(',');
						// 	$('#request-1').slideToggle('slow');
							//$('#request-3').slideDown('slow');
							console.log(marker);
						document.free_quote.street.value = format[0];
						document.free_quote.first.value = format[1];
						document.free_quote.second.value = format[2];
						document.free_quote.latLng.value = marker.getPosition();
						document.completion2.src= 'http://angliarenewableenergy.co.uk/assets/img/siteimages/tick_32.png';
				 	}
					});			  
			  
            }
          });
        }               
        // MENU : ITEM 2
        menu.add('Add the marker', 'itemA separator', 
          function(){
            menu.close();
            addMarker(true);			
          })
        
        // MENU : ITEM 3
        menu.add('Zoom in', 'zoomIn', 
          function(){
            var map = $map.gmap3('get');
            map.setZoom(map.getZoom() + 1);
            menu.close();
          });
        
        // MENU : ITEM 4
        menu.add('Zoom out', 'zoomOut',
          function(){
            var map = $map.gmap3('get');
            map.setZoom(map.getZoom() - 1);
            menu.close();
          });
        
        // MENU : ITEM 5
        menu.add('Center here', 'centerHere', 
          function(){
              $map.gmap3('get').setCenter(current.latLng);
              menu.close();
          });
		
		
        
        // INITIALIZE GOOGLE MAP
        $map.gmap3(
          { action: 'init',
            options:{
              center: center,
              zoom: 9, 
			  mapTypeId: google.maps.MapTypeId.SATELLITE,
            },
            events:{
              rightclick:function(map, event){
                current = event;
                menu.open(current);
              },
              click: function(){
                menu.close();
              },
              dragstart: function(){
                menu.close();
              },
              zoom_changed: function(){
                menu.close();
              }
            }
          },
          // add direction renderer to configure options (else, automatically created with default options)
          { action:'addDirectionsRenderer',
            preserveViewport: true,
            markerOptions:{
              visible: false
            }
          },
          // add a direction panel
          { action:'setDirectionsPanel',
            id : 'directions'
          }
        );
		
	});
	  
	  function manipulateForm() { 
	  		
	  }