Enjin_Profile_Pics_Popup_Detail = function(images) {
	this.init(images);
}

/* static methods */
Enjin_Profile_Pics_Popup_Detail.TOP = 30;
Enjin_Profile_Pics_Popup_Detail.MIN_HEIGHT = 100;
Enjin_Profile_Pics_Popup_Detail.MIN_WIDTH = 400;
Enjin_Profile_Pics_Popup_Detail.MAX_WIDTH = 700;



Enjin_Profile_Pics_Popup_Detail.detailNext = function() {
	Enjin_Profile_Pics_Popup_Detail.getInstance().detailNext();
}
Enjin_Profile_Pics_Popup_Detail.detailPrevious = function() {
	Enjin_Profile_Pics_Popup_Detail.getInstance().detailPrevious();
}
Enjin_Profile_Pics_Popup_Detail.detailEdit = function() {
	Enjin_Profile_Pics_Popup_Detail.getInstance().detailEditShow();
}
Enjin_Profile_Pics_Popup_Detail.detailEditCancel = function() {
	Enjin_Profile_Pics_Popup_Detail.getInstance().detailEditCancel();
}
Enjin_Profile_Pics_Popup_Detail.detailEditSubmit = function() {
	Enjin_Profile_Pics_Popup_Detail.getInstance().detailEditSubmit();
}
Enjin_Profile_Pics_Popup_Detail.detailDelete = function() {
	Enjin_Profile_Pics_Popup_Detail.getInstance().detailDelete();
}
Enjin_Profile_Pics_Popup_Detail.detailClose = function() {
	Enjin_Profile_Pics_Popup_Detail.getInstance().detailPopupHide();
}


Enjin_Profile_Pics_Popup_Detail.__instance = null;
Enjin_Profile_Pics_Popup_Detail.getInstance = function() {	
	return Enjin_Profile_Pics_Popup_Detail.__instance;
}

Enjin_Profile_Pics_Popup_Detail.prototype = {
	editing: false,
	
	/* detail part */
	detail_index: -1,
	el_edit: null,	
	last_removed_index: -1,
	
	init: function(images) {
		Enjin_Profile_Pics_Popup_Detail.__instance = this;
		this.images = images;
		
		this.el_edit = $('.popup-image-data');
	},
		
	/* new methods for merged detail */
	detailPopupHide: function() {
		if (this.editing)
			return;
		
		Enjin_Core.removePopupSeparator();
		$('.element_popup_gallery').hide();
	},
	
	detailPopupShow: function() {
		Enjin_Core.createPopupSeparator();
		Enjin_Core.placeAfterPopupSeparator($('.element_popup_gallery'));
		$('.element_popup_gallery').show();
	},
	
	detailShow: function(image_id) {
		this.detailPopupHide();
		var i=0;
		var el = $('.element_popup_gallery');
		
		for (i=0; i<this.images.length; i++) {
			if (this.images[i].image_id == image_id) {
				//prepare detail
				this.detail_index = i;
				this.detailData();
				
				break;
			}
		}
				
		Enjin_Core.centerPopup($('.element_popup_gallery'), Enjin_Profile_Pics_Popup_Detail.TOP, false);
		this.detailPopupShow();
	},
	
	detailData: function() {
		var el = $('.element_popup_gallery');
		var image = this.images[this.detail_index];
		
		el.find('.image .preview img').attr('src', image.url_full);
		el.find('.description .title').html(image.title);
		el.find('.description .text').html(image.description);
		
		if (jQuery.trim(image.description) != '') {
			el.find('.description .text').css('display', 'inline');
			el.find('.description .separator').css('display', 'inline');
		} else {
			el.find('.description .text').css('display', 'none');
			el.find('.description .separator').css('display', 'none');
		}
		
		el.find('.description .username').html(image.username);
		
		el.find('.image .previous').hide();
		el.find('.image .next').hide();
		
		if (this.detail_index > 0) {
			el.find('.image .previous').css('display', 'block')
		} 
		
		if (this.detail_index < this.images.length - 1) {
			el.find('.image .next').css('display', 'block')
		}
	},
	
	detailNext: function() {
		this.detail_index++;
		if (this.detail_index >= this.images.length)
			this.detail_index = 0;
		
		this.detailData();
	},
	
	detailPrevious: function() {
		this.detail_index--;
		if (this.detail_index < 0)
			this.detail_index = this.images.length - 1;
		
		this.detailData();
	},
	
	detailEditShow: function() {
		var self = this;
		var image = this.images[this.detail_index];
		this.editing = true;
		
		Enjin_Core.createPopupSeparator();
		Enjin_Core.placeAfterPopupSeparator(this.el_edit);
		this.el_edit.appendTo($(document.body));
		
		this.el_edit.find('.image img').attr('src', image.url);
		var tempTitle = $('<div></div>').html(image.title);
		this.el_edit.find('.img-input input').val(tempTitle.text());
		this.el_edit.find('.desc-input textarea').html(image.description);
				
		this.el_edit.find('.footer .btns-create').hide();
		this.el_edit.find('.footer .btns-edit').show();
		this.el_edit.show();
				
		var middle = ($(window).width() - this.el_edit.find('.element_popup').width())*0.5;		
		this.el_edit.css('top', $(window).scrollTop()+75);
		this.el_edit.css('left', middle);			
	},
	
	detailEditCancel: function() {
		this.el_edit.hide();
		this.editing = false;
	},
	
	detailEditSubmit: function() {
		var self = this;
		var title = jQuery.trim(this.el_edit.find('input[name=title]').val());
		var description = jQuery.trim(this.el_edit.find('textarea[name=description]').val());
		var image = this.images[this.detail_index];
		var data = {
			op: 'image-edit',
			image_id: image.image_id,
			title: title,
			description: description
		}
		
		if (title == "") {
			alert("You must write the title")
			return;
		}
		
		$.post("/ajax.php?s=profile_pics", data, function(response) {
			self.el_edit.hide();
			self.editing = false;
			
			if (response.error == 0) {
				self.images[self.detail_index].title = response.title;
				self.images[self.detail_index].description = response.description;
				
				$('.element_popup_gallery .description .title').html(response.title);
				$('.element_popup_gallery .description .text').html(response.description);
				
				if (jQuery.trim(response.description) != '') {
					$('.element_popup_gallery .description .separator').css('display', 'inline');
					$('.element_popup_gallery .description .text').css('display', 'inline');
				} else {
					$('.element_popup_gallery .description .separator').css('display', 'none');
					$('.element_popup_gallery .description .text').css('display', 'none');
				}
			} else {
				Enjin_Core.showMessagePopup({
					top: 100,
					message: response.message,
					button_continue: 'Ok'				
				});	
			}
		}, 'json');					
	},	
	
	detailDelete: function() {
		if (this.editing)
			return;
		
		if (confirm('Are you sure to delete this image?')) {
			var self = this;
			var image = this.images[this.detail_index];
			
			var data = {
				op: 'delete', 
				image_id: image.image_id
			}
			
			$.post("/ajax.php?s=profile_pics", data, function(response) {
				if (!response.error) {
					self.removeImage(image.image_id);
				} else {
					Enjin_Core.showMessagePopup({
						top: 100,
						message: response.message,
						button_continue: 'Ok'
					});
				}
			}, 'json');
		}
	},	
	
	addImage: function(image) {
		var found = false;
		
		for (var i=0; i<this.images.length; i++) {
			if (this.images[i].image_id == image.image_id) {
				found = true;
				break;
			}
		}

		if (!found) {
			this.images.unshift(image);			
		}
		
		if (typeof Enjin_Profile_Pics_Slideshow != 'undefined') {
			var ing = Enjin_Profile_Pics_Slideshow.getInstance();			
			if (ing)
				ing.addImage();
		}		
	},
	
	removeImage: function(image_id) {
		var nimages = [];
		var i;
		
		for (i=0; i<this.images.length; i++) {
			if (this.images[i].image_id != image_id) {
				nimages.push(this.images[i]);
			} else {
				this.last_removed_index = i;
			}
		}
		
		this.images = nimages;		
		if (this.detail_index >= this.images.length) {
			this.detail_index = this.images.length - 1;
		}
				
		//update images
		if (this.images.length > 0) {
			this.detailData();
		} else {
			this.detailPopupHide();
		}
		
		//check with profile pics
		if (typeof Enjin_Profile_Pics != 'undefined') {
			var ing = Enjin_Profile_Pics.getInstance();
			if (ing)
				ing.removeImage(image_id);
		}
		
		if (typeof Enjin_Profile_Pics_Slideshow != 'undefined') {
			var ing = Enjin_Profile_Pics_Slideshow.getInstance();			
			if (ing)
				ing.removeImage(image_id);
		}
				
	},
	
	getImageIndex: function(index) {
		return this.images[index];
	},
	
	getImagesLength: function(index) {
		return this.images.length;
	},
	
	getImageOffset: function(image_id) {
		var i=0;
		
		for (i=0; i<this.images.length; i++) {
			if (this.images[i].image_id == image_id)
				return i;
		}
		
		return -1;
	},
	
	getLastRemovedIndex: function() {
		return this.last_removed_index;
	}
}


$(document).ready(function() {
	//prepare global events
	$('.element_popup_gallery .image .preview img').bind('load', function() {
		/*var top = ($('.element_popup_gallery .image .preview img').height() 
					- $('.element_popup_gallery .image .preview a').height())*0.5;
		$('.element_popup_gallery .image .preview a').css('top', '120px');
		$('.element_popup_gallery .image a').css('top', top);*/
		
		var img_width = $('.element_popup_gallery .image .preview img').width();
		var img_height = $('.element_popup_gallery .image .preview img').height();
		var container_height = $('.element_popup_gallery .image .preview').height();
		var height_offset = $('.element_popup_gallery .desclinks').height();
		var height_padding = parseInt($('.element_popup_gallery .inner').css('padding-top').replace('px', ''));
				
		var orimg_width = img_width;
		var orimg_height = img_height;
		var browser_height = $(window).height() - Enjin_Profile_Pics_Popup_Detail.TOP - height_offset - height_padding - 40;
		var browser_width = $(window).width() - 70; //just a guess
		
		img_height = Math.max(Enjin_Profile_Pics_Popup_Detail.MIN_HEIGHT, img_height);
		img_height = Math.min(browser_height, img_height);
		
		img_width = Math.max(Enjin_Profile_Pics_Popup_Detail.MIN_WIDTH, img_width);
		img_width = Math.min(browser_width, img_width);
		
		img_width += height_offset;
		
		if (orimg_width <= img_width) {
			$('.element_popup_gallery .image .preview .w1').css('overflow-x', 'hidden'); //force to only show on Y
			
			if (img_height > container_height) {
				img_width += 17; //just a guess
			}					
		} else {
			$('.element_popup_gallery .image .preview .w1').css('overflow-x', 'auto');
		}
		
		if (img_height > orimg_height)
			img_height += 17;
				
		
		$('.element_popup_gallery .inner').css('width', img_width);
		//$('.element_popup_gallery .inner').css('height', img_height);
		
		
		$('.element_popup_gallery .inner .image').css('width', img_width);
		$('.element_popup_gallery .inner .image').css('height', img_height);
		
		$('.element_popup_gallery .inner .image .preview').css('width', img_width);
		$('.element_popup_gallery .inner .image .preview').css('height', img_height);
		
		
		Enjin_Core.centerPopup($('.element_popup_gallery'), null, false);
	});	
	
	
	$('.element_popup_gallery_edit .btns-edit').find('.btncancel').bind(function() {
		Enjin_Profile_Pics_Popup_Detail.detailEditCancel();
	});
	$('.element_popup_gallery_edit .btns-edit').find('.btnsubmit').bind(function() {
		Enjin_Profile_Pics_Popup_Detail.detailEditSubmit();
	});
	
	$(window).bind('click', function(evt) {		
		if (Enjin_Core._popup_separator 
			&& evt.target == Enjin_Core._popup_separator[0]) {
			Enjin_Profile_Pics_Popup_Detail.detailClose();
		}
	});
	
	$(window).bind('keydown', function(evt) {
		if (evt.keyCode == 27) {
			Enjin_Profile_Pics_Popup_Detail.detailClose();
		}
	});
});