Ext.namespace('Flying.airport');
Flying.airport.Runway = Ext.extend(Ext.util.Observable, {
	constructor: function(runway, left, right, config){
		this.el = Ext.get(runway);
		this.left = Ext.get(left);
		this.right = Ext.get(right);
		
		//Reset arrays
		this.leftItems = [];
		this.rightItems = [];
		this.items = [];
		this.itemsNameMap = {};
		
		Ext.apply(this, config);
		Flying.airport.Runway.superclass.constructor.apply(this, arguments);
		
		this.init();
	}
	
	//Config
	,el: null
	,itemsEl: null
	,imagesUrl: '/img/runway/'
	,imageRoot: '/img/'
	,resolutions: [
		'1024'
	]
	,resolution: ''
	,leftItems: []
	,rightItems: []
	,items: []
	,itemsNameMap: {}
	
	,init: function(){
		//Init runway itms
		this.initWindow();
		this.initResolution();
		this.initRunway();
		this.initItems();
		this.initAirplane();
		this.renderItems();
		
		//Init the clouds
		//this.initClouds();
	}
	
	,initClouds: function(){
		this.cloud = new Flying.airport.Cloud(this);
	}
	
	,renderItems: function(){
		if(this.items.length){
			for(var i = 0; i < this.items.length; i++){
				var item = this.items[i];
				var lastItem = this.items[i-1];
				
				//Add a listener to the previous item
				//lastItem.on('load', function(item){
					item.load();
				//}.createDelegate(this, [item]));
			}
			
			//Load the first item
			//this.items[0].load();
		}
	}
	
	,initWindow: function(){
		Ext.EventManager.on(window, 'scroll', function(){
			var position = this.getScrollPosition();
			position.width = this.width;
			position.height = this.height;
			this.fireEvent('scroll', position);
		}, this);
		
		Ext.EventManager.on(window, 'resize', function(){
			//Save the dimenstions for easy access
			this.width = Ext.lib.Dom.getViewWidth();
			this.height = Ext.lib.Dom.getViewHeight();
			
			this.fireEvent('resize', this.width, this.height);
		}, this);
		
		this.width = Ext.lib.Dom.getViewWidth();
		this.height = Ext.lib.Dom.getViewHeight();
	}
	
	,initResolution: function(){
		this.resolution = this._computeResolution();
		
		this.on('resize', function(width, height){
			this.updateResolution();
		}, this);
	}
	
	,initAirplane: function(){
		this.airplane = Ext.get(Ext.DomHelper.append(this.el, {
			tag: 'img'
			,src: '/img/layout/plane.png'
			,cls: 'airplane'
		}));
		
		this.on('scroll', this.animateAirplane, this);
		this.on('resize', this.animateAirplane, this);
		this.animateAirplane();
	}
	
	,animateAirplane: function(){
		var scroll = this.getScrollPosition();
		var moveTo = 300;
		if(scroll.y > this.y){
			var moveTo = (scroll.y - this.y) + (this.height/2) - (this.airplane.getHeight()/2);
		}
		
		//Load the forward or reverse image
		if(moveTo >= this.airplane.getTop() - (this.airplane.getHeight()/2)){
			this.airplane.dom.src = '/img/layout/plane.png';
		}
		else{
			this.airplane.dom.src = '/img/layout/plane-reverse.png';
		}
		
		
		//Cancel the current running animation
		if(this.airplaneAnimation != null){
			this.airplane.stopFx();
		}
		
		//Animate the airplane
		this.airplaneAnimation = this.airplane.animate(
		    {
		    	top  : { to: moveTo }
		    },
		    2,      // animation duration
		    null,      // callback
		    'easeOut', // easing method
		    'run'      // animation type ('run','color','motion','scroll')    
		);
	}
	
	,initRunway: function(){
		//Add the left runway section
		this.runwayLeft = Ext.get(Ext.DomHelper.overwrite(document.createElement('div'), {
			tag: 'div'
		}));
		this.left.insertFirst(this.runwayLeft);
		
		//Add the right runway section
		this.runwayRight = Ext.get(Ext.DomHelper.overwrite(document.createElement('div'), {
			tag: 'div'
		}));
		this.right.insertFirst(this.runwayRight);
		
		this.x = this.el.getX();
		this.y = this.el.getY();
	}
	
	,initItems: function(){
		var i = 0;
		//Combine the items
		for(i = 0; i < this.leftItems.length; i++){
			//Add left item
			this.addLeftItem(this.leftItems[i]);
			
			//Add right item
			if(this.rightItems[i] != null){
				this.addRightItem(this.rightItems[i]);
			}
		}
		
		if(this.rightItems.length > this.leftItems.length){
			for(i = this.leftItems.length-1; i < this.rightItems.length; i++){
				this.addRightItem(this.rightItems[i]);
			}
		}
		
		//this.addLeftItem(this.leftItems);
		//this.addRightItem(this.rightItems);
	}
	
	,addLeftItem: function(config){
		if(config.length != null){
			var items = [];
			for(var i = 0; i < config.length; i++){
				items.push(this.addLeftItem(config[i]));
			}
			return items;
		}
		
		//Add items to the config
		Ext.apply(config, {
			renderTo: this.runwayLeft
			,side: 'left'
		});
		
		//Create the item
		return this.addItem(config);
	}
	,addRightItem: function(config){
		if(config.length != null){
			var items = [];
			for(var i = 0; i < config.length; i++){
				items.push(this.addRightItem(config[i]));
			}
			return items;
		}
		
		//Add items to the config
		Ext.apply(config, {
			renderTo: this.runwayRight
			,side: 'right'
		});
		
		//Create the item
		return this.addItem(config);
	}
	
	,addItem: function(config){
		//Ensure a name exists
		if(config.name == null && config.src != null){
			config.name = config.src;
		}
		
		//Create the item
		var item = new Flying.airport.RunwayItem(this, config);
		
		//Add to name map
		this.items[config.name] = item;
		
		//Add to items array
		this.items.push(item);
		
		//Return the item
		return item;
	}
	
	,getEl: function(){
		return this.el;
	}
	
	,getScrollPosition: function(){
		var scrollTop = document.body.scrollTop;
		var scrollLeft = document.body.scrollTop;
		if (scrollTop == 0){
		    if (window.pageYOffset){
		        scrollTop = window.pageYOffset;
		    }
		    else{
		        scrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
		    }
		}
		if (scrollLeft == 0){
		    if (window.pageXOffset){
		        scrollLeft = window.pageXOffset;
		    }
		    else{
		        scrollLeft = (document.body.parentElement) ? document.body.parentElement.scrollLeft : 0;
		    }
		}
		return {
			x: scrollLeft
			,y: scrollTop
		};
	}
	
	,_computeResolution: function(){
		var resolution = 0;
		var smallest = 0;
		var width = this.width;
		for(var i = 0; i < this.resolutions.length; i++){
			var res = parseInt(this.resolutions[i]);
			if(width >= res && res > resolution){
				resolution = res;
			}
			if(!i){
				smallest = res;
			}
			else{
				if(res < smallest){
					smallest = res;
				}
			}
		}
		
		if(resolution == 0){
			resolution = smallest;
		}
		
		return resolution;
	}
	
	,updateResolution: function(){
		var currentResolution = this.resolution;
		var newResolution = this._computeResolution();
		if(newResolution != currentResolution){
			this.resolution = newResolution;
			this.fireEvent('resolution', this.resolution);
		}
	}
	
	,getResolutions: function(){
		return this.resolutions;
	}
	
	,getResolution: function(){
		return this.resolution;
	}
	
});