Ext.onReady(function(){
	var portfolio = new Papercut.Portfolio();
});

Ext.Element.prototype.fadeInChildren = function(config){
	var settings = {
		selector: ''
		,duration: 1
		,wait: .25
	}
	Ext.apply(settings, config);
	
	this.select(settings.selector).each(function(el, items, index){
		//compute the wait time
		var wait = 0;
		if(index){
			wait = (index*settings.wait);
		}
		
		//Set up the event
		setTimeout(function(){
			var el = Ext.get(arguments[0]);
			el.fadeIn({
				duration: settings.duration
			});
		}.createDelegate(this, [el.dom.id]), wait*1000);
	});
};

Papercut.Portfolio = Ext.extend(Ext.util.Observable, {
	constructor: function(settings){
		//Apply Settings
		Ext.apply(this, settings);
		
		//Add events
		this.addEvents(
			'beforeshowproject'
			,'showproject'
		);
		
		//Call super
		Papercut.Portfolio.superclass.constructor.apply(this, arguments);
		
		//Init this component
		this.init();
	}
	
	//vars
	,carousel: null
	,fader: null
	,projectSelector: '.portfolio-project-container'
	,projects: {}
	,loading: false
	,activeProject: null
	
	//Elements
	,projectContainer: 'portfolio-projects-container'
	,projectAnimationContainer: 'portfolio-projects-animation-container'
	,itemContainer: 'portfolio-item-container'
	,itemAnimationContainer: 'portfolio-item-animation-container'
	,loadingContainer: null
	,imageContainer: 'portfolio-item-image-container'
	,thumbContainer: 'portfolio-item-thumbnail-container'
	,contentContainer: 'portfolio-item-content'
	,titleContainer: 'portfolio-item-title'
	,projectListContainer: 'portfolio-project-list'
	,pagingContainer: 'portfolio-paging'
	
	//Controls
	,nextButton: null
	,previousButton: null

	
	,init: function(){
		this.initElements();
		this.initControls();
		this.initCarousel();
		this.initProjects();
		this.initProjectList();
		this.initProject();
		this.initFader();
	}
	,initElements: function(){
		this.projectContainer = Ext.get(this.projectContainer);
		this.projectContainer.setVisibilityMode(Ext.Element.DISPLAY);
		
		this.projectAnimationContainer = Ext.get(this.projectAnimationContainer);
		this.projectAnimationContainer.setVisibilityMode(Ext.Element.DISPLAY);
		
		this.itemContainer = Ext.get(this.itemContainer);
		this.itemContainer.setVisibilityMode(Ext.Element.DISPLAY);
		
		this.itemAnimationContainer = Ext.get(this.itemAnimationContainer);
		this.itemAnimationContainer.setVisibilityMode(Ext.Element.DISPLAY);
		
		this.loadingContainer = Ext.get(Ext.DomHelper.append(Ext.getBody(),{
			tag: 'div'
			,html: '<img src="/js/ext/resources/icons/loading.gif" height="20" />'
			,style: {
				position: 'absolute'
				,top: 0 + 'px'
				,left: 0 + 'px'
				,display: 'none'
			}
		}));
		this.loadingContainer.dom.style.zIndex = 300;
		
		this.loadingContainer.setVisibilityMode(Ext.Element.DISPLAY);
		
		this.imageContainer = Ext.get(this.imageContainer);
		
		this.thumbContainer = Ext.get(this.thumbContainer);
		
		this.contentContainer = Ext.get(this.contentContainer);

		this.titleContainer = Ext.get(this.titleContainer);
		
		this.projectListContainer = Ext.get(this.projectListContainer);
		
		this.pagingContainer = Ext.get(this.pagingContainer);
	}
	,initControls: function(){
		this.nextButton = Ext.get('portfolio-next');
		this.previousButton = Ext.get('portfolio-previous');
		this.backToProjectButton = Ext.get('back-to-project');
		this.nextProject = Ext.get('browse-next');
		this.previousProject = Ext.get('browse-previous');
		
		this.nextButton.on('click', function(){
			this.carousel.next();
		}, this);
		
		this.previousButton.on('click', function(){
			this.carousel.previous();
		}, this);
		
		this.backToProjectButton.on('click', function(){
			this.showProjects();
		}, this);
		
		this.nextProject.on('click', function(){
			var albumId = this.nextProject.getAttribute('_album');
			if(albumId){
				this.loadProject(albumId);
			}
		}, this);
		
		this.previousProject.on('click', function(){
			var albumId = this.previousProject.getAttribute('_album');
			if(albumId){
				this.loadProject(albumId);
			}
		}, this);
	}
	,initCarousel: function(){
		this.carousel = new Ext.ux.Carousel({
			container: 'portfolio-page-container'
			,selector: '.portfolio-page-item'
			,width:750
			,height:550
			,easing: 'easeBoth'
			,slideshow: false
			,autoStart: false
			,animationDuration: .75
		});
		
		//setup paging
		this.pagingContainer.dom.innerHTML = "Page 1 of " + this.carousel.items.length;
		this.carousel.on('change', function(){
			this.pagingContainer.dom.innerHTML = "Page " + (this.carousel.currentIndex+1) + " of " + this.carousel.items.length;
		}, this);
	}
	,initProjects: function(){
		//Get all projects
		Ext.select(this.projectSelector).each(function(el){
			if(el.getAttribute('_album')){
				
				//Add Click handler
				el.on('click', function(event, el){
					//Prevent default
					event.preventDefault();
					
					//get the element
					var element = Ext.get(event.getTarget(this.projectSelector));
					this.activeProject = element;
					
					//get the image
					var image = Ext.get(element.select('.image').elements[0]);
					
					//create a mask
					image.mask();
					
					//Get the mask and set the opacity
					Ext.get(image.select('.ext-el-mask').elements[0]).setOpacity(.75);
					
					//Show loader
					this.showLoading(image);
					
					//Get album
					var albumId = element.getAttribute('_album');
					
					//Load the project
					this.loadProject(albumId);
					
					
				}, this);
				
				//Add hover class
				el.addClassOnOver('portfolio-project-container-over');
			}
		}, this);
		
		//Add listeners
		this.on('showproject', function(){
			if(this.activeProject != null){
				//Get the image
				var image = Ext.get(this.activeProject.select('.image').elements[0]);
				
				//Unmask the element
				image.unmask();
			}
		}, this);
		
	}
	,initProjectList: function(){
		//get elements
		var trigger = Ext.get(this.projectListContainer.select('.trigger').elements[0]);
		var list = Ext.get(this.projectListContainer.select('.list').elements[0]);
		
		this.projectListContainer.on('mouseenter', function(){
			list.show();
		}, this);
		
		this.projectListContainer.on('mouseleave', function(){
			list.hide();
		}, this);
		
		//get the list items
		this.projectListContainer.select('.list-item').each(function(el){
			
			el.addClassOnOver('list-item-over');
			
			el.on('click', function(event, el){
				var element = Ext.get(event.getTarget('.list-item'));
				var albumId = element.getAttribute("_album");
				this.loadProject(albumId);		
			}, this);
			
		}, this);
	}
	,initProject: function(){
		this.on('beforeshowproject', function(){
			this.thumbContainer.select('.thumbnail').each(function(el){
				el.hide();
			}, this);
		}, this);
		this.on('showproject', function(){
			this.thumbContainer.fadeInChildren({
				selector: '.thumbnail'
				,duration: .5
				,wait: .5
			});
		}, this);
	}
	,initFader: function(){
		this.fader = new Ext.ux.Fader({
			container: this.imageContainer.dom.id
			,selector: '.image'
			,autoStart: false
			,slideshow: false
		});
		
		//Set up thuumbnail actions
		this.thumbContainer.select('.thumbnail').each(function(el){
			
			//Add hover class
			el.addClassOnOver('thumbnail-over');
			
			//Add click handler
			el.on('click', function(event, el){
				var thumb = event.getTarget('.thumbnail');
				var photoId = thumb.getAttribute('_image');
				
				//Find the photo in the fader images
				for(var i = 0; i < this.fader.items.length; i++){
					var image = Ext.get(this.fader.items[i]);
					if(image.getAttribute("_image") == photoId){
						
						//Show the photo
						this.fader.showIndex(i);
						return;
					}
				}
				
			}, this);
			
		}, this);
	}
	,loadProject: function(albumId){
		
		if(!this.loading && albumId != null){
			//set the loading
			this.loading = true;
			
			//Load the project
			Ext.Ajax.request({
				scope: this,
				url: '/ajax/portfolio/process/project',
				params: { albumId: albumId },
				success: function(r){
					//get the response
					var response = Ext.util.JSON.decode(r.responseText);
					//Set loading 
					this.loading = false;
					
					//Hide the loading
					this.hideLoading();
					
					//Load the project details
					this.imageContainer.dom.innerHTML = response.images;
					this.thumbContainer.dom.innerHTML = response.thumbs;
					this.contentContainer.dom.innerHTML = response.content;
					this.titleContainer.dom.innerHTML = response.title;
					this.nextProject.set({
						"_album": response.next
					});
					this.previousProject.set({
						"_album": response.previous
					});
					
					//Init Fader
					this.initFader();
					
					//call event
					this.fireEvent('beforeshowproject');
					
					//Show the project
					this.showProjectItem();
					
				}
			});
		}
	}
	,showLoading: function(el){
		//Get box of element
		var elBox = el.getBox();
		var loadingBox = this.loadingContainer.getBox();
		
		//Compute top and left
		var left = elBox.x + (elBox.width/2) - 10;
		var top = elBox.y + (elBox.height/2) - 10;
		
		//Set the location and show
		this.loadingContainer.setLeftTop(left, top);
		this.loadingContainer.show();
	}
	,hideLoading: function(){
		this.loadingContainer.hide();
	}
	,showProjectItem: function(){
		this.projectAnimationContainer.fadeOut({
			duration: .25
			,useDisplay: true
			,callback: function(){
				this.itemAnimationContainer.show();
				this.fireEvent('showproject');
			}.createDelegate(this)
		});
		
		//this.itemAnimationContainer.show();
		/*
		this.projectAnimationContainer.animate(
		    {
		        height: { to: 0, from: this.projectContainer.getHeight() }
		    },
		    .75,
		    function(){
		    	this.itemAnimationContainer.animate(
		    		{
		    			height: { to: this.itemContainer.getHeight() , from: 0 }
		    		},
		    		.75,
		    		function(){
		    			this.fireEvent('showproject');
		    		}.createDelegate(this),
		    		'easeBoth',
		    		'run'
		    	);
		    }.createDelegate(this),
		    'easeBoth',
		    'run'   
		);
		*/
	}
	,showProjects: function(){
		this.itemAnimationContainer.fadeOut({
			duration: .25
			,useDisplay: true
			,callback: function(){
				this.projectAnimationContainer.show({
					duration: .25
				});
			}.createDelegate(this)
		});
		/*
		this.itemAnimationContainer.animate(
		    {
		        height: { to: 0, from: this.itemContainer.getHeight() }
		    },
		    .75,
		    function(){
		    	this.projectAnimationContainer.animate(
		    		{
		    			height: { to: this.projectContainer.getHeight() , from: 0 }
		    		},
		    		.75,
		    		null,
		    		'easeBoth',
		    		'run'
		    	);
		    }.createDelegate(this),
		    'easeBoth',
		    'run' 
		);
		*/
	}
	,getProjects: function(){
		return;
		Ext.Ajax.request({
			scope: this,
			url: '/ajax/portfolio/process/projects',
			params: {  },
			success: function(r){
				var response = Ext.util.JSON.decode(r.responseText);
				Ext.get(this.carousel.getItem(0)).dom.innerHTML = response.html;
			}
		});
		
	}
});