var HeaderLoop = new Class({
	
	Implements					: Options,
	
	options						:
	{
		'speed'						: 10000
	},
	
	initialize					: function(container,options)
	{
		this.setOptions(options);
		this.images		= $(container).getElements('img');
		this.count		= this.images.length;
		this.current	= 0;
		this.running	= false;
		this.loadImage();
		if (this.count > 1) this.loop = this.loadImage.periodical(this.options.speed,this,'next');
	},
	
	stopLoop					: function()
	{
		$clear(this.loop);
	},
	
	loadImage					: function(neg)
	{	
	
		this.running = true;
		this.images.setStyle('z-index',0);
		
		var current = false;
		
		if (neg) {
			var next = (this.current < this.count - 1) ? this.current + 1 : 0;
			var prev = (this.current == 0) ? this.count - 1 : this.current - 1;
			current			= this.images[this.current];
			var active 		= (neg == 'next') ? this.images[next] : this.images[prev];
			var previous 	= (neg == 'next') ? this.images[prev] : this.images[next];
		} else {
			var active 		= this.images[this.current];
			var previous 	= this.images[this.count - 1];
		}
		
		var tween = new Fx.Tween(active);
		active.setStyle('z-index',2);
		tween.start('opacity',0,1).chain(function(){
			if (current) current.setStyle('opacity',0);
			this.running = false;			
		}.bind(this));
		
		if (neg)
		{
			if (neg == 'next') {
				this.current++;
				if (this.current == this.count) this.current = 0;
			} else {
				this.current--;
				if (this.current == -1) this.current = this.count - 1;
			}
		}
		
	}
	
});

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%',
            '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));
    }

});