/*
 * 
 * Lightbox
 * 
 * 
 */


Lazzo.LightBox = Class.create(Lazzo.Mixin, {
	initialize: function() {
		this.docBody = $(document.body);
		this.dimmingElement = new Element('div', {id:'lightbox-element-outer'});
		this.dimmingElement.on('click', this.remove.bind(this))
		this.element = new Element('div', {id:'lightbox-element'});
		this.listen('LightBox.insert', this.insert.bind(this));
		this.listen('LightBox.remove', this.remove.bind(this));
	},
	insert: function(element) {
		
		this.insertedElement = element;
		
		if (!this.dimmingElement.parentNode) {
			var htmlElement = $$('html')[0];
			this.dimmingElement.setStyle({height:document.viewport.getDimensions().height + 'px'});	// set dimelement height
	
			if (this.interval) {
				clearInterval(this.interval);
			}
			this.interval = setInterval( function(){ this.dimmingElement.setStyle({height:document.viewport.getDimensions().height + 'px'}); }.bind(this), 50 );
			
			this.docBody.insert(this.dimmingElement);
			
			this.element.setStyle({top:htmlElement.scrollTop + 90 + 'px'});	// set dimelement height
			this.docBody.insert(this.element);
			
		};
		
		this.element.insert(this.insertedElement);
	},
	remove: function() {
		if (this.interval) {
			clearInterval(this.interval);
		};
		this.dimmingElement.remove();
		this.insertedElement.remove();
		this.element.remove();
	}
});
Lazzo.runLightBox = function() {
	try {
		new Lazzo.LightBox();
	} catch (e) {
		Lazzo.catching.error('LightBox', e);		
	}
};


/*
 * 
 * Lazzo.PopupInlinePhotos
 * 
 * 
 */

Lazzo.PopupInlinePhotos = Class.create(Lazzo.Mixin, {
	initialize: function(element) {
		this.element = element;
		this.element.select('img').each( this.attach.bind(this) );
		
		this.imageNode = new Element('img', {title:'close', className:'photo-gallery-image'});
		this.popupNode = new Element('div', {className:'photo-gallery-popup'});
		this.popupNode.insert(this.imageNode);
		
		this.imageNode.on('click', this.hide.bind(this));
	},
	attach: function( element ) {
		var a = element.up('a');
		if (a) {
			this.handle(a, ['click']);
		}
	},
	handleClick: function(evt) {
		evt.stop();
		var element = evt.findElement('a');
		var href = element.readAttribute('href');
		
		this.imageNode.writeAttribute('src', href);
		this.broadcast('LightBox.insert', this.popupNode);
	},
	hide: function() {
		this.broadcast('LightBox.remove');
	}
});
Lazzo.runPopupInlinePhotos = function() {
	try {
		$$('*[data-widget~=popup-inline-photos]').each(function(element) {
			new Lazzo.PopupInlinePhotos(element);
		});
	} catch (e) {
		Lazzo.catching.error('PopupInlinePhotos', e);		
	}
};



/*
 * 
 * Lazzo.ElementClickWidget
 * 
 * 
 */

Lazzo.ElementClickWidget = Class.create(Lazzo.Mixin, {
	initialize: function(element) {
		this.element = element;
		this.config = this.readConfig(element, 'element-click');
		this.aElement = element.down(this.config.select);
		if (this.aElement) {
			this.element.on('click', this.handleClick.bind(this))	
		}
	},
	handleClick: function(evt) {
		evt.stop();
		if (this.aElement.readAttribute('target') && this.aElement.readAttribute('target')=='_blank') {
			window.open(this.aElement.readAttribute('href'), '_blank');
			window.focus();
		} else {
			location.href = this.aElement.readAttribute('href');
		}
	}
});
Lazzo.runElementClickWidget = function() {
	try {
		$$('*[data-widget~=element-click]').each(function(element) {
			new Lazzo.ElementClickWidget(element);
		});
	} catch (e) {
		Lazzo.catching.error('ElementClickWidget', e);		
	}
};





/*
 * 
 * Lazzo.ReadMoreWidget
 * 
 * 
 */

Lazzo.ReadMoreWidget = Class.create(Lazzo.Mixin, {
	initialize: function(element) {
		this.config = this.readConfig(element, 'read-more');
		this.element = element.down(this.config.select);
		
		if (this.element && (this.element.scrollHeight > this.element.offsetHeight)) {
			
			this.element.innerHTML = this.element.innerHTML.gsub(/ /, '<span class="read-more-measure"> </span>');
			var offsetTop = 0; var i = 0;
			while (offsetTop < (this.element.offsetHeight-20)) {
				offsetTop = this.element.down('.read-more-measure', i).offsetTop;
				i++;
			};
			var rmElement = new Element('span', {className:'read-more'}).update('lees meer');
			this.element.down('.read-more-measure', i).insert(rmElement)
			var width = this.element.offsetWidth - rmElement.offsetLeft - rmElement.offsetWidth;
			width += 50;
			rmElement.setStyle({width:width+'px'});
		}
	}
});
Lazzo.runReadMoreWidget = function() {
	try {

		$$('*[data-widget~=read-more]').each(function(element) {
			new Lazzo.ReadMoreWidget(element);
		});
	} catch (e) {
		Lazzo.catching.error('ReadMoreWidget', e);		
	}
};


/*
 * 
 * 
 * Lazzo.RandomColorsWidget
 * 
 */

Lazzo.RandomColorsWidget = Class.create(Lazzo.Mixin, {
	initialize: function(element) {
		this.config = this.readConfig(element, 'random-colors');
		var numberOfColors = this.config['number-of-colors'];
		element.select(this.config.select).each(function(el) {
			var nr = Math.floor(Math.random() * (numberOfColors - 1 + 1)) + 1;
			el.addClassName('random-colors');
			el.addClassName('color'+nr);
		});
	}
});
Lazzo.runRandomColorsWidget = function() {
	try {
		$$('*[data-widget~=random-colors]').each(function(element) {
			new Lazzo.RandomColorsWidget(element);
		});
	} catch (e) {
		Lazzo.catching.error('RandomColors', e);		
	}
};

/*
 * 
 * Lazzo.BottomAlignWidget 
 * 
 */

Lazzo.BottomAlignWidget = Class.create(Lazzo.Mixin, {
	initialize: function(element) {
		this.element = element;
		window.onresize =  this.check.bind(this);
		this.check();
	},
	check: function() {
		var pageWrapper = $('page-wrapper')
		if (pageWrapper.offsetHeight < document.viewport.getDimensions().height-90) {
			pageWrapper.insert({after:this.element});
			this.element.addClassName('absolute');
		} else {
			pageWrapper.insert(this.element);
			this.element.removeClassName('absolute');
		}
	}
	
});
Lazzo.runBottomAlignWidget = function() {
	try {
		$$('*[data-widget~=bottom-align]').each(function(element) {
			new Lazzo.BottomAlignWidget(element);
		});
	} catch (e) {
		Lazzo.catching.error('BottomAlignWidget', e);		
	}
};


/*
 * 
 * 
 * Lazzo.PhotoGalleryWidget
 * 
 */

Lazzo.PhotoGalleryWidget = Class.create(Lazzo.Mixin, {
	initialize: function(wrapper) {
		this.wrapper = wrapper;
		
		//this.wrapper.select('img').each(this.appendOrientation.bind(this));
		this.wrapper.addClassName('orientation-appended');
		
		this.currentElement = null;
		
		this.imageNode = new Element('img', {title:'close', className:'photo-gallery-image'});
		this.nextNode = new Element('div', {title:'next image', className:'photo-gallery-image-next'});
		this.previousNode = new Element('div', {title:'previous image', className:'photo-gallery-image-previous'});
		this.popupNode = new Element('div', {className:'photo-gallery-popup'});
		
		this.popupNode.insert(this.imageNode).insert(this.previousNode).insert(this.nextNode);
		
		this.wrapper.select('a').each(this.wireAnchor.bind(this));
		
		this.nextNode.on('click', this.goNext.bind(this));
		this.previousNode.on('click', this.goPrevious.bind(this));
		
		this.imageNode.on('click', this.hideAll.bind(this));
		
	},
	appendOrientation: function(imgNode) {
		if (imgNode.offsetWidth >= imgNode.offsetHeight) {
			imgNode.addClassName('landscape');
		} else {
			imgNode.addClassName('portrait');
		}
	},
	wireAnchor: function(element) {
		this.handle(element, ['click']);
		element.on('custom:click', this.handleClick.bind(this));
	},
	handleClick: function(evt) {
		evt.stop();
		
		this.startOrientationTimer();
		
		var element = evt.findElement('a');
		this.currentElement = element;
		var href = element.readAttribute('href');
		this.imageNode.writeAttribute('src', href);
		if (!this.popupNode.parentElement)
			this.broadcast('LightBox.insert', this.popupNode);
		
		// handle prev and next visibility
		if (this.currentElement.up('dl').next('dl')) {
			this.nextNode.show();	
		} else {
			this.nextNode.hide();
		}
		if (this.currentElement.up('dl').previous('dl')) {
			this.previousNode.show();
		} else {
			this.previousNode.hide();
		}
		
	},
	goNext: function() {
		if (this.currentElement.up('dl').next('dl')) {
			this.currentElement.up('dl').next('dl').down('a').fire('custom:click');
		}
	},
	goPrevious: function() {
		if (this.currentElement.up('dl').previous('dl')) {
			this.currentElement.up('dl').previous('dl').down('a').fire('custom:click');
		}
	},
	hideAll: function() {
		this.stopOrientationTimer();
		this.broadcast('LightBox.remove');
		
	},
	startOrientationTimer: function() {
		this.orientationTimer = setInterval(
			function() {
				var h = this.imageNode.getHeight();
				var w = this.imageNode.getWidth();
				
				if (h>w) {
					this.imageNode.writeAttribute('class', 'photo-gallery-image-portrait');
				} else {
					this.imageNode.writeAttribute('class', 'photo-gallery-image-landscape');
				}
				
			}.bind(this),
			50
		);
	},
	stopOrientationTimer: function() {
		clearInterval( this.orientationTimer );
	}	
});
Lazzo.runPhotoGalleryWidget = function() {
	try {
		$$('*[data-widget~=photo-gallery]').each(function(element) {
			new Lazzo.PhotoGalleryWidget(element);
		});
	} catch (e) {
		Lazzo.catching.error('PhotoGalleryWidget', e);		
	}
};





Lazzo.bootstrap = function() {

	Lazzo.runLightBox();
	Lazzo.runElementClickWidget();
	//Lazzo.runReadMoreWidget();
	Lazzo.runRandomColorsWidget();
	Lazzo.runBottomAlignWidget();
	Lazzo.runPhotoGalleryWidget();
	Lazzo.runPopupInlinePhotos();
	
};
document.on('dom:loaded', Lazzo.bootstrap);