if(window['console'] === undefined) window.console = { log: function(){} };

window.location.keyValue = function ( keyName ) {
    if( window.location.variablePairs == null ) {
        if( window.location.href.indexOf('?') == -1) {
            return false;
        }
        window.location.variablePairs = window.location.href.substr( window.location.href.indexOf('?') + 1).split('&');
    }

    for( var x = 0; x < window.location.variablePairs.length; x++ ) {
        
    	if( keyName == window.location.variablePairs[x].substr( 0, window.location.variablePairs[x].indexOf('='))) {
            return window.location.variablePairs[x].substr( window.location.variablePairs[x].indexOf('=') + 1);
        }
    }

    return false;
}

var c = null;
var directions = null;

document.observe('dom:loaded', function(){c = new Custom();});

var Custom = Class.create({
    initialize: function() {

        this.map = null;
        this.lnglat = null;
        this.address = null;
        this.marker = null;
        
        if ($('modalbox-route')) this.routeModalBox();
        if ($('map-canvas')) this.createMap();
    },

    routeModalBox: function() {
        $('modalbox-route').observe('click', function() { this.openModalBox() }.bind(this));
    },

    openModalBox: function() {
        Modalbox.show('<iframe src="/route/" scrolling=no class="iframe" frameborder="0" id="mapframe" width="500" height="720"></iframe>', {title: 'Routebeschrijving Almelo NoordOost', width: 520, height: 800});
    },

    createMap: function() {
    	
    	
        this.lnglat = new GLatLng(52.381101,6.695352);
        this.address = 'Achterhoeksweg, Almelo, Nederland';

        this.map = new GMap2($('map-canvas'));
        this.map.setCenter(this.lnglat, 13);

        this.marker = new GMarker(this.lnglat);

        this.map.addOverlay(this.marker);

        var directionsPanel = document.getElementById("directions-panel");

        directions = new GDirections(this.map, directionsPanel);

        this.fieldset = null;

        var cont = new Element('div').update(
            new Element('img', {src: '/templates/images/noordoost.jpg', alt: 'Almelo NoordOost', title: 'Almelo NoordOost'})
        ).addClassName('infowindow');
        
        console.log(cont);
        
        cont.appendChild(
            new Element('form', {method: 'get', action: '', id: 'routeForm'}).update(
                this.fieldset = new Element('fieldset').setStyle({border: '0', padding: '5px', margin: '0', width: '216px'})
            )
        );

        this.fieldset.appendChild(new Element('legend').update('Route plannen').setStyle({display: 'none'}));
        this.fieldset.appendChild(new Element('label', {'for': 'street', id: 'street-label'}).update('Adres').setStyle({display: 'block', width: '203px', cssFloat: 'left'}));
        this.fieldset.appendChild(new Element('input', {'class': 'text', type: 'text', name: "address", id: 'address'}).setStyle({display: 'block', width: '203px', cssFloat: 'left', marginRight: '5px', border: '1px solid #e5e9ec', marginBottom: '10px'}));
        this.fieldset.appendChild(new Element('label', {'for': 'place', id: 'place-label'}).update('Plaats').setStyle({display: 'block', width: '180px', cssFloat: 'left', marginTop: '5px', clear: 'both'}));
        this.fieldset.appendChild(new Element('input', {'class': 'text', type: 'text', name: 'place', id: 'place'}).setStyle({display: 'block', width: '203px', cssFloat: 'left', border: '1px solid #e5e9ec', marginBottom: '10px'}));
        this.fieldset.appendChild(new Element('input', {type: 'button', value: 'Plan route', id: 'planroute'}).observe('click', function(){
            this.getDirections($F('address') + ', Nederland', this.address);
            this.map.removeOverlay(this.marker);
        }.bind(this)));


        this.map.openInfoWindow(this.map.getCenter(), cont);
        this.map.addControl(new GLargeMapControl());
    },

    getDirections: function(from, to) {
        directions.load('from: ' + from + ' to: ' + to, {"locale": "nl_NL"});
    }
});