var imageSelector = new Class({
	options: {
		source: 'mysource.php',
		save: 'save.php',
		cols: 4,
		rows: 4,
		multibox: false,
		galDiv: 'gallery',
		selDiv: 'selector',
		itemClass: 'item',
		leftArrowClass: 'larrow',
		rightArrowClass: 'rarrow',
		panelClass: 'panel',
		clearText: 'Borrar',
		saveText: 'Guardar',
		addText: 'Agregar',
		delText: 'Quitar',
		selPanelClass: 'selPanel',
		selContentClass: 'selContent',
		initialPars: "",
		cid: 0
	},
	initialize: function(options) {
		this.setOptions(options);
		//Gallery
		this.gallery = $(this.options.galDiv);
		this.container = new Element('div');
		//JSON
		if($type(JSON.parse) == false)
		{
			this.jsondec = JSON.decode;
		}
		else
		{
			this.jsondec = JSON.parse;
		}
		//Panel and Arrows
		this.clearer = new Element('div', {'class':'clearer'}); 
		this.clearerTwo = new Element('div', {'class':'clearer'}); 
		this.panel = new Element('div', {'class':this.options.panelClass});
		this.left = new Element('div', {'class':this.options.leftArrowClass});
		this.left.innerHTML = '<input type="button" value="<<">';
		this.righta = new Element('div', {'class':this.options.rightArrowClass});
		this.righta.innerHTML = '<input type="button" value=">>">';
		this.display = new Element('div');
		//Insert divs
		this.container.inject(this.gallery);
		this.clearer.inject(this.gallery);
		this.panel.inject(this.gallery);
		//Parche de perro ><
		this.options.initialPars += '&cid='+options.cid;
		//Selector
		this.selector = $(this.options.selDiv);
		this.selCont = new Element('div', {'class': this.options.selContentClass});
		//Selector Panel
		this.selPanel = new Element('div',{'class':this.options.selPanelClass});
		this.selCont.inject(this.selector);
		this.clearerTwo.inject(this.selector);
		this.selPanel.inject(this.selector);
		//Clear button
		this.clr = new Element('button',{'text':this.options.clearText});
		this.clr.inject(this.selPanel);
		this.clr.addEvent('click',function(){
			this.selCont.empty();
		}.bind(this));
		//Send button
		//this.sbm = new Element('button', {'text': this.options.saveText});
		//this.sbm.addEvent('click', this.save, this);
		//this.sbm.inject(this.selPanel);
		//Data

		this.temp = new Element('div');
		this.index = 0;
		this.getInitial();
		this.getTotal();
	},
	getTotal: function(){
		new ajas().request(this.options.source+"?&op=total",{update: this.temp, onComplete: function() {
				this.total = this.temp.get('text');
				this.refresh({});
			}.bind(this)
		});
	},
	refresh: function(options) {
		
		if($type(options['search']) == 'string')
		{
			var searchString = options['search'];
			this.index = 0;
		}
		else
		{
			var searchString = "";
		}
	
	
		new ajas().request(this.options.source+"?op=get&st="+this.index+"&size="+(this.options.cols*this.options.rows)+"&search="+searchString, {update: this.temp, onComplete: function() {
			this.current = JSON.parse(this.temp.get('text'));
			this.draw();
		}.bind(this)});
	},
	draw: function() {
		this.container.empty();
		this.current.each(function(el) {
			obj = new Element('div', {'class': this.options.itemClass, 'id': el.id});
			lin = new Element('a',{'rel':'boxed','href':el.img,'id':'img1','class':'mb'});
			new Element('img',{'src':el.thumb}).inject(lin);
			lin.inject(obj);
			new Element('div', {'text': el.desc}).inject(obj);
			new Element('button', {'class': 'bt','text': this.options.addText}).addEvent('click', function(e){
					this.add(e.target.getParent());
				}.bind(this)).inject(obj);
			obj.inject(this.container);
		}.bind(this));
		SqueezeBox.assign($$('a[rel=boxed]'));
		this.panel.empty();
		if(this.index != 0)
		{
			//this.left.removeEvents();
			this.left = new Element('div', {'class':this.options.leftArrowClass});
			this.left.innerHTML = '<input type="button" value="<<">';
	
			this.left.addEvent('click',this.previous.bind(this));
			this.left.inject(this.panel);
		}
		new Element('div', {'text':this.index}).inject(this.panel);
		if(this.index+(this.options.cols*this.options.rows) < this.total)
		{
			this.righta = new Element('div', {'class':this.options.rightArrowClass});
			this.righta.innerHTML = '<input type="button" value=">>">';
			
			this.righta.addEvent('click',this.next.bind(this));
			this.righta.inject(this.panel);
		}
	},
	add: function(el)
	{
		r = this.selCont.getChildren().every(function(elo){
			if(elo.id == el.id)
			{
				return false;
			}
			return true;
		});
		if(r == true)
		{
			el.dispose().inject(this.selCont);
			el.getElement('.bt').removeEvents()
			.set('text',this.options.delText)
			.addEvent('click',function() {this.getParent().dispose();});
		}
		else
		{
			el.dispose();
		}
	},
	next: function()
	{
		this.index += (this.options.cols*this.options.rows);
		this.refresh({});
	},
	previous: function()
	{
		this.index -= (this.options.cols*this.options.rows);
		this.refresh({});
	},
	getInitial: function() 
	{
		new ajas().request(this.options.source+"?op=old"+this.options.initialPars, {update: this.temp, onComplete: function(){
				this.data = JSON.parse(this.temp.get('text'));
				this.data.each(function(el){
					obj = new Element('div', {'class': this.options.itemClass, 'id': el.id});
					lin = new Element('a',{'rel':'boxed','href':el.img,'id':'img1','class':'mb'});
					new Element('img',{'src':el.thumb}).inject(lin);
					lin.inject(obj);
					new Element('div', {'text': el.desc}).inject(obj);
					new Element('button', {'class': 'bt','text': this.options.delText}).addEvent('click', function(e){
						this.getParent().dispose();
					}).inject(obj);
					obj.inject(this.selCont);
				}.bind(this));
			 SqueezeBox.assign($$('a[rel=boxed]'));	
		 	}.bind(this)
			
		 });
	},
	getSelected: function()
	{
		out = new Array();
		this.selCont.getChildren().each(function(el){
			out.push(el.id);
		});
		return JSON.stringify(out);
	}
});

imageSelector.implement(new Options());