/**
 * Userside gallery script
 * @author ali
 * @copyright elixxir.info, all rights reserved
 */

// avoid multi executing this script
if (typeof(imggallery_client) == "undefined")
{	
	var imggallery_client = {
		url: {
			thumbnail: '/upload/gallery/thumbnail/',
			big: '/upload/gallery/big/',
			full: '/upload/gallery/full/'
		},
		preview_size: 'big',
		thumbs_count: 3,
		galleries: [],
		gal_options: {},
		last_id: 1,
		gallery_set_options: function (id, options) {
			if (this.gal_options[id] == undefined)
				this.gal_options[id] = options;
			else
				this.gal_options[id] = $.extend(this.gal_options[id], options);
		},
		gallery_get_options: function (id) {
			if (this.gal_options[id] == undefined)
				return {};
			else
				return this.gal_options[id];
		}
	};
	
	$(document).ready(function() {
	
		// collect galleries
		$('.imggallery_thumbnails').each(function(){
			var gal_options = imggallery_client.gallery_get_options($(this).attr('id'));
			
			var gal = {
				imagesUrls: [],
				images: [],
				id: imggallery_client.last_id++,
				view: {
					container: $('<div class="gallery_view" />'),
					arrow_next: $('<div class="gallery_arrow_next" />'),
					arrow_prev: $('<div class="gallery_arrow_prev" />'),
					thumbnails: $('<div class="gallery_thumbnails" />'),
					image_preview: $('<img class="gallery_image_preview_image" />'),
					arrow_thumb_next: $('<div class="gallery_arrow_thumb_next" />'),
					arrow_thumb_prev: $('<div class="gallery_arrow_thumb_prev" />')
				},
				actual_img: 0,
				thumbs_count: gal_options.thumbs_count == undefined ? imggallery_client.thumbs_count : gal_options.thumbs_count,
				preview_size: gal_options.preview_size == undefined ? imggallery_client.preview_size : gal_options.preview_size,
				thumbnails_page: 1,
				install_thumb: function (index) {
					var img_src = imggallery_client.url.thumbnail+this.imagesUrls[index];
					
					var div = $('<div class="gallery_thumbnail" />');
					var img = this.images[index];
					if (img.hasClass("gallery_thumbnail_image") == false) {
						img.addClass("gallery_thumbnail_image");
					}
					// var img = $('<img class="gallery_thumbnail_image" />').attr('src', img_src);
					div.append(img);
					
					div.click(function(){
						gal.show_full(index);
					});
					
					this.view.thumbnails.append(div);
				},
				show_full: function (index) {
					if (index >= 0 && index < gal.imagesUrls.length)
					{
						this.actual_img = index;
					}
					if (this.actual_img >= gal.imagesUrls.length-1)
						gal.view.arrow_next.hide();
					else
						gal.view.arrow_next.show();
					if (this.actual_img <= 0)
						gal.view.arrow_prev.hide();
					else
						gal.view.arrow_prev.show();
					this.display_img();
				},
				display_thumbs: function () {
					// remove old thumbnails
					this.view.thumbnails.find('.gallery_thumbnail').remove();
					// add new thumbnails
					var img_offset = (this.thumbnails_page-1)*this.thumbs_count;
					for (var i = 0; i < this.thumbs_count; i++)
					{
						if (img_offset+i >= this.imagesUrls.length)
						{
							break;
						}
						this.install_thumb(img_offset+i);						
					}
				},
				display_img: function() {
					// TODO: preload?
					this.view.image_preview.attr('src', imggallery_client.url[this.preview_size]+this.imagesUrls[this.actual_img]);
				},
				refresh: function() {
					this.thumbs_change_page(this.thumbnails_page);
					this.show_full(this.actual_img);
				},
				thumbs_change_page: function (page) {
					var pages_count = Math.floor((gal.imagesUrls.length-1)/this.thumbs_count) +1;
					if (page >= 1 && page <= pages_count)
					{
						this.thumbnails_page = page;
						this.display_thumbs();
					}
					
					// set arrows visibility
					if (this.thumbnails_page >= pages_count)
						this.view.arrow_thumb_next.hide();
					else
						this.view.arrow_thumb_next.show();
					
					if (this.thumbnails_page <= 1)
						gal.view.arrow_thumb_prev.hide();
					else
						gal.view.arrow_thumb_prev.show();
				}
			};
			
			// collect images
			$(this).find('.gallery_img').each(function(){
				var addr = $(this).attr('src');
				gal.imagesUrls.push(addr.substring(addr.lastIndexOf('/')+1));
				gal.images.push($(this));
			});
			
			// create gallery view		
			gal.view.thumbnails
				.append(gal.view.arrow_thumb_prev)
				.append(gal.view.arrow_thumb_next);
			
			gal.view.container
				.append(gal.view.image_preview)
				.append(gal.view.arrow_prev)
				.append(gal.view.arrow_next)
				.append(gal.view.thumbnails);
			
			// preview image loaded action
			gal.view.image_preview.load(function(){
				// set arrays position&size
				var width = Math.floor(gal.view.image_preview.css('width').replace('px', '')/2);
				var padding = parseInt(gal.view.image_preview.css('padding-left').replace('px', ''));
				var border = parseInt(gal.view.image_preview.css('border-left-width').replace('px', ''));
				gal.view.arrow_prev.css('width', width+'px').css('margin-left', border+padding+'px');;
				gal.view.arrow_next.css('width', width+'px').css('margin-left', (padding+border+width)+'px');
			});
			
			// add buttons actions
			gal.view.arrow_thumb_prev.click(function(){
				gal.thumbs_change_page(gal.thumbnails_page-1);
			});
			
			gal.view.arrow_thumb_next.click(function(){
				gal.thumbs_change_page(gal.thumbnails_page+1);
			});
			
			gal.view.arrow_next.click(function(){
				gal.show_full(gal.actual_img+1);
			});
			
			gal.view.arrow_prev.click(function(){
				gal.show_full(gal.actual_img-1);
			});
			
			// place new gallery view
			$(this).replaceWith(gal.view.container);
			
			// add gallery to galleries list
			imggallery_client.galleries.push(gal);
			
			// if only one image then hide thumbnails
			if (gal.imagesUrls.length < 2)
			{
				gal.view.thumbnails.hide();
			}
			
			// and display it :)
			gal.refresh();
		});
	});
}