Enjin_Profile_Pics_Slideshow = function(data, detail_url) {
	this.init(data, detail_url);
}

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

Enjin_Profile_Pics_Slideshow.prototype = {
	data: null,
	current_index: null,
	current_index_showing: null,
	el_main: null,
	el_main_img: null,
	timeout_id: null,
	playing: null,
	loaded_first_image: null,
	detail_url: null,
		
	init: function(data, detail_url) {
		Enjin_Profile_Pics_Slideshow.__instance = this;
	
		var self = this;
		this.detail_url = detail_url;
		this.data = data;		
		this.current_index = 0;
		this.current_index_showing = 0;
		this.loaded_first_image = false;		
		
		this.el_main = $('.profile-sidebar-block-slideshow');
		this.el_main_img = this.el_main.find('img');
		this.timeout_id = 0;
		this.playing = true;	
		
		//prepare events
		this.el_main_img.bind('load', function() {
			if (!self.loaded_first_image) {
				var top = Math.floor((self.el_main_img.height()-30)*0.5);
				self.el_main.find('a.previous').css('top', top);
				self.el_main.find('a.next').css('top', top);
				self.loaded_first_image = true;
			}			
			self.callTimeout();
		});
		this.el_main_img.bind('error', function() {
			self.el_main_img.show();
			self.callTimeout();
		});
		this.el_main.find('a').bind('mouseover', function() {
			self.stopTimeout();
			self.playing = false;
			
			self.el_main.find('a.previous').show();
			self.el_main.find('a.next').show();			
		});
		this.el_main.find('a').bind('mouseout', function() {
			self.playing = true;
			self.callLoadImage();
			
			self.el_main.find('a.previous').hide();
			self.el_main.find('a.next').hide();			
		});
		
		this.el_main.find('a.previous').bind('click', function(event) {
			event.preventDefault()
			event.stopPropagation()
			self.goPrevious();
		});
		this.el_main.find('a.next').bind('click', function(event) {
			event.preventDefault()
			event.stopPropagation()
			self.goNext();
		});
				
		
				if ($.browser.msie) {
			//need to set explicit width/height
			this.el_main_img.css('width', this.el_main.width()+"px");			
		}
		this.el_main_img.show();
		
		this.loadImage();
	},
	
	stopTimeout: function() {
		if (this.timeout_id > 0) {
			clearTimeout(this.timeout_id);
			this.timeout_id = 0;
		}
	},
	
	callTimeout: function() {
		var self = this;
		var pd = Enjin_Profile_Pics_Popup_Detail.getInstance();
		this.current_index++;
		
		if (this.current_index >= pd.getImagesLength())
			this.current_index = 0;
		
		delete pd;
		this.callLoadImage();
	},
	
	callLoadImage: function() {
		var self = this;
		if (this.timeout_id > 0)
			this.stopTimeout();
			
		this.timeout_id = setTimeout(function() {
			if (self.playing)
				self.loadImage();
		}, parseInt(this.data.seconds)*1000);
	},
	
	goNext: function() {
		this.stopTimeout();
		this.current_index++;
		var pd = Enjin_Profile_Pics_Popup_Detail.getInstance();
		
		if (this.current_index >= pd.getImagesLength())
			this.current_index = 0;
		
		delete pd;
		this.loadImage();
	},
	
	goPrevious: function() {
		var pd = Enjin_Profile_Pics_Popup_Detail.getInstance();
		this.stopTimeout();
		this.current_index = this.current_index_showing - 1;
		
		if (this.current_index < 0)
			this.current_index = pd.getImagesLength()-1;
		
		delete pd;
		this.loadImage();
	},	
	
	loadImage: function() {
		var pd = Enjin_Profile_Pics_Popup_Detail.getInstance();
		var image = pd.getImageIndex(this.current_index);
		
		this.current_index_showing = this.current_index;
		this.el_main_img.attr('src', image.url);
		
		var url = this.detail_url.replace('ALBUMID', image.album_id);
		url = url.replace('IMAGEID', image.image_id)
		this.el_main.find('.preview').attr('href', url);
	},
	
	removeImage: function(image_id) {
		this.stopTimeout();
		this.playing = false;
		var pd = Enjin_Profile_Pics_Popup_Detail.getInstance();
		var images_length = pd.getImagesLength();
		var changed_index = false;
		
		if (this.current_index == pd.getLastRemovedIndex()) {
			changed_index = true;
		}

		if (this.current_index > images_length) {
			this.current_index = 0;
			changed_index = true;
		}
		
		if (images_length > 0) {
			//start playing again
			this.playing = true;
			
			if (changed_index)
				this.loadImage();
			else
				this.callLoadImage();
				
		} else {
			//hide all
			this.el_main.hide();
		}
	},
	
	addImage: function() {
		this.playing = false;
		this.stopTimeout();		
		
		//always will be at start
		if (this.current_index == 0) {
			this.current_index = 2;
		}
		
		this.playing = true;
		this.callLoadImage();
	}
}