var OldtimerForm = function()
{
	//Elements
	var form 	= $('oldtimer-form');
	var year	= $('year');
	var error 	= $('oldtimer-error');
	//Transitions
	var tween	= new Fx.Tween(error,{duration: 500});
	//Status
	var status	= false;
	//Event
	form.addEvent('submit',function(event) {
		new Fx.Scroll(window,{duration: 1000}).toElement('top-of-page');
		if (year.get('value').length != 4) {
			event.stop();
			year.focus();
			if (!status)
			{
				tween.start('opacity',0,1).chain(function(){
					status = true;
					(function(){
						tween.start('opacity',1,0).chain(function(){
							status = false;
						});
					}).delay(3000);
				});
			}
		}
	});
	
}

var CallmeForm = function()
{
	//Elements
	var form 		= $('callme-form');
	var name		= $('name');
	var telephone	= $('telephone');
	var error 		= $('callme-error');
	//Transitions
	var tween		= new Fx.Tween(error,{duration: 500});
	//Status
	var status		= false;
	//Event
	form.addEvent('submit',function(event) {
		new Fx.Scroll(window,{duration: 1000}).toElement('top-of-page');
		if (name.get('value').length < 1 || telephone.get('value').length < 10) {
			event.stop();
			if (!status)
			{
				tween.start('opacity',0,1).chain(function(){
					status = true;
					(function(){
						tween.start('opacity',1,0).chain(function(){
							status = false;
						});
					}).delay(3000);
				});
			}
		}
	});
	
}

var SimpleGoogleMap = new Class({

    Implements                    : Options,
   
    options                        :
    {
        'markerImage'                :
        {
            'image'                        : false,
            'size'                        : [0,0],
            'start'                        : [0,0],
            'offset'                    : [0,0]
        },
        'markerShadow'                :
        {
            'image'                        : false,
            'size'                        : [0,0],
            'start'                        : [0,0],
            'offset'                    : [0,0]
        },
        'route'                        :
        {
            'routeInput'                : false,
            'routeSubmit'                : false
        },
        'zoom'                        : 15
    },
   
    initialize                    : function(address,map,options)
    {
        this.setOptions(options);
       
        this.latLng                    = new google.maps.LatLng(-34.397, 150.644);
        this.address                = address;
        this.map                    = $(map);
        this.image                    = null;       
        this.shadow                    = null;
       
        if (this.options.markerImage.image)
        {
            this.image = new google.maps.MarkerImage(this.options.markerImage.image,
                new google.maps.Size(this.options.markerImage.size[0], this.options.markerImage.size[1]),
                new google.maps.Point(this.options.markerImage.start[0],this.options.markerImage.start[1]),
                new google.maps.Point(this.options.markerImage.offset[0], this.options.markerImage.offset[1])
            );
        }
        if (this.options.markerShadow.image)
        {
            this.shadow = new google.maps.MarkerImage(this.options.markerShadow.image,
                new google.maps.Size(this.options.markerShadow.size[0], this.options.markerShadow.size[1]),
                new google.maps.Point(this.options.markerShadow.start[0],this.options.markerShadow.start[1]),
                new google.maps.Point(this.options.markerShadow.offset[0], this.options.markerShadow.offset[1])
            );
        }
       
        if (this.options.route.routeInput && this.options.route.routeSubmit)
        {
            this.insertRouteOverlay();
            this.bindRouteEvents();
        }
       
        this.initMap();
    },
   
    initMap                        : function()
    {
        var geocoder                = new google.maps.Geocoder();
        var map                        = new google.maps.Map(this.map, {
                                          zoom        : this.options.zoom,
                                          center        : this.latLng,
                                          mapTypeId    : google.maps.MapTypeId.ROADMAP
                                      });
        geocoder.geocode({'address': this.address}, function(result,status){
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(result[0].geometry.location);
                var marker = new google.maps.Marker({
                    map            : map,
                    position    : result[0].geometry.location,
                    icon        : this.image,
                    shadow        : this.shadow
                });
            }
        }.bind(this));
    },
   
    insertRouteOverlay            : function()
    {
        this.routeBase         = new Element('div').setStyles({
            'position'            : 'fixed',
            'width'                : '200%',
            'height'            : '200%',
            'top'				: 0,
            'left'				: 0,
            'background'        : '#000000',
            'opacity'            : 0,
            'visibility'        : 'hidden',
            'z-index'            : 999
        }).inject($(document.body),'top');
        this.route             = new Element('div').setStyles({
            'position'            : 'fixed',
            'width'                : 1,
            'height'            : 1,
            'padding'            : 20,
            'background'        : '#ffffff',
            'opacity'            : 0,
            'visibility'        : 'hidden',
            'z-index'            : 1000
        }).inject($(document.body),'top');
    },
   
    bindRouteEvents                : function()
    {
        $(this.options.route.routeSubmit).addEvent('click',function(){
            if ($(this.options.route.routeInput).get('value').length > 0) {
                this.animateRoute($(this.options.route.routeInput).get('value'));
            }
        }.bind(this));
    },
   
    animateRoute                : function(address)
    {
        var tweenRouteWrapper        = new Fx.Morph(this.routeBase);
        var tweenRoute                = new Fx.Morph(this.route);
        var windowSize                = $(document.body).getSize();
        var tween                    = true;
       
        tweenRouteWrapper.start({
            'opacity'        : 0.9
        }).chain(function(){
            this.routeBase.addEvent('click',function(){
                if (!tween) {
                    this.routemap.destroy();
                    this.routeDescription.destroy();
                    tweenRoute.start({
                        'width'                : 1,
                        'height'            : 1,
                        'opacity'            : 0,
                        'left'                : 0,
                        'top'                : 0
                    }).chain(function(){
                        tween = true;
                        tweenRouteWrapper.start({
                            'opacity'        : 0
                        });
                    });
                }
            }.bind(this));
            tweenRoute.start({
                'width'                : 800,
                'height'            : 500,
                'opacity'            : 1,
                'left'                : (windowSize.x / 2) - 400,
                'top'                : (windowSize.y / 2) - 250
            }).chain(function(){
                tween = false;
                this.closer = new Element('div',{'html': 'X'}).setStyles({
                    'color'                    : '#ffffff',
                    'font-size'                : 18,
                    'position'                : 'absolute',
                    'top'                    : '-28px',
                    'right'                    : 0,
                    'cursor'                : 'pointer'
                }).inject(this.route).addEvent('click',function(){
                    if (this.routemap) this.routemap.destroy();
                    if (this.routeDescription) this.routeDescription.destroy();
                    if (this.error) this.error.destroy();
                    this.closer.destroy();
                    tweenRoute.start({
                        'width'                : 1,
                        'height'            : 1,
                        'opacity'            : 0,
                        'left'                : 0,
                        'top'                : 0
                    }).chain(function(){
                        tween = true;
                        tweenRouteWrapper.start({
                            'opacity'        : 0
                        });
                    });
                }.bind(this));
                this.routemap = new Element('div').setStyles({
                            'position'            : 'relative',
                            'width'                : 420,
                            'height'            : 490,
                            'float'                : 'left',
                            'border'            : '5px solid #D7DADC',
                            'visibility'        : 'hidden'
                        }).inject(this.route);
                this.routeDescription = new Element('div').setStyles({
                            'position'            : 'relative',
                            'width'                : 350,
                            'height'            : 500,
                            'float'                : 'right',
                            'overflow'            : 'auto',
                            'visibility'        : 'hidden'
                        }).inject(this.route);
               
                var routemap = new google.maps.Map(this.routemap, {
                    mapTypeId            : google.maps.MapTypeId.ROADMAP
                });
                var directionsService = new google.maps.DirectionsService();
                var directionsDisplay = new google.maps.DirectionsRenderer();
                directionsDisplay.setMap(routemap);
                  directionsDisplay.setPanel(this.routeDescription);
               
                var request = {
                      origin        : address + ', Nederland',
                      destination    : this.address,
                      travelMode    : google.maps.DirectionsTravelMode.DRIVING
                  }
                 
                  directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        this.routemap.setStyle('visibility','visible');
                        this.routeDescription.setStyle('visibility','visible');
                    } else {
                        this.routemap.destroy();
                        this.routeDescription.destroy();
                        this.error = new Element('div',{'html': 'Het adres wat u opgegeven heeft is niet gevonden. Probeer het nogmaals.'}).setStyles({
                            'position'                : 'absolute',
                            'width'                    : 300,
                            'left'                    : 250,
                            'top'                    : 250,
                            'font-weight'            : 'bold',
                            'cursor'                : 'pointer',
                            'text-align'            : 'center'
                        }).inject(this.route).addEvent('click',function(){
                            this.error.destroy();
                            tweenRoute.start({
                                'width'                : 1,
                                'height'            : 1,
                                'opacity'            : 0,
                                'left'                : 0,
                                'top'                : 0
                            }).chain(function(){
                                tween = true;
                                tweenRouteWrapper.start({
                                    'opacity'        : 0
                                });
                            });
                        }.bind(this));
                    }
                }.bind(this));
               
            }.bind(this));
        }.bind(this));
    }

});

window.addEvent('domready',function(){
	OldtimerForm();
	CallmeForm();
});