Ext.namespace('Flying.airport');
Flying.airport.RunwayItem = Ext.extend(Ext.util.Observable, {
	constructor: function(runway, config){
		this.runway = runway;
		Ext.apply(this, config);
		Flying.airport.RunwayItem.superclass.constructor.apply(this, arguments);
		this.init();
	}
	
	//Config
	,runway: null
	,side: 'left'
	,node: false
	,url: false
	,name: ''
	,cls: ''
	,src: false
	,onClick: function(){}
	,renderTo: null
	,resolutions: {}
	,loaded: false
	,autoLoad: false
	,expandBackground: false
	
	,init: function(){
		this.initListeners();
		this.initElement();
		this.initBackground();
		this.initInner();
		this.initNode();
		
		if(this.src){
			this.initLink();
			this.initImage();
		}
		
		//Load if autoLoad is on
		if(this.autoLoad){
			this.load();
		}
	}
	
	,initListeners: function(){
		this.runway.on('scroll', function(position){
			if((position.y + position.height) >= this.y){
				//console.log(this.name + " just scrolled into view");
			}
		}, this);
	}
	
	,initElement: function(){
		//Create the element
		this.el = Ext.DomHelper.overwrite(document.createElement('div'), {
			tag: 'div'
			,cls: 'runway-item ' + this.cls
		}, true);
		
		//Add classes
		if(this.name.length){
			this.el.addClass(this.name);
		}
		
		//Render Element
		if(this.renderTo != null){
			Ext.get(this.renderTo).appendChild(this.el);
		}
	}
	
	,initBackground: function(){
		this.background = Ext.get(Ext.DomHelper.append(this.el, {
			tag: 'div'
			,cls: 'runway-item-background'
		}));
		
		//Add classes
		if(this.name.length){
			this.background.addClass(this.name + '-background');
		}
		
		if(this.expandBackground){
			this.on('load', function(){
				this.background.setHeight(this.el.getHeight());
				if(this.side == 'left'){
					this.background.setWidth(this.el.getRight());
				}
				if(this.side == 'right'){
					this.background.setWidth(this.runway.width - this.el.getLeft() - this.background.getLeft(true) - 20);
				}
			}, this, { delay: 100 });
			
			this.runway.on('resize', function(width, height){
				if(this.side == 'left'){
					this.background.setWidth(this.el.getRight());
				}
				if(this.side == 'right'){
					this.background.setWidth(width - this.el.getLeft() - this.background.getLeft(true) - 20);
				}
			}, this);
		}
	}
	
	,initNode: function(){
		if(!this.node){
			return false;
		}
		
		this.inner.appendChild(Ext.get(this.node));
		this.el.setHeight(Ext.get(this.node).getHeight());
	}
	
	,initInner: function(){
		//Create the element
		this.inner = Ext.DomHelper.overwrite(document.createElement('div'), {
			tag: 'div'
			,cls: 'runway-item-inner'
		}, true);
		
		//Add classes
		if(this.name.length){
			this.inner.addClass(this.name + '-inner');
		}
		
		//Render Element
		this.el.appendChild(this.inner);
	}
	
	,initLink: function(){
		this.link = Ext.get(Ext.DomHelper.append(this.inner, {
			tag: 'a'
			,href: this.url ? this.url : 'javascript:;'
		}));
		
		this.link.on('click', this.onClick, this);
	}
	
	,initImage: function(){
		this.image = Ext.get(Ext.DomHelper.append(this.link, {
			tag: 'img'
		}));
		
		//Create load listener
		this.image.on('load', this.onLoad, this);
		
		
		//Listen for a resolution change
		this.runway.on('resolution', function(){
			this.image.dom.src = this.getUrl();
		}, this);
		
		this.on('load', function(){
			//Set the height based on the image
			this.el.setHeight(this.image.getHeight());
			this.el.show();

			/*
			this.el.scale(null, this.image.getHeight(), {
				duration: 1
				,scope: this
				,easing: 'bounceOut'
				,callback: function(){
					
				}
			});
			*/
		}, this);
	}
	
	,initResolutions: function(){
		var resolutions = this.runway.getResolutions();
		for(var i = 0; i < resolutions.length; i++){
			if(this.resolutions[resolutions[i]] == null){
				var image = Ext.get(document.createElement('img'));
				image.dom.src = this.getUrl(resolutions[i]);
			}
		}
	}
	
	,onRender: function(){
		
	}
	
	,onLoad: function(){
		//Save the position
		this.x = this.el.getX();
		this.y = this.el.getY();
		
		//Set loaded as true
		this.loaded = true;
		
		//Fire the event
		this.fireEvent('load', this);
	}
	
	,load: function(){
		if(this.src){
			this.image.dom.src = this.getUrl();
			//Add to the resolutions object
			this.resolutions[this.runway.getResolution()] = true;
			this.initResolutions();
		}
		else{
			this.onLoad();
		}
	}
	
	,getEl: function(){
		return this.el;
	}
	
	,getUrl: function(resolution){
		if(resolution == null){
			resolution = this.runway.getResolution();
		}
		return this.runway.imagesUrl + resolution + "/" + this.src;
	}
	
});