var AIALA = AIALA || {};

AIALA.GMap = new Class({

	Implements: [Options],
	options: {
		google: {
			zoom: 14,
		    disableDefaultUI: true,
		    scrollwheel: false,
		    mapTypeId: google.maps.MapTypeId.TERRAIN
		}
	},
	
	initialize: function(el, center, options) {
      this.setOptions(options);
      this.canvas = document.id(el).setStyle('zIndex', 0);
      this.options.google.center = center;
      this.map = new google.maps.Map(this.canvas, this.options.google);
      this.overlay = new AIALA.GMap.Overlay(this.map, center);
      this.overlay.setMap(this.map);	
	}
});

AIALA.GMap.Overlay = new Class({
	Extends: google.maps.OverlayView,
	initialize: function(map, latlng) {
	  this.map_ = map;
	  this.div_ = null;
	  this.latlng_ = latlng;
	},
	
	draw: function() {}
});

AIALA.MappableEvent = new Class({

	Implements: [Options, Events],
	options: {
		assets_path: ''
	},
	
	initialize: function(el, gmap, options) {
	
		this.setOptions(options);
		this.element = el;
		//this.element.getElement('.bar-content').setStyle('margin-right', 130);
		this.gmap = gmap;
		this.collapsed = true;
		
		//console.log(el);
		
		/*this.bar = new Element('div', {
			'class': 'aia-mappableevent-bar',
			styles: {
				position: 'absolute',
				width: '5px',
				top: this.element.getPosition().y,
				left: this.element.getPosition().x + this.element.getSize().x - 5,
				height: this.element.getSize().y
			}
		}).inject(document.body);
		
		this.arrow = new Element('img', {
				src: this.options.assets_path+'/arrow-right.png',
				'class': 'aia-mappableevent-arrow',
				styles: {
					position: 'absolute',
					display: 'none',
					left: this.element.getPosition().x + this.element.getElement('.bar-content').getSize().x
				}
		}).inject(document.body);*/
		
		
		
		
		this.mark();
		this.collapse();
	},
	
	mark: function() {
		var color = this.element.hasClass('today') ? 'r' : 'b';
		var type = this.element.getElement('.type').get('text');	
		this.geo = {
				lat: this.element.getElement('.latitude').get('text'),
				lng: this.element.getElement('.longitude').get('text')
		};				
		
		var image = new google.maps.MarkerImage(this.options.assets_path+'/mark-'+ type.toLowerCase().replace(/\s+/g,'-').replace(/[^a-z0-9\-]/g,'') +'-sm-'+ color +'.png',
			        new google.maps.Size(31, 31),
			        new google.maps.Point(0,0),
			        new google.maps.Point(0, 31));		
			        
		var coord = new google.maps.LatLng(this.geo.lat, this.geo.lng);
		
		var marker = new google.maps.Marker({
		          position: coord,
		          map: this.gmap.map,
		          icon: image,
		          shape: { coord: [0, 0, 0, 30, 30, 30, 30 , 0], type: 'poly' },
		          title: this.element.getElement('h2 a').get('text')
		});
		
		google.maps.event.addListener(marker, 'click', function(e) {
			        location.href = this.element.getElement('h2 a').get('href');
		}.bindWithEvent(this));
	},
	
	expand: function() {
	
		if(this.delay)
		{
			$clear(this.delay);
		}
		
		this.collapsed = false;
		//$$(this.element.getElement('.excerpt'), this.element.getElement('.links'), this.element.getElement('img')).setStyle('display', '');
		//this.rebar();
		this.element.addClass('active');
		this.fireEvent('expand');
		
		this.panTo();
		
	},
	
	panTo: function() {
		var b = this.element.getElement('.bar-content');
		var point = {
				//x : this.arrow.getPosition().x + this.arrow.getSize().x + 15,
				//y : this.arrow.getPosition().y + (this.arrow.getSize().y/2) + 15
				x : b.getPosition().x + b.getSize().x + 48,
				y : b.getPosition().y + (b.getSize().y / 2) + 15
			};
		
		if(this.gmap.overlay.getProjection())
		{
			
			var focus = this.gmap.overlay.getProjection().fromLatLngToDivPixel(new google.maps.LatLng(this.geo.lat, this.geo.lng));
			
			if(focus) {
				this.gmap.canvas.setStyle('zIndex', 0);
				
				focus.x = focus.x + this.gmap.canvas.getSize().x/2;
		        focus.y = focus.y + this.gmap.canvas.getSize().y/2;
		        
		        focus.x = focus.x - point.x;
		        focus.y = focus.y - point.y;	        
		        
		        this.gmap.map.panTo(this.gmap.overlay.getProjection().fromDivPixelToLatLng(focus));
		        this.delay = this.fireEvent.delay(5000, this, 'panned');
			}
			
			this.delay = this.fireEvent.delay(5000, this, 'panned');
		}
	     
	},
	
	collapse: function() {
	
		this.collapsed = true;
		this.element.removeClass('active');
		
		//$$(this.element.getElement('.excerpt'), this.element.getElement('.links'), this.element.getElement('img')).setStyle('display', 'none');
		//this.rebar();
	}/*,
	
	rebar: function() {
	
		if(this.collapsed)
		{
			this.bar.removeClass('yellow-trans');
			this.bar.addClass('white-trans');
			this.element.getElement('.bar-content').removeClass('yellow-trans');
			this.element.getElement('.bar-content').addClass('white-trans');
			this.arrow.setStyle('display', 'none');
		}
		else
		{
			this.bar.removeClass('white-trans');
			this.bar.addClass('yellow-trans');		
			this.element.getElement('.bar-content').removeClass('white-trans');
			this.element.getElement('.bar-content').addClass('yellow-trans');
			this.arrow.setStyle('display', '');
			this.arrow.setStyle('top', this.element.getPosition().y + (this.element.getSize().y/2) - (this.arrow.getSize().y/2));	
		}
		
		this.bar.setStyle('top', this.element.getPosition().y);
		this.bar.setStyle('height', this.element.getSize().y);
	}*/
});

AIALA.MappableEvent.Carousel = new Class({

	Implements: [Events, Options],
	options: {
		/*onNext: $empty*/
	},
	
	initialize: function(ev, options) {
		this.setOptions(options);
		this.current = 0;
		this.current_instance = null;
		this.vevents = ev;
		this.paused = true;
		this.build();
	},
	
	build: function() {
		var instance = this;

		this.vevents.each(function(event, index) {
			event.element.store('aiala-mappableevent-carousel:index', index);

			event.element.getElement('h2 a').addEvent('click', function(e) {
				if(this.collapsed)
				{
					e.preventDefault();
					if(instance.delay)
					{
						$clear(instance.delay);
					}
					
					this.expand();
				}
				
			}.bindWithEvent(event));			
			
			event.addEvent(
				'expand', function() {
					if(instance.current_instance)
					{
						instance.current_instance.collapse();
					}
					instance.current = this.element.retrieve('aiala-mappableevent-carousel:index');
					instance.current_instance = this;
					
					instance.vevents.each(function(ev){
						ev.removeEvents('panned');
						//ev.rebar();
					});
					
					this.addEvent('panned', function() {
						if(!instance.paused)
						{
							instance.next();
						}
					});
				}
			);
		});	
	},
	
	next: function() {
		
		var c = this.current || 0;
		var index = (null == this.current_instance || (this.vevents.length - 1) == this.current) ? 0 : this.current + 1;
		if(!this.vevents[c].element.hasClass('today')) this.vevents[c].element.dispose().inject($('workWithArchitects'), 'before');
		else  this.vevents[c].element.dispose().inject($('aia-la-blog-bar'), 'before');
		
		this.vevents[index].element.dispose().inject($('aia-la-featured-bar'), 'after').fade('hide').fade('in');
		this.vevents[index].expand();
		this.fireEvent('next');
	},
	
	play: function() {
		this.paused = false;
		this.next();
	},
	
	pause: function() {
		this.paused = true;
	}
});

var Flyer = new Class({
	initialize: function (el, fly) {
		this.el = document.id(el);
		this.fly = document.id(fly).dispose().inject(document.body);
		this.fly.setStyles({
			zIndex: 50, 
			left: (this.el.getSize().x / 2) + this.el.getPosition().x - (this.fly.getSize().x / 2),
			opacity: 0
		});
		var img = this.fly.getElement('img'); 
		img.width = img.width + 30; 
		
		
		this.attach();
	},

	attach: function() {
		this.el.addEvents({
			mouseenter: function() {
				this.show();
			}.bind(this),
			mouseleave: function() {
				this.hide();
			}.bind(this)
		});
	},
	hide: function () {
		this.fly.transmorph({
			opacity: 0,
			top: (this.el.getPosition().y - this.fly.getSize().y) + 10
		});
	},
	show: function () {
		this.fly.setStyle('top', (this.el.getPosition().y - this.fly.getSize().y) + 10);
		this.fly.transmorph({
			opacity: 1,
			top: this.el.getPosition().y - this.fly.getSize().y
		});		
	}
	
}); 

function toggleWrappers(visible) {	

	$$('#contentCenterWrapper', '#footerWrapper', '.aia-mappableevent-bar', '.aia-mappableevent-arrow').setStyle('display', visible ? '' : 'none');
	
	var carousel = document.retrieve('aiala-mappableevent-carousel');
	if(carousel)
	{
		if(visible)
		{
			carousel.play();
		}
		else
		{
			carousel.pause();
		}
	}
}

Element.Events.clickout = {
  base : 'click',  // attach click event to element
  condition : function(event) {
    event.stopPropagation();  // stop event from bubbling up
    return false;  // never run handler when clicking on element
  },
  onAdd : function(fn) {
    this.getDocument().addEvent('click', fn);
  },
  onRemove : function(fn) {
    this.getDocument().removeEvent('click', fn);
  }
};

var DropdownPanel = new Class({
	initialize: function(panel) {
		this.panel = $(panel);
		
		this.top = this.panel.getPosition(this.panel.getParent()).y;
		this.panel.setStyle('top', this.panel.getPosition(this.panel.getParent()).y - this.panel.getSize().y);
		this.panel.fade('hide');
	},
	isExpanded: function() {
		return this.expanded;
	},
	collapse: function() {
		this.panel.transmorph({
			top: this.panel.getPosition(this.panel.getParent()).y - this.panel.getSize().y,
			opacity: 0,
			onComplete: function() {
				this.expanded = false;
			}.bind(this)
		});
	},
	expand: function() {
		this.panel.transmorph({
			top: this.top,
			opacity: 1,
			onComplete: function() {
				this.expanded = true;
			}.bind(this)
		});
	}		
});


window.addEvent('domready', function() {
  	var dropdown = $('aia-la-dropdown-panel'); 
  	dropdown.store('dropdown', new DropdownPanel(dropdown));
  	
  	dropdown.addEvent('clickout', function(e) {
		var target = $(e.target); 
		
		if('span' == target.get('tag') && 'sections' == target.get('html').toLowerCase()) {
			if(dropdown.retrieve('dropdown').isExpanded()) dropdown.retrieve('dropdown').collapse();
			else dropdown.retrieve('dropdown').expand();
			return;
		}
		
		if(dropdown.retrieve('dropdown').isExpanded()) {
			dropdown.retrieve('dropdown').collapse();
		}
	});
  	
	var gmap = new AIALA.GMap('siteWrapper', new google.maps.LatLng('34.0609449', '-118.308457'));
	gmap.canvas.setStyle('height', $('pageWrapper').getSize().y);		
	google.maps.event.trigger(gmap.map, 'resize');
	
	document.store('aiala-gmap', gmap);
	
	$('view_toggle').addEvent('click', function(e) {
	
		e.preventDefault(); var l = this.get('href');
		
		if(l == '#' || l == '#mapView') {
		  this.set({ 'href' : '#textView', 'html' : 'Show Text' });
		  toggleWrappers(false);
		} else {
		  this.set({ 'href' : '#mapView', 'html' : 'Show Map' });
		  toggleWrappers(true);
		}

	});
});