Ext.namespace('HAR', 'HAR.propertySearch');

HAR.PropertySearchApp = {
    sliderFormEl:null,
    divListEl:null,
    divListingButtonEl:null,
    divMapEl:null,
    myMapEl:null,
    panelHeight:0,
    panelWidth:0,
    mapHeight:0,
    mapWidth:0,
    beginOpacityLevel:.75,
	searchType:null,
    
    init : function(){

        this.cookieProvider = new Ext.state.CookieProvider({
            expires: new Date(new Date().getTime()+(1000*60*60*24*60)) //60 days
        });
        Ext.state.Manager.setProvider(this.cookieProvider);
        
        this.divMapEl = Ext.get('divMap');
        this.myMapEl = Ext.get('myMap');
        this.sliderFormEl = Ext.get('sliderForm');
        this.divListEl = Ext.get('divList');
		this.divListEl.setStyle("z-index", 199);
        
        this.sliderFormEl.appendTo(Ext.getBody());
        this.sliderFormEl.anchorTo(this.divMapEl, 'tl-tl');
        this.sliderFormEl.setWidth(this.divMapEl.getWidth());
		
        this.mask = Ext.getBody().createChild({cls:"ext-el-mask"});
        this.mask.enableDisplayMode("block");
        this.mask.setStyle("z-index", 199);
        this.mask.hide();
       // this.mask.show();
		 
        panelHeight = this.divMapEl.getHeight();
        panelWidth = this.divMapEl.getWidth();
        mapHeight = this.myMapEl.getHeight();
        mapWidth = this.myMapEl.getWidth();
       // this.sliderFormEl.setStyle("z-index", 200);
        this.sliderFormEl.hide();
		//this.sliderFormEl.show();
		//this.showSearchForm();
        
        this.tabs = new Ext.TabPanel({
            activeTab: 0,
            autoScroll:true,
            autoWidth:true,
            deferredRender:false,
            height:525,
            items:[
                {
                    autoWidth:true,
                    contentEl:'searchInstructions',
                    id:'instrTab',
                    height:525,
                    bodyStyle:'background:transparent url(graphics/GradientBG.jpg) repeat-x 0 100%;',
                    title:'Instructions'
                },
                {autoHeight:true,autoWidth:true,contentEl:'searchListings',id:'rsltTab',title:'Results List'}
            ],
            renderTo: 'divList'
        });
        this.tabs.hideTabStripItem(1);

        //{{{ main toolbar
        
		/*var showListings = new HAR.propertySearch.ToolbarButton({
            id:'showListingsButton',
            backgroundColor:'#48ce00',
            html:'<img src="http://www.har.com/mapsearch/graphics/iconMapClear.gif" /><br/><div style="text-align:center;">Show Listings</div>',
            opacity:.85,
            title:'Show lisings on map.'
        });
		 
        var polyDraw = new HAR.propertySearch.ToolbarButton({
            id:'polyDrawButton',
            backgroundColor:'#009dec',
            html:'<img src="http://www.har.com/mapsearch/graphics/polyDraw.gif" /><br/><span>Draw Poly</span>',
            opacity:.85,
            title:'Search within a polygon.'
        });
        
        var mapClear = new HAR.propertySearch.ToolbarButton({
            id:'mapClear',
            html:'<img src="http://www.har.com/mapsearch/graphics/iconMapClear.gif" /><br/><span>Clear Map</span>',
            opacity:.85,
            title:'Clear shapes from the map.'
        });
        
		showListings.addListener('click',
            function(el, e){
                this.showListings();
            },
            this
        );
		
        polyDraw.addListener('click',
            function(el, e){
                this.doPolyDraw();
                e.stopEvent();
            },
            this
        );
        
        mapClear.addListener('click',
            function(el, e){
                icon = "";
                clearSearchResult();
            },
            this
        );*/
        
		/*this.mapToolBar = new Ext.Panel({
            bodyStyle:'background-color:transparent;',
            border:false,
            floating:true,
            items:[
                showListings,
                polyDraw,
                mapClear
            ],
            renderTo:'myMap',
            shadow:false,
            style:'color:#ffffff;',
            width:50
        });
  		this.mapToolBar.render();
        this.mapToolBar.getEl().setTop('0px');
        this.mapToolBar.getEl().setRight('0px');
        this.mapToolBar.getEl().setStyle('left', null);
        this.mapToolBar.getEl().setStyle('z-index', '150');*/
		
		//}}}
        
        //{{{ traffic toolbar
        
		/*var showTraffic = new HAR.propertySearch.ToolbarButton({
            id:'showtrafficbutton',
            backgroundColor:'#db2020',
            html:'<img src="http://www.har.com/mapsearch/graphics/iconShowTraffic.gif" /><br/><div style="text-align:center;">Show Traffic</div>',
            opacity:.85,
            title:'Show traffic on map.'
        });
		 
        var clearTraffic = new HAR.propertySearch.ToolbarButton({
            id:'cleartrafficbutton',
            html:'<img src="http://www.har.com/mapsearch/graphics/iconClearTraffic.gif" /><br/><div style="text-align:center;">Clear Traffic</div>',
            opacity:.85,
            title:'Clear traffic from the map.'
        });
		
		
		showTraffic.addListener('click',
            function(el, e){
                ShowTraffic();
                
            },
            this
        );
		
        clearTraffic.addListener('click',
            function(el, e){
                 ClearTraffic();
            },
            this
        );*/
        
       /* this.trafficToolBar = new Ext.Panel({
            bodyStyle:'background-color:transparent;',
            border:false,
            floating:true,
            items:[
                showTraffic,
                clearTraffic
            ],
            renderTo:'myMap',
            shadow:false,
            style:'color:#ffffff;z-index:150;',
            width:50
        });
		
        this.trafficToolBar.render();
        this.trafficToolBar.getEl().setTop('170px');
        this.trafficToolBar.getEl().setRight('0px');
        this.trafficToolBar.getEl().setStyle('left', null);*/
		
        //}}}
		
        Ext.get('toolBarBtnHideSearch').on('click', this.toggleSearchFormVisibility, this);
        Ext.get('btnHideSearch').on('click', this.hideSearchForm, this);
        Ext.get('btnRefine').on('click', this.showSearchForm, this);

        Ext.get('btnSubmit').on('click', 
            function(){
			    this.submitSearchRequest();
                this.hideSearchForm();
            },
            this
        );
        
        Ext.get('btnReset').on('click', 
            function(){
                this.resetSearchForm();
            },
            this
        );
        
        var listingExpColl = Ext.get('listingExpColl');
		var listingExpCollText = Ext.get('listingExpCollText');
			var mySideObj=Ext.get('divList');
		var minWidth=parseInt(mySideObj.dom.clientWidth);
	
        if(listingExpColl){
 
            listingExpColl.on('click', function(){
                var listingExpColl = Ext.get('listingExpColl');
                var sizeState = this.sizeState;
                var summaryList = Ext.get('divMapListings');
                var detailList = Ext.get('divListLoading');
				var myMapobj=Ext.get('page');
			
				var maxWidth=parseInt(myMapobj.dom.clientWidth)-5;
			
                var max= maxWidth;
                var min = minWidth;
                if( !sizeState ){
                    sizeState = 'collapsed';
                }
                switch(sizeState){
                    case 'collapsed':
                        listingExpColl.sizeState = 'expanding';
                        summaryList.setDisplayed('none');
                        detailList.setDisplayed('block');
								listingExpColl.dom.alt="Collapse"
								listingExpCollText.dom.innerHTML="Collapse";
						listingExpColl.dom.src="graphics/depand.png";
                        this.animate({width:{to:max}}, 1,
                            function(){
                                this.sizeState = 'expanded';
                                detailList.setDisplayed('block');
                                summaryList.setDisplayed('none');
                                //listingExpColl.applyStyles({'background-position':'0px 0px'});
                                listingExpColl.dom.value = 'Collapse ' + String.fromCharCode(187);
                            }, 'easeOut')
                        break;
                    case 'collapsing':
                        listingExpColl.sizeState = 'expanding';
                        this.animate({width:{to:max}}, 1,
                            function(){
                                this.sizeState = 'expanded';
                                detailList.setDisplayed('block');
                                summaryList.setDisplayed('none');
                                //listingExpColl.applyStyles({'background-position':'0px 0px'});
                                listingExpColl.dom.value = 'Collapse ' + String.fromCharCode(187);
                            }, 'easeOut')
                        break;
                    case 'expanded':
                        listingExpColl.sizeState = 'collapsing';
						listingExpColl.dom.src="graphics/expand.png";
						listingExpColl.dom.alt="Expand"
						listingExpCollText.dom.innerHTML="Expand";
                        this.animate({width:{to:min}}, 1,
                            function(){
                                this.sizeState = 'collapsed';
                                detailList.setDisplayed('none');
                                summaryList.setDisplayed('block');
                                //listingExpColl.applyStyles({'background-position':'-15px -15px'});
                                listingExpColl.dom.value = String.fromCharCode(171) + ' Expand ';
                            }, 'easeOut')
                        break;
                    case 'expanding':
                        listingExpColl.sizeState = 'collapsing';
                        this.animate({width:{to:min}}, 1,
                            function(){
                                this.sizeState = 'collapsed';
                                detailList.setDisplayed('none');
                                summaryList.setDisplayed('block');
                                //listingExpColl.applyStyles({'background-position':'-15px -15px'});
                                listingExpColl.dom.value = String.fromCharCode(171) + ' Expand ';
                            }, 'easeOut')
                        break;
                }
            },Ext.get('divList'));
        }
        
    },
    
      toggleSearchFormVisibility : function(){
        if(this.sliderFormEl.isVisible()){
            this.hideSearchForm();
        }else{
            this.showSearchForm();
        }
    },
    
    showSearchForm : function(){
        //Ext.getBody().addClass("x-body-masked");
		//alert(Ext.lib.Dom.getViewHeight(true));
        //this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
		this.mask.setSize(Ext.lib.Dom.getViewWidth(true), '800px');
        this.mask.show();
        this.sliderFormEl.show();
        this.sliderFormEl.setStyle('z-index','200');
        this.sliderFormEl.animate({opacity:{to:1}}, .5, null, 'easeOut');
        Ext.get('toolBarBtnHideSearch').dom.value = 'Hide';
    },
    
    hideSearchForm : function(){
        this.mask.hide();
      //  Ext.getBody().removeClass("x-body-masked");
        this.sliderFormEl.animate({opacity:{to:0}}, .5,
            function(){
                this.hide();
                this.setStyle('z-index','0');
                Ext.get('toolBarBtnHideSearch').dom.value = 'Show';
            }
            , 'easeIn');
    },
    
    resetSearchForm : function(){
        
        Ext.get('radio_for_sale').dom.checked = true;
        Ext.get('radio_for_sold').dom.checked = false;
        Ext.get('radio_for_lease').dom.checked = false;
        
        Ext.get('Property_Class_ID1').dom.checked = true;
        Ext.get('Property_Class_ID2').dom.checked = true;
        Ext.get('Property_Class_ID3').dom.checked = true;
        Ext.get('Property_Class_ID4').dom.checked = true;
        Ext.get('Property_Class_ID5').dom.checked = true;
        Ext.get('Property_Class_ID6').dom.checked = true;
        
        Ext.get('LISTING_PRICE_MIN').dom.selectedIndex = 0;
        Ext.get('LISTING_PRICE_MAX').dom.selectedIndex = 0;
        
        Ext.get('LEASE_PRICE_MIN').dom.selectedIndex = 0;
        Ext.get('LEASE_PRICE_MAX').dom.selectedIndex = 0;
        Ext.get('BEDROOM_NUM').dom.selectedIndex = 0;
        Ext.get('FULL_BATH_NUM').dom.selectedIndex = 0;
        Ext.get('SQURE_FEET_MIN').dom.selectedIndex = 0;
        Ext.get('SQURE_FEET_MAX').dom.selectedIndex = 0;
        Ext.get('LOTSIZE_MIN').dom.selectedIndex = 0;
        Ext.get('LOTSIZE_MAX').dom.selectedIndex = 0;

        Ext.get('GARAGE_NUM').dom.selectedIndex = 0;
        Ext.get('GARAGE_DESC').dom.selectedIndex = 0;
        Ext.get('STORIES').dom.selectedIndex = 0;
        
        Ext.get('PRIVATE_POOL').dom.checked = false;
        Ext.get('AREA_POOL').dom.checked = false;

        Ext.get('NEW_CONSTR').dom.selectedIndex = 0;
        Ext.get('YEAR_BUILT').dom.selectedIndex = 0;
        
        Ext.get('GOLF').dom.checked = false;
        Ext.get('VIRTUAL_TOURS').dom.checked = false;
        Ext.get('OPEN_HOUSES').dom.checked = false;
        
        Ext.get('dateback6').dom.checked = false;
        Ext.get('dateback1').dom.checked = false;
        Ext.get('dateback2').dom.checked = false;
        
        Ext.get('Yearbuilt1').dom.selectedIndex = 0;

    },
    
    submitSearchRequest : function(){
        var urlPage = '', urlParams = '';
		
    var for_sale = ''
    
    if(Ext.get('radio_for_sale').dom.checked == true)		{
        for_sale = 1;

    }else if(Ext.get('radio_for_sold').dom.checked == true){
        for_sale = 0;

    }else if(Ext.get('radio_for_lease').dom.checked == true) {
        for_sale = 7;

    }
		
		 if(Ext.get('radio_for_sale').dom.checked == true)		{
			icon = HAR.pins.blueHouse;//'http://www.har.com/mapsearch/graphics/smbluePointer.gif';
	
		}else if(Ext.get('radio_for_sold').dom.checked == true){
			icon = HAR.pins.redHouse;//'http://www.har.com/mapsearch/graphics/redPointersmall.gif';
	
		}else if(Ext.get('radio_for_lease').dom.checked == true) {
			icon = HAR.pins.purpleHouse;//'http://www.har.com/mapsearch/graphics/smgooglePointer.gif';
	
		}
	
		//alert(icon);
    	var isProxSearch = Ext.get('proxaddress').dom.value;
        if(isProxSearch > '' && isProxSearch.indexOf('Enter an address') == -1){
           // gMapObj.deleteAllShapes();
            markInputProxAddress();
            Ext.get('proxaddress').dom.value = "";
			searchType = 'proxSearch';
        }
        
        urlParams = urlParams.concat(getUrlParameters());
			//alert(gMapObj.polygonShape);
       // alert( mtype);
        if( typeof HAR.shapes[0]!="undefined" ){
			searchType = 'poly';
            urlPage = 'getPointsInPoly.cfm?all=1';
            var points = "";
			var polyMVC = HAR.shapes[0].getPath();
			
			// Iterate through all points in the poly to build the string
			polyMVC.forEach(function(point,index){
				points += point.lat()+","+point.lng()+"]"
			});
            
            urlParams = urlParams.concat('&myPoly=');
            urlParams = urlParams.concat(points);
            
            var tlBrObj = HAR.getBoundsFromMVCArray( polyMVC );
            
			// Turn NE/SW into NW/SE
			var NE = tlBrObj.getNorthEast();
			var SW = tlBrObj.getSouthWest();
			
            urlParams += '&NElat=';
            urlParams += NE.lat();
            
            urlParams += '&NElng=';
            urlParams += SW.lng();
            
            urlParams += '&SWlat=';
            urlParams += SW.lat();
            
            urlParams += '&SWlng=';
            urlParams += NE.lng();
			
			// Fit the map to the poly bounds
			HAR.map.fitBounds(tlBrObj);
                        
        }else{
            urlPage = 'getprops.cfm?all=1';
            searchType = 'regSearch';
            var tlBrObj = HAR.map.getBounds();
            
			// Convert NE/SW into NW/SE locations
			var NE = tlBrObj.getNorthEast();
			var SW = tlBrObj.getSouthWest();
			
            urlParams += '&NElat=';
            urlParams += NE.lat();
            
            urlParams += '&NElng=';
            urlParams += SW.lng();
            
            urlParams += '&SWlat=';
            urlParams += SW.lat();
            
            urlParams += '&SWlng=';
            urlParams += NE.lng();
            
        }
        
        var url = urlPage + urlParams;
		
	
		//prompt('',url);
        try{
            Ext.get('divMapsearch').mask('<img src="http://www.har.com/mapsearch/_js/ext/resources/images/default/shared/blue-loading.gif" /> Searching...');
            Ext.Ajax.request({
                method:'POST',
                url:url,
                success:function(response, options,for_sale){
                    if( searchType=='poly' )
						HAR.deleteMarkers();
					else
						HAR.clearMap();
                    SucceededCallback(response, options,searchType);
                },
                failure:function(response, options){
					Ext.get('divMapsearch').unmask();
                    Ext.MessageBox.alert("Request Failed.", "Your request failed. Your search area was probably too large or too complicated and resulted in a seach failure. "+
                        "You can try your search again with the same criteria. If this error persists, try simplifying your search.");
                    icon = "";
                    //clearSearchResult();
                   // Ext.get('divMapsearch').unmask();
                },
                params:{icon:icon},
                timeout:600000
            });
        }catch(err){
          Ext.get('divMapsearch').unmask();
        }

        //updatepropcount();
    },
    
    doPolyDraw : function(){
        var suppressPolyDrawInstructions = Ext.state.Manager.get('pdiDontShowMsg', false);

        if(suppressPolyDrawInstructions){
            startDraw();
        }else{
            var polyDrawInstructionDlg = new Ext.Window({
                buttonAlign:'left',
                closeAction:'hide',
                constrain:true,
                defaults:{bodyStyle:'padding:6px;',border:false},
                defaultButton:'pdiCancelBtn',
                items:[
                    {
                        html:'<p>To draw a polygon on the map, click where you want the area to begin, ' +
                            'and then click additional points. To close the area, right click or the area will be auto closed when 8 points is reached.</p>'+
                            '<p>To view a demo of drawing a polygon, '+
                            '<span style=\'cursor:pointer;text-decoration:underline;\' '+
                            'onclick=\'javascript:window.open("/maps/media/help_polygon.htm","help","height=550,width=550");\'>click here</span>.</p>'
                    },
                    {
                        items:[
                            {
                                xtype:'checkbox',
                                id:'pdiDontShowMsg',
                                boxLabel:'Don\'t show these instructions again.'
                            }
                        ]
                    }
                ],
                modal:true,
                resizable:false,
                title:'Polygon Drawing Instructions',
                width:400
            });
            polyDrawInstructionDlg.addButton({id:'pdiOkBtn',text:'Continue'},
                function(){
                    this[this.closeAction]();
                    Ext.state.Manager.set('pdiDontShowMsg', this.findById('pdiDontShowMsg').getValue());
                    startDraw();
                },
                polyDrawInstructionDlg
            );
            polyDrawInstructionDlg.addButton({id:'pdiCancelBtn',text:'Cancel'},
                function(){
                    this[this.closeAction]();
                    return false;
                },
                polyDrawInstructionDlg
            );
            
            polyDrawInstructionDlg.show();
        }
    },
    
    getPropertyChecks : function(){
        var summaryListings = Ext.get('divMapListings');
        var detailListings = Ext.get('divListLoading');
        var nameVar = '';
        
        if( summaryListings.isVisible() ){
            activeList = summaryListings;
            nameVar = 'sumListMLNUM';
        }else if( detailListings.isVisible() ){
            activeList = detailListings;
            nameVar = 'dtlListMLNUM';
        }
    
        return Ext.DomQuery.select('INPUT[name='+nameVar+']', activeList.dom);
        
    },
    
    showHideMapPoint : function(){
        var shapeId;
        var veShape;
    
        var chkBxArray = this.getPropertyChecks();
        
		// hide all markers
		HAR.hideMarkers();
		
        for (var i = 0, l = chkBxArray.length;  i < l;  i++)
		{
            shapeId = chkBxArray[i].id.substr(7);
            if (chkBxArray[i].checked){
                //veShape.Show();
				HAR.showMarker(i);
            }
        }
    },
    
    compareSelectedPoints : function(){
        var checkCounter = 0;
        var mlnumsellist = '';
        
        var chkBxArray = this.getPropertyChecks();
        var checked = [];
        for (var i = 0, l = chkBxArray.length;  i < l;  i++){
            if (chkBxArray[i].checked){
                checkCounter++;
                mlnumsellist += chkBxArray[i].value +',';
            }
        }
        
        mlnumsellist+= '-999';
        
        // require that at least one checkbox be checked
        if (checkCounter == 0)	{
            Ext.MessageBox.alert('Too Few Listings Selected', 'Please select at least one of the listings.');
            return false;
        }
        if (checkCounter > 5){
            Ext.MessageBox.alert('Too Many Listings Selected', 'You are only allowed to select up to 5 lisitng.\n Please uncheck one or some of your selection in order to select more.');
            return false;
        }
        //alert(#Application.searchroot#+'/searchidx/dispSetMycartTransit.cfm?listMLNUM='+mlnumsellist);
        win=window.open('http://search.har.com/idx/dispSetMycartTransit.cfm?listMLNUM='+mlnumsellist+'&cid='+cid+'&sitetype='+sitetype,'myWin','width=850,height=900,scrollbars=yes,resizable=yes,left:0px, top:0px'); 
        
    },
    
    showListings : function(){
        Ext.get('btnSubmit').dom.click();
    }
    
}

HAR.propertySearch.ToolbarButton = Ext.extend(Ext.Component, {

    backgroundColor:'#235087',
    opacity:.7,
    height:27,
    listeners:[
        {'mouseover':this.onMouseOver,scope:this},
        {'mouseout':this.onMouseOut,scope:this},
        {'click':this.onClick,scope:this}
    ],
    padding:2,
    width:24,

    initComponent : function(){
        
        HAR.propertySearch.ToolbarButton.superclass.initComponent.call(this);
        
        this.addEvents(
            'click'
        );
    },

    // private
    onRender : function(ct, position){
        Ext.Panel.superclass.onRender.call(this, ct, position);

        if(!this.el){ // existing markup
            this.el = ct.createChild({
                id: this.id
            }, position);
            
        }
        
        var el = this.el, d = el.dom;
        var style = {};
        
        style['background-color'] = this.backgroundColor;
        style['opacity'] = this.opacity.toString();
        style['cursor'] = 'pointer';
        style['padding'] = '2px 4px';
        style['font-family'] = 'verdana,arial,sans-serif';
        style['font-size'] = '11px';
        style['text-align'] = 'center';
        style['vertical-align'] = 'middle';
        style['z-index'] = '150';

        el.setStyle(style);
        
        if(this.cls){
            this.el.addClass(this.cls);
        }

        el.addListener('mouseover',this.onMouseOver,this);
        el.addListener('mouseout',this.onMouseOut,this);
        el.addListener('click',this.onClick,this);
        
        var childObj = {};
        if( this.title ){
            childObj.title = this.title;
            delete this.title;
        }
        if( this.html ){
            childObj.html = this.html;
            delete this.html;
        }
        
        var childEl = this.childEl = Ext.DomHelper.append(this.el, childObj, true);
        
        childEl.applyStyles({border:'solid 1px transparent'});
        childEl.applyStyles({padding:'2px 4px'});


        /*
        if(this.html){
            childEl.update(typeof this.html == 'object' ?
                Ext.DomHelper.markup(this.html) : this.html);
        }
        
        if(this.imgSrc){
            childEl.applyStyles({background:'transparent url(' + this.imgSrc + ') no-repeat 50% 50%'});
            childEl.applyStyles({height:this.height});
            childEl.applyStyles({margin:'0 auto'});
            childEl.applyStyles({width:'24px'});
        }
        
        childEl.applyStyles({border:'solid 1px transparent'});
        */

    },

    onMouseOver : function(e){
        var internal = e.within(this.el,  true);
        if(!internal && (!this.currentOpacity || this.currentOpacity == this.opacity)){
            this.el.animate({opacity:{from:this.opacity,to:1}});
            this.currentOpacity = 1;
            this.childEl.applyStyles({border:'solid 1px #8DC2EE'});
        }
    },
    
    onMouseOut : function(e){
        var internal = e.within(this.el,  true);
        if(!internal && this.currentOpacity > this.opacity){
            this.el.animate({opacity:{from:1,to:this.opacity}});
            this.currentOpacity = this.opacity;
            this.childEl.applyStyles({border:'solid 1px transparent'});
        }
    },
    
    onClick : function(e){
        this.fireEvent("click", this, e);
    }
    
});

var gMapObj;
Ext.onReady(function() {

    Ext.QuickTips.init();//lookinto ext-all-debug.js
    
    gMapObj = new HAR.VEMapUtil({
            mapContainer:'myMap',
            customIcon:"http://www.har.com/mapsearch/graphics/smbluePointer.gif"
    });
    /*map = gMapObj.map;*/
	HAR.initialize({mapTypeControlStyle:'DROPDOWN_MENU',channel:'idx',callback:function(){
		// This function is called back when map API have been loaded into the browser
		initInfoLyr();
	
		HAR.PropertySearchApp.init();
		
		// Insert some custom controls into the Map
		setMyControl();
		
		if(for_sale != ''){
			if (for_sale == 1){
				showBuyDiv(0,0);
			}else if (for_sale == 0){
				showBuyDiv(0,1);
			}else if (for_sale ==7){
				showLeaseDiv(0);
			}
		}
		if(lat != ''&&lng != '' && mlnumaddr != ''){
			// alert('loading school');
			// setSchoolAddresstoProx(addr);
			// alert(lat + ','+lng);
			mapLoadPoint(lat,lng,mlnumaddr);
		}
		else if(addr != ''){
			//alert('loading school');
			setSchoolAddresstoProx(addr);
			markInputProxAddress();
		}
		
		function setMyControl()
		{
			// Create Clear Map Control
			HAR.customControl.insert({
				content: HAR.customControlImages.clearMap,
				title:'Click to clear shapes from the map',
				handler: HAR.clearMap,
				position: "TOP_RIGHT"
			});
			
			// Create Traffic Layer Control
			HAR.customControl.insert({
				content: HAR.customControlImages.currentTraffic,
				title:'Click to show current traffic',
				handler: HAR.toggleTraffic,
				position: "TOP_RIGHT"
			});
			
			// Create Draw Area Control
			HAR.customControl.insert({
				content: HAR.customControlImages.drawArea,
				title:' 1.) Click to start drawing an area\n 2.) Continue to click to plot points of your area\n 3.) Right-click to complete your drawing',
				handler: beginToDraw,
				position: "TOP_RIGHT"
			});
			
			// Create Show Listings Control
			HAR.customControl.insert({
				content: HAR.customControlImages.showListings,
				title:'Click to submit search',
				handler:function(){ HAR.PropertySearchApp.submitSearchRequest(); HAR.PropertySearchApp.hideSearchForm(); },
				position: "TOP_RIGHT"
			});
		}
		 
		function queryString(parameter) { 
		  var loc = location.search.substring(1, location.search.length);
		  var param_value = false;
		  var params = loc.split("&");
		  for (i=0; i<params.length;i++) {
			  param_name = params[i].substring(0,params[i].indexOf('='));
			  if (param_name == parameter) {
				  param_value = params[i].substring(params[i].indexOf('=')+1)
			  }
		  }
		  if (param_value) {
			  return param_value;
		  }
		  else {
			  return false; //Here determine return if no parameter is found
		  }
		}
	
	}});

    

});

// New function used to start the drawing process
function beginToDraw()
{
	// Decide whether we can start to draw or not
	if( HAR.shapes.length!=0 )
	{
		HAR.clearMap();
	}
	// Initiate the drawing process
	HAR.startDrawingPolygon.init({maxPoints:8,callback:HAR.PropertySearchApp.submitSearchRequest});
}