galleries = {};

GalleryComponent = Class.create();
GalleryComponent.prototype = {
	
	initialize: function(id, app, type, file_type, options) {
		
		this.id = id;
		this.app = app;
		this.self = $(this.id);
		
		this.table = $(this.id+'_table');
		this.back_btn = $(this.id+'_back_btn');
		this.next_btn = $(this.id+'_next_btn');
		this.thumb_wrapper = $(this.id+'_thumb_wrapper');
		this.thumb_crop = $(this.id+'_thumb_crop');
		
		this.options = options || {};	
		this.options.type = type;
		this.options.file_type = file_type;			
		updaters[this.id+'_update'] = new Updater(this.id + '_update', this.app, 'Update', {parent:this, status_style:''+this.options.status_style, color:''+this.options.color});
		this.updater = updaters[this.id+'_update'];
		
		if (this.options.admin) {
			ax_forms[this.id+'_form'] = new AxForm(this.id+'_form', {updater:this.id+'_update',
												   					use_return:true});
												   					
			this.form = ax_forms[this.id+'_form'];
												   					
			listManagers[this.id+'_update_listing'] = new ListManager(this.id+'_update_listing', '/gallery', 
																	 {updater:this.id+'_update'});
		}
		
		this.injectBehaviours();
		this.getPieces();
	},
	
	injectBehaviours: function() {
	
		this.table.style.height = (this.options.height+(this.options.padding*2))+'px';
		
		this.back_btn.onmouseover = this.mouseOver.bindAsEventListener(this);
		this.back_btn.onmouseout = this.mouseOut.bindAsEventListener(this);
		this.back_btn.onclick = this.backPage.bindAsEventListener(this);
		
		this.next_btn.onmouseover = this.mouseOver.bindAsEventListener(this);
		this.next_btn.onmouseout = this.mouseOut.bindAsEventListener(this);
		this.next_btn.onclick = this.nextPage.bindAsEventListener(this);
		
		this.options.crop_dims = Element.getDimensions(this.thumb_crop.id);
		var thumb_width = (this.options.thumb_width) ? this.options.thumb_width : (this.options.crop_dims.width/this.options.thumbs_per_page)-(this.options.padding);
		this.options.thumb_dims = {width:thumb_width, height:this.options.height};
		this.options.page_width = (this.options.thumb_dims.width+this.options.padding)*this.options.thumbs_per_page;
		
	},
	
	ajaxUpdate: function(ajaxResponse) {
		this.updater.update(ajaxResponse);
		if (this.updater.status) this.updater.status.hide();
		
		var pieces = ajaxResponse.getElementsByTagName('piece');
		this.num_pieces = parseInt(pieces.length);
		this.cur_page = 1;
		this.thumb_wrapper.style.left = '0px';
		
		if (pieces.length > 0) {
			this.thumb_wrapper.innerHTML = '';
			this.thumb_wrapper.style.width = ((this.options.thumb_dims.width+(this.options.padding*2))*pieces.length)+'px';
			for (var i=0; i<pieces.length; ++i) {
				this.injectThumb(pieces[i]);
			}
		} else {
			this.thumb_wrapper.innerHTML = '&nbsp;';
		}
	},
	
	injectThumb: function(thumb) {
		var thumb_div = document.createElement('div');
		thumb_div.className = 'gallery_thumbnail';
		var img = document.createElement('img');
		var source = thumb.getElementsByTagName('media')[0];
		img.id = 'thumb_'+thumb.getAttribute('id');
		img.src = RicoUtil.getContentAsString(source);
		img.src += '?args='+this.options.thumb_dims.width+':'+this.options.thumb_dims.height+':100';
		img.border = 0;
		thumb_div.appendChild(img);
		
		thumb_div.onmouseover = this.mouseOver.bindAsEventListener(this);
		thumb_div.onmouseout = this.mouseOut.bindAsEventListener(this);
		thumb_div.onclick = this.launchViewer.bindAsEventListener(this);
		
		
		this.thumb_wrapper.appendChild(thumb_div);
	},
	
	setType: function(type) {
		$('piece_type').value = type;
		this.options.type = type;
	},
	
	getPieces: function() {
		var callParams = [];		
		callParams.push('type=' + this.options.type);
		callParams.push('file_type=' + this.options.file_type);		
		this.updater.callService('gallery.getPieces', callParams);	
	},
	
	mouseOver: function() {
		this.self.style.cursor = 'pointer';
	},
	
	mouseOut: function() {
		this.self.style.cursor = '';
	},
		
	backPage: function() {
		if (console) console.log('BACK PAGE');
		if (this.cur_page > 1) {
			var effect = new Effect.MoveBy(this.thumb_wrapper, 0, this.options.page_width, {duration: 0.5,  transition: Effect.Transitions.slowstop});
			this.cur_page--;
		}
	},
	
	nextPage: function() {
		if (console) console.log('NEXT PAGE: '+ (this.cur_page*this.options.thumbs_per_page) + ' ' + this.num_pieces);
		if (this.cur_page*this.options.thumbs_per_page < this.num_pieces) {
			var effect = new Effect.MoveBy(this.thumb_wrapper, 0, -this.options.page_width, {duration: 0.5,  transition: Effect.Transitions.slowstop});
			this.cur_page++;
		}
	},
	
	onThumbClick: function(piece) {},
	
	launchViewer: function(e) {
		var src = e.srcElement ? e.srcElement : e.target;
		var piece = src.id.split('_');
		if (piece[1]) {
			this.onThumbClick(piece[1]);
		}
	},
	
	submitToService: function(serv) {
		if (this.form._isStepComplete()) {
			if (!this.form.options.no_submit) {
				var orig = this.form._encryptForm();
				
				var args = [];
				ApexUtil.extractForm(this.form.self, args);
				this.form.revertForm(orig);
				
				if (this.form.reset_form) this.form.clearForm();
				if (this.form.options.disable_on_submit) this.form.btn.save.disable();
				
				this.updater.callService(serv, args, lang.form[cur_lang].submit);
			}
			this.onSubmitForm();
		}
	},
	
	onSubmitForm: function() {},
	
	exitAdmin: function() {
		this.getPieces();
		toggle_sets['admin_toggle'].toggle(this.id+'_admin');
	},
	
	enterAdmin: function() {
		var callParams = [];
		callParams.push('type='+this.options.type);
		callParams.push('template='+$('piece_template').value);
		if (console) console.log('ENTER: '+callParams);
		this.updater.callService('gallery.getPieces', callParams);
		toggle_sets['admin_toggle'].toggle(this.id+'_admin');
	}
	
}