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.places = null;
        this.map = null;
        this.lnglat = null;
        this.address = null;
        this.marker = null;
        
        if ($('modalbox-route-enschede')) this.routeModalBox();
        if ($('map-canvas')) this.createMap();
        if ($('banner')) this.createBanner();
        
        if ($('mail')) {
            $('mail').writeAttribute('href', $('mail').readAttribute('href').replace('.nospam.', '@'));
            $('mail').update($('mail').innerHTML.replace('.nospam.', '@'));
        }

    },

    createBanner: function() {
        var vars = {}
        var params = {
            wmode: 'transparent'
        };
        var attr = {};
        swfobject.embedSWF("media/ImagePane.swf", "banner", '1000', '332', "9.0.0","js/expressInstall.swf", vars, params, attr);
    },
    
    viewEmployee: function(id, name) {
    	new Ajax.Updater('employee', '/Ajax/ViewEmployee', {
    		parameters: {
    			id: id,
    			name: name
    		},
    		onSuccess: function(t) {
    			window.location.hash = name.replace(' ', '_')
    		}
    	});
    },

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

    openModalBox: function(place) {
        Modalbox.show('<iframe src="map?place=' + place + '" class="iframe" scrolling="no" frameborder="0" id="mapframe">Iframes are dirty!</iframe>', {title: 'Routebeschrijving Santar ' + place, width: 815, height: 521});
    },

    createMap: function() {

        this.places = ({
            enschede: ({
                lnglat: new GLatLng(52.2431924, 6.848386),
                address: 'Calslaan 17 Enschede, Nederland'
            }),
            deventer: ({
                lnglat: new GLatLng(52.2558766, 6.1616645),
                address: 'Leeuwenbrug 51 Deventer, Nederland'
            })
        });

        place = document.location.keyValue('place');

        this.lnglat = eval('this.places.' + place + ".lnglat");
        this.address = eval('this.places.' + place + ".address");

        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.createElement('DIV');
        directions = new GDirections(this.map, directionsPanel);

        this.fieldset = null;

        var cont = new Element('div').update(
            new Element('img', {src: 'images/santar-' + place + '.jpg', alt: 'Santar ' + place, title: 'Santar ' + place})
        ).addClassName('infowindow');
        
        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') + ' ' + $F('place') + ', 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", "getSteps": false});
    }
});

var Overlay = Class.create();
Overlay.prototype = {
	initialize: function() {
		
		this.overlay = document.createElement('div');
		this.overlay.id = 'Overlay';

		Event.observe(this.overlay, 'click', this.close.bind(this));
		
		this.lightbox = document.createElement('div');
		this.lightbox.id = 'OverlayLightbox';
		
		this.a = document.createElement('a');
		this.a.id = 'OverlayImage';
		this.a.href = 'http://www.santar.nl/santar-twentse-vrouwenloop';
		
		this.overlay.appendChild(this.lightbox);
		this.overlay.appendChild(this.a);
		
		$$('body')[0].appendChild(this.overlay);
		
		new Effect.Opacity(this.lightbox, { from: 0, to: 0.7, duration: 1 });
		new Effect.Opacity(this.a, { from: 0, to: 1, duration: 1 });
	},
	close: function() {
		this.overlay.style.display = 'none';
	}
}

window.onload = function() {
	//if (typeof(SHOWOVERLAY) != 'undefined') new Overlay();
}