var p_GalleryElem = new Class({
	initialize: function(img_id, el_id, src){
		this.img_id = img_id
		
		this.elem = new Element('div', {id: el_id});
		this.elem.set('class', 'img_gallery_elem')
		this.elem.setStyle('background-image', 'url(' + src + ')')		
	}
})

var p_Gallery = new Class({
    initialize: function(){
    	this.__next_label = 'Next'
    	this.__back_label = 'Back'
    
    	this.__width = 660
    	this.__height = 540
    
		this.__elems = []
		this.__current = -1
		
		this.__form = new Element(
			'form', {
				'action': 'index.php',
				'method': 'post'
			}
		)
		this.__form.set('send', {
			onSuccess:
				function(responseText, responseXML){
					if(responseText.trim() == '1')
						this.__show_result()
				}.bind(this)
		});
		
		this.__main_div = new Element('div', {id: 'p_gallery_main'})
		this.__main_div.set({
			'class' : 'img_gallery_main',
    		'styles' : { 'display': 'none' }
		})
		
		this.__main_div.inject('body', 'top')
		
		this.__panel = new Element('div', {id: 'p_gallery_panel'})
		this.__panel.set('class', 'img_gallery_panel_load')
		
		this.__nav = new Element('div', {id: 'p_gallery_nav'})
		this.__nav.set('class', 'p_gallery_nav')
    },
   
	add_image: function(img_id, unique_id, src){
		img_elem = new p_GalleryElem(img_id, unique_id, src)
		this.__elems.push(img_elem)
	},
	
	show: function(elem_id){
		this.__reposition_main_div()
		this.__main_div.setStyle('display', 'block')
		
		for(var i = 0; i < this.__elems.length; ++i){
			if(this.__elems[i].elem.id == elem_id){
				this.__current = i
				this.__display_img()
				break;
			}
		}
	},
	
	set_next_label: function(next_label){
		this.__next_label = next_label
	},
	
	set_back_label: function(back_label){
		this.__back_label = back_label
	},
	
	__reposition_main_div: function(){
    	var dim = window.getSize()
    	var left = parseInt( ( dim.x  - this.__width ) / 2 )
    	var top = 100

    	this.__main_div.setStyle('left', left )
    	this.__main_div.setStyle('top', top )
	},
	
	__display_img: function(){
		number = this.__current
		this.__main_div.empty()

		var close = new Element('div').set('class', 'img_gallery_close')
		close.addEvent(
         'click',
         function(){
            this.__main_div.setStyle('display', 'none')
            this.__current = -1
         }.bind(this)
		)
		close.inject(this.__main_div)
		
		this.__elems[number].elem.inject(this.__main_div)		

		this.__panel.inject(this.__main_div)
		this.__add_nav()
		
		post_data = {'plugin': 'imgvoting', 'action': 'can_vote', 'img_id': this.__elems[number].img_id}
		var request = new Request({
			url: 'index.php',
			data: post_data,
			onSuccess:
				function(responseText, responseXML){
					if(responseText.trim() == '1')
						this.__show_form()
					else
						this.__show_result()
				}.bind(this)
		})
		request.send();
	},
	
	__show_result: function(){
		number = this.__current
		post_data = {'plugin': 'imgvoting', 'action': 'show_result', 'img_id': this.__elems[number].img_id}
		var request = new Request({
			url: 'index.php',
			data: post_data,
			onSuccess:
				function(responseText, responseXML){this.__fill_result(responseText)}.bind(this)
		})
		request.send();
	},
	
	__show_form: function(){
		number = this.__current
		
		this.__panel.set('class', 'img_gallery_panel_form')
		this.__panel.empty()
		this.__form.empty()
		
		this.__form.inject(this.__panel)
	
		new Element( 'input', {'type': 'hidden', 'name': 'plugin', 'value': 'imgvoting'}).inject(this.__form)
		new Element( 'input', {'type': 'hidden', 'name': 'action', 'value': 'vote_for_img'}).inject(this.__form)
		new Element( 'input', {'type': 'hidden', 'name': 'img_id', 'value': this.__elems[number].img_id}).inject(this.__form)
		
      new Element( 'span', {'html': 'min'}).inject(this.__form)		
		for(var i = 1; i < 11; ++i){
			new Element( 'input', {'type': 'radio', 'name': 'points', 'value': i}).inject(this.__form)
  		   new Element( 'span', {'html': i}).inject(this.__form)
		}
		new Element( 'span', {'html': 'max'}).inject(this.__form)
		
		button = new Element(
			'input', {'type': 'button', 'value': 'OK', 'class': 'img_gallery_button'}
		).inject(this.__form).addEvent(
			'click',
			function(){
				this.__form.send()
				this.__panel.empty()
				this.__panel.set('class', 'img_gallery_panel_load')
			}.bind(this)
		)
	},
	
	__fill_result: function(amount){
		var span = new Element('span', {'html': amount})
		this.__panel.set('class', 'img_gallery_panel_result')
		span.inject(this.__panel)
		//TODO: need text
	},
	
	__add_nav: function(){
		this.__current;
		next = this.__current + 1
		back = this.__current - 1
		is_next = true
		is_back = true
		
		if(next >= this.__elems.length)
			is_next = false
		if(back < 0)
			is_back = false
		
		//inject;
		this.__next_label
    	
    	this.__nav.empty()
    	
    	if(is_back){
			new Element('a', {
			    'href': '#',
			    'html': this.__back_label,
			    'styles': {
			        'float': 'left',
			        'padding-left': '20px'
			    },
			    'events': {
			        'click': function(){
			        	this.show(this.__elems[this.__current - 1].elem.id)
			            return false
			        }.bind(this)
			    }
			}).inject(this.__nav)
		}
    	if(is_next){
			new Element('a', {
			    'href': '#',
			    'html': this.__next_label,
			    'styles': {
			        'float': 'right',
			        'padding-right': '20px'
			    },
			    'events': {
			        'click': function(){
			        	this.show(this.__elems[this.__current + 1].elem.id)
			            return false
			        }.bind(this)
			    }
			}).inject(this.__nav)
		}
		
		new Element('div', {'styles': {'clear': 'both'}}).inject(this.__nav)
		
		this.__nav.inject(this.__main_div)
	}
})