/**************************************
 *	bubbleBox v1.0 bèta
 *	Author:		David Candreva <david@inventis.be>
 **************************************/
var bubbleBox = new Class({
	
	options:{
		ajaxRequest:	false
	},
	
	url:	'/nl/designer/ajaxprojectdata/',
	leftSide: 	false,
	
	/**
	 *	Initialize
	 */
	initialize: function(options){
		this.setOptions(options);
		this.loadAjaxData();
	},
	
	/**
	 *	loadAjaxData
	 */
	loadAjaxData: function(){
		request = new Json.Remote(this.url +'?req_id=' + this.options.ajaxRequest, {
			method: 'get',
			onComplete: function(jsonObj) {
				this.createBox(jsonObj);
			}.bind(this)
		}).send();
	},
	
	/**
	 *	createBox
	 */
	createBox: function(JSON){
		data = JSON.data;
		tags = JSON.tags;
		
		box = new Element('div').injectInside(document.body);
		box.addClass('bubbleBox');
		
		// top:50%; left:50%; margin-top:-290px; margin-left:-370px;
		var leftPos = (window.getWidth() / 2) + window.getScrollLeft() - (box.offsetWidth / 2);
		box.setStyles({'left': leftPos, 'top': '50%', 'margin-top': -290});
		
		innerBox = new Element('div').injectInside(box);
		innerBox.addClass('bubbleWrapper');
		
		this.lefSide = leftSide = new Element('div').injectInside(innerBox);
		leftSide.addClass('left');
		
		// Images
		this.createImages(JSON.images);
		
		rightSide = new Element('div').injectInside(innerBox);
		rightSide.addClass('right');
		
			// Title
			if(data.title){
				titleHeading = new Element('h3').setHTML('Project').injectInside(rightSide);
				title = new Element('div').setHTML(data.title).injectInside(rightSide);
			}
			
			// Designer
			if(data.designer){
				titleHeading = new Element('h3').setHTML('Ontwerper').injectInside(rightSide);
				title = new Element('div').setHTML(data.designer).injectInside(rightSide);
			}

			// Tags
			if(tags.type1){
				titleHeading = new Element('h3').setHTML('Product').injectInside(rightSide);
				title = new Element('div').setHTML(tags.type1.join(', ')).injectInside(rightSide);
			}
			
			// Tags
			if(tags.type2){
				titleHeading = new Element('h3').setHTML('Materialen').injectInside(rightSide);
				title = new Element('div').setHTML(tags.type2).injectInside(rightSide);
			}
			
			// Tags
			if(tags.type3){
				titleHeading = new Element('h3').setHTML('Techniek').injectInside(rightSide);
				title = new Element('div').setHTML(tags.type3).injectInside(rightSide);
			}

			// Description
			if(data.description){
				titleHeading = new Element('h3').setHTML('Omschrijving').injectInside(rightSide);
				title = new Element('div').setHTML(data.description).injectInside(rightSide);
			}

			// Measurements
			if(data.measurements){
				titleHeading = new Element('h3').setHTML('Afmetingen').injectInside(rightSide);
				title = new Element('div').setHTML(data.measurements).injectInside(rightSide);
			}


		// Close button
		aClose = new Element('a').setHTML('sluiten').injectInside(innerBox);
		aClose.addClass('close');
		
		aClose.addEvent('click', this.closeBox);
		
	},

	/**
	 *	closeBox
	 */
	createImages: function(images){
		if(images.length > 0){
			var counter = 0;
			
			firstIMG = new Element('div').injectInside(leftSide);
			firstIMG.addClass('big');
			
			thumbs = new Element('div').injectInside(leftSide);
			thumbs.addClass('thumbs');
			
			images.each(function(img){
				if(counter == 0){
					bigImg = new Element('img', {src: '/nl/image/getresize/400/'+img.filename+'/product', alt:''}).injectInside(firstIMG);
				} 
				img = new Element('img', {src: '/nl/image/getcrop/60/'+img.filename, alt:''}).injectInside(thumbs);
				img.addEvent('click', function(el){
					el = new Event(el).target;
					this.changeImage(el);
				}.bind(this));
				
				
				
				counter++;
			}.bind(this));
		}
	},
	
	changeImage: function(image){
		
		var SRC = image.src.split("/");
		bigImage = $$('.big img');
		bigImage.setProperty('src', '/nl/image/getresize/400/'+SRC.getLast()+'/product');
	},
	
	/**
	 *	closeBox
	 */
	closeBox: function(){
		designerGallery.activeBubbleBox = null;
		box.remove();
	}
});
bubbleBox.implement(new Options);