var mediaPlugin = new Class
(
	{
		initialize: function(parent)
		{
			this.parent = parent;
			this.offset = 0;
			this.perPage = 5;
			this.direction = 0;
		},

		load: function()
		{
			$('ubbMediaZoeksubmit').addListener('click', this.submit.bindWithEvent(this, [0]));
			$('ubbMediaZoekChildrenVorige').setStyle('display','none');
			$('ubbMediaZoekChildrenVolgende').setStyle('display','none');
			$('ubbMediaZoekChildrenVorige').addListener('click', this.submit.bindWithEvent(this, [-this.perPage]));
			$('ubbMediaZoekChildrenVolgende').addListener('click', this.submit.bindWithEvent(this, [this.perPage]));		
			this.slideTransition = new Fx.Slide('ubbMediaZoekChildrenContainer', {mode: 'horizontal'});	
		},
		
		rebuildPrevious: function()
		{
			if(this.offset > 0)
			{
				$('ubbMediaZoekChildrenVorige').setStyle('display','block');
			}		
		},			
		
		rebuildNext: function()
		{
			$('ubbMediaZoekChildrenVolgende').setStyle('display','block');
		},		
		
		slideOut: function()
		{
			this.slideTransition.slideOut();
		},
		
		slideIn: function()
		{
			this.slideTransition.slideIn();
		},
		
		submit: function(e, inc)
		{
			e = new Event(e);
			e.stop();
			this.offset += inc;
			this.direction = inc;
			this.slideOut();
			url = site_url + 'server/afbeelding_search/?action=find&query=' + $('ubbMediaZoekterm').value + '&offset=' + this.offset;
			new XHR({
					method: 'GET',
					onSuccess: this._loadImages.bind(this),
					onFailure: this._load_err.bind(this)
				}).send(url, '');
		},	


		_loadImages: function(text, xml) 
		{	
			error = this.readXml(xml.documentElement.childNodes);
		},
		
		_loadImage: function(opt)
		{
			container = new Element('div');
			container.addClass('afbeelding-search-container');
			container.addListener('click', this.complete.bindWithEvent(this, [opt['id']]));
			
			afbeelding = new Element('img');
			afbeelding.setProperty('src', opt['thumb']);
			afbeelding.addClass('afbeelding-search-afbeelding');
			
			formaat = new Element('div');
			formaat.setHTML('Formaat ' + opt['width'] + 'x' + opt['height']);			
			formaat.addClass('afbeelding-search-formaat');
			
			naam = new Element('div');
			naam.setHTML(opt['name']);			
			naam.addClass('afbeelding-search-naam');
			
			container.adopt(afbeelding);
			container.adopt(formaat);
			container.adopt(naam);
			$('ubbMediaZoekChildrenContainer').adopt(container);
		},		
		
		readXml: function(n)
		{
			//$('ubbMediaZoekChildren').setHTML('');
			//$('ubbMediaZoekChildren').adopt(this.childrenContainer);
			this.slideTransition.hide();
			$('ubbMediaZoekChildrenContainer').setHTML('');
			$('ubbMediaZoekChildrenVorige').setStyle('display','none');
			$('ubbMediaZoekChildrenVolgende').setStyle('display','none');

			
			count = 0;
			this.slideIn.delay(500, this);
			for (var i=0; i<n.length; i++)
			{
				if (n[i].tagName == 'image') 
				{
					var opt = {data:{}};
					var a = n[i].attributes;
					for (var t=0; t<a.length; t++) 
					{
						switch (a[t].name) 
						{
							case 'id':
							case 'name':
							case 'keywords':
							case 'last_edited_at':
							case 'thumb':
							case 'width':
							case 'height':
								opt[a[t].name] = a[t].value;
								break;
							default:
								opt.data[a[t].name] = a[t].value;
						}
					}
					this._loadImage(opt);
					count++;
				}	
			}
			breaker = new Element('div');
			breaker.addClass('clear');
			breaker.setHTML('&nbsp');
			$('ubbMediaZoekChildrenContainer').adopt(breaker);
			if(count == 0)
			{
				$('ubbMediaZoekChildrenContainer').setHTML('Geen afbeeldingen gevonden');
				this.rebuildPrevious();			
			}			
			else
			{
				this.rebuildPrevious();
				this.rebuildNext();
				breaker = new Element('div');
				breaker.addClass('clear');
				breaker.setHTML('&nbsp');
				$('ubbMediaZoekChildren').adopt(breaker);
			}
			
			return false;
		},

		_load_err: function()
		{
		
		},

		complete: function(e, id)
		{
			argument = '';

			if($('ubbMediaPositieLinks').getProperty('checked') == true)
				argument = ' links';
			if($('ubbMediaPositieRechts').getProperty('checked') == true)
				argument = ' rechts';
			
			this.parent.insertTag(null, 'media', true, id + argument, '');
		},

		view: function()
		{
			var url = site_url + "js/custom/media.php";

			new Ajax(url, {
					method: 'get',
					update: this.parent.advancedConfig,
					onComplete: (function(){this.parent.buildCancelButton(this); this.load()}).bind(this)
				}).request();
			return '';
		}
	}
);