/*
Updated for Polopoly
fireEvent change when migrating to 1.2.1 >> onBeforeInject == beforeInject

possible enhancements:
- transition fx
- preloading
- prev/next buttons
- maxheight/maxwidth
- centre horiz/vert

*/

var ZuprZlide = new Class({
	Implements:[Options,Events],
	options:{
		width:780, // max width
		startImg: 0, // what image in the index to start on
		replace: true, // replace the contents of the container?
		height:400, // max height
		derivative: "derivative_article_780x400",
		container: document.body
	},
	initialize:function(imgs,descr,options){ // imgs: array, descr:array, options:object
		this.setOptions(options);
		if(!this.options.container)this.options.container = imgs[0];
		this.currentImg=this.options.startImg;
		this.collection = this.makeCollection(imgs,descr);
		var struct = this.buildGUI();
		
		this.fireEvent('onBeforeInject'); // fire before we inject the new GUI
		if(this.options.container.match('img')){
			struct.replaces(this.options.container);
		}else {
			if(this.options.replace)this.options.container.empty();
			struct.inject(this.options.container,"top");
		}
		$(document.body).getElement('.firstcol .breadcrumb').inject(this.options.container,"top");
	},
	
	/* public methods */
	next: function() {
		var step = (this.collection[this.currentImg+1])?this.currentImg+1:0;
		this.goTo(step);
		this.currentImg = step;
	},
	prev: function(){
		var step = (this.collection[this.currentImg-1])?this.currentImg-1:this.collection.length;
		this.goTo(step);
		this.currentImg = step;
	},
	goTo: function(i){
		if(!this.collection[i]) i = 0;
		// go there
		var col = this.collection[i];
		var img = new Element('img',{
			'src':col.img,
			'alt':col.descr.text
		}).replaces(this.gui.img);
		this.gui.img = img;
		this.gui.descr.set('html',col.descr.html);
		this.gui.xofx.getElement('strong').set('text',i+1);
	},
	
	/* NON-public methods, do not use */
	buildGUI: function(){
		var struct = new Element('div',{
			'class':'ZuprZlide mod basic'
		});
		var cont = new Element('div',{
			'class':'cont',
			'styles': {
				'height':this.options.height+2
			}
		}).inject(struct,"top");
		var imgWrap = new Element('div',{
		 	'class':'imgwrap',
			'events': {
				'click': function(e){
					e.stop();
					this.next();
				}.bind(this)
			},
			'title':'Trykk for neste bilde'
		}).inject(cont,"top");
		var img = new Element('img',{
			'src':this.collection[this.currentImg].img
		}).inject(imgWrap,"top");
		var descr = new Element('p',{
			'class':'imgdescr',
			'html':this.collection[this.currentImg].descr.html,
			'styles':{
				'opacity':0.7,
				'width':this.options.width
			}
		}).inject(struct,"bottom");
		
		var next = new Element('a',{
			'html':'Neste bilde',
			'events': {
				'click': function(e){
					e.stop();
					this.next();
				}.bind(this)
			},
			'class':'next'
		}).inject(struct,"bottom");
		
		var prev = new Element('a',{
			'html':'Forrige bilde',
			'class':'prev',
			'events': {
				'click': function(e){
					e.stop();
					this.prev();
				}.bind(this)
			}
		}).inject(struct,"bottom");
		
		var xofx = new Element('p',{
			'html':'Viser bilde <strong>'+(this.currentImg+1)+'</strong> av <strong>'+this.collection.length+'</strong> bilder',
			'class':'xofx'
		}).inject(struct,"bottom");
		
		struct.addEvent('mouseenter',function(){
			descr.setStyle('opacity',1);
		});
		struct.addEvent('mouseleave',function(){
			descr.setStyle('opacity',0.7);
		});
		
		this.gui = {
			img:img,
			descr:descr,
			html:struct,
			next:next,
			prev:prev,
			xofx:xofx
		};
		return struct;
	},
	makeCollection: function(imgs,descr){
		var collection = [];
		imgs.each(function(item,i){
			collection.push({'img':this.fixImgURL(item,this.options.width,this.options.height),'descr':{'html':descr[i].get('html'),'text':descr[i].get('text')}});
		}.bind(this));
		return collection;
	},
	fixImgURL: function(img,width,height){
		//var re = new RegExp("\MaxW=[0-9]*","g");
		//return img.get('src').replace(re,"MaxW="+width+"&MaxH="+height);
		return img.get('src').replace("derivative_article_468",this.options.derivative).replace("derivative_article_168",this.options.derivative);
	}
	
});