/**************************************
 *	imageGallery v1.0 bèta
 *	Author:		David Candreva <david@inventis.be>
 **************************************/

var designerGallery = new Class({
	
	options:{
		toolbar:	false,
		renderEl:	false,
		content:	false,
		items:		false,
		designerLink:	2
	},
	
	selectedImage:		false,
	selectedCategory:	false,
	filter: 			false,
	tag:				false,
	
	related_id:			false,
	url:				'/nl/home/jsonhomeprojects/',
	
	busy:			false,
	
	start:				0,
	limit:				12,
	minHeight:			843,
	setHeight:			false,
	extraRowLimit:		19,
	
	limitPerPage:		12,
	
	currentPage:		0,
	
	/**
	 *	Initialize
	 */
	initialize: function(options){
		this.setBusy(true);
		this.setOptions(options);
		this.rootURL = document.URL;
		var urlNodes = this.rootURL.split("/");
		this.lang  = urlNodes[3].substring(0,2);
		
		//console.log(this.options.url);
		if(this.options.url != this.url)
		{
			this.url = this.options.url;
		}
		
		// Defaults
		if(!this.selectedCategory){
			this.selectedCategory = this.options.items[0];
		}
		
		// Make the "titels"
		this.createTitles();
		this.createPagination();
		
		// In this functin we do the load
		this.setData();
		this.checkPageSize();
		this.windowResizeEvent();
	},
	
	
	setData: function(){
		
		switch(this.selectedCategory){

			case this.options.items[0]:
				this.filter		= 1;
				break;
				
			case this.options.items[1]:
				this.filter		= 2;
				break;
				
			case this.options.items[2]:
				this.filter		= 3;
				break;
		}
		
	},
	
	/**
	 *	loadData
	 */
	loadData: function(disableLoadTags, disableLoadGallery){
		request = new Json.Remote(this.url +'?tag=' + this.tag + '&related_id='+ this.related_id+'&filter='+this.filter+'&start='+this.start+'&limit='+this.limit, {
			method: 'get',
			onComplete: function(jsonObj) {
				this.loadOnce = false;
				if(!disableLoadGallery){
					this.loadGallery(jsonObj);
					this.paginationHandler(jsonObj.count);
				}
				if(!disableLoadTags){
					this.options.tagEL.empty();
					this.addTags(jsonObj.tags);
				}
			}.bind(this)
		}).send();
	},

	/**
	 * loadGallery
	 */
	loadGallery: function(json){
		if(json.success == true){
			this.options.content.setHTML('');
			this.setGalleryContent(json.data);
		} else {
			this.options.content.setHTML("");
		}
	},

	/**
	 * createTitles
	 */
	createTitles: function(){
		var itemsIndex = 0;
		this.options.items.each(function(el){
			h2 = new Element('h2', {id:el}).setHTML(el).injectInside(this.options.toolbar);
			if(itemsIndex == 0) h2.addClass('title');
			
			// Add click event
			h2.addEvent('click', this.categoryChange.bind(this, h2));
			
			itemsIndex++;
		}.bind(this));
		h2 = new Element('h2', {id:'searchForm'}).setHTML($('hiddenForm').innerHTML).injectInside(this.options.toolbar);
	},
	
	setBusy: function(bool)
	{
		this.busy = bool;
	},
	
	/**
	 * setGalleryContent
	 */
	setGalleryContent: function(json){
		var i = 1;
		this.setBusy.delay((json.length-1)*400, this, [false]);
		
		json.each(function(image){
			this.createImage.delay(400 * i, this, [image, i]);
			i++;
		}.bind(this));
	},

	/**
	 * windowResizeEvent
	 */
	windowResizeEvent: function(){
		window.addEvent('resize',this.checkPageSize.bind(this));
	},

	/**
	 * checkPageSize
	 */
	checkPageSize: function(){
		var height = window.getHeight();
		
		if(!this.setHeight){
			if(height > this.minHeight){
				this.limit = this.extraRowLimit;
			}
			this.loadData();
			this.setHeight = height;
		} else {
			if(height > this.minHeight && height > this.setHeight){
				
				if(this.limit !== this.extraRowLimit){
					this.start = 0;
					this.limit = this.extraRowLimit;
					this.loadData();
				} else {
					this.limit = this.extraRowLimit;
				}
				
				this.setHeight = height;
			}
		}
	},
	
	/**
	 * createImage
	 */
	createImage: function(image, i){
		var div = new Element('div', {id: image.id}).injectInside(this.options.content);;
		div.addClass('image img_'+i);
		var img = new Element('img', {src: '/nl/image/getcrop/199/'+image.filename, alt:''}).injectInside(div);
		var span = new Element('span').setHTML(image.designer_name).injectInside(div);
		
		// Add handlers
		div.addEvent('click', this.addHandlers.bind(this, div));
		
		// Opacity change effect
		var opacChange = new Fx.Style(div, 'opacity', {duration:400}).start(0, 1);
	},

	/**
	 * addHandlers
	 */
	addHandlers: function(div){
		id =  div.getAttribute('id').split('_');
		window.location = '/'+this.lang + '/designer/'+ id;
	},

	/**
	 * bubbleBox
	 */
	bubbleBox: function(id){
		if(designerGallery.activeBubbleBox){
			designerGallery.activeBubbleBox.closeBox();	
		}
		designerGallery.activeBubbleBox = new bubbleBox({ajaxRequest: id});
	},

	/**
	 * zIndexChange
	 */
	zIndexChange: function(image){
		
		// Restore old image
		if(this.selectedImage){
			this.selectedImage.setStyle('z-index', this.selectedImage.previousZIndex);	
		}
		
		// Set new image
		var zIndex = image.getStyle('z-index');
		image.previousZIndex = zIndex;
		image.setStyle('z-index', zIndex+2);
		this.selectedImage = image;
	},
	
	/**
	 * categoryChange
	 */
	categoryChange: function(item){
		if(this.busy == false)
		{
			this.setBusy(true);
			this.tag = false;
			var id = item.getAttribute('id');
			var doLoad = false;
			
			if(this.selectedCategory !== id){
				this.setActiveCategory(item);
				this.selectedCategory = id;
			} else {
				doLoad = true;
			}
	
			this.setData();
			this.loadData(false, doLoad);
		}
	},
	
	setActiveCategory: function(item){
		var parentNode = item.parentNode;
		parentNode.getChildren().removeClass('title');
		item.injectTop(parentNode);
		item.addClass('title');
	},

	/**
	 * addTags
	 */
	addTags: function(json){
		if(json && json.length > 0){
		
			var items = json.length;
			var newItems = new Array();
			
			var count = 1;
			var bigS = items / 3;
			var middleS = items / 2;
			
			var cls = "";
			
			json.each(function(link){
				
				if(count <= bigS){
					cls = 'big';
				} else if(count >= bigS && count <= middleS){
					cls = 'middle';
				} else {
					cls = 'normal';
				}
				link['class'] = cls;
				newItems.push(link);
				
				count++;
			});
			
			newItems.sort(randOrd);
			
			newItems.each(function(link){
				this.createLink(link);
			}.bind(this));
			
		} else {
			this.options.tagEL.setHTML("");
		}
	},

	/**
	 * createLink
	 */
	createLink: function(link){
		element = new Element('a', {title: link.name, rel:link.id}).setHTML(link.name+' ').injectInside(this.options.tagEL);
		
		element.addClass(link['class']);
		element.addEvent('click', this.prepareLoad.bind(this));
		
		// insert space span behind link
		new Element('span').setHTML(' &nbsp;').injectInside(this.options.tagEL);
	},

	/**
	 * prepareLoad
	 */
	prepareLoad: function(el){
		if(this.busy == false)
		{
			this.setBusy(true);
			el = new Event(el);
			if(this.filter == this.options.designerLink){
				window.location = '/'+this.lang + '/designer/'+ el.target.getAttribute('rel');
			} else {
				var id = el.target.getAttribute('rel');
				
				if(this.tag !== id){
					this.tag = id;
					this.loadData(true);
				}
			}
		}
	},

	/**
	 * createPagination
	 */
	createPagination: function(count){
		this.navigateLeft = new Element('div',{id:'galleryLeft'}).injectInside(this.options.renderEL).setHTML('<');
		this.navigateRight = new Element('div',{id:'galleryRight'}).injectInside(this.options.renderEL).setHTML('>');
	},

	/**
	 * paginationHandler
	 */
	paginationHandler: function(count){
		this.totalItems = count;
		
		this.navigateRight.removeEvents();
		this.navigateLeft.removeEvents();
		
		// If the total items > this.limit display nextItem
		if(this.totalItems > this.limit){
			this.navigateRight.removeClass('hidden');
			this.navigateRight.addEvent('click', this.nextPage.bind(this));
		} else{
			this.navigateRight.addClass('hidden');
		}
		
		if(this.start > 0){
			this.navigateLeft.removeClass('hidden');
			this.navigateLeft.addEvent('click', this.previousPage.bind(this));
		} else{
			this.navigateLeft.addClass('hidden');
		}
	},
	
	nextPage: function(){
		this.currentPage++;
		this.start = this.limit * this.currentPage;
		//this.limit = this.limit + this.limitPerPage;
		//this.limit = this.limitPerPage;
		window.scrollTo(0,0);
		
		this.loadData();
	},
	
	previousPage: function(){
		this.currentPage--;
		//this.start = this.start - this.limitPerPage;
		//this.limit = this.limit - this.limitPerPage;
		this.start = this.limit * this.currentPage;
		window.scrollTo(0,0);
		this.loadData();
	}
	
});
designerGallery.implement(new Options);

function randOrd(){
	return (Math.round(Math.random())-0.5);
}