﻿ImageViewer = function(htmlelement, url, isrc, iw, ih) {
	this._control = htmlelement;
	this._url = url;
	this._isrc = isrc;
	this._ih = ih ? ih : 300;
	this._iw = iw ? iw : 500;

	this._items = null;
	this._ii = 0;
	this._ioldi = 0;
	this._maxitems = 5;

	this._id = Math.floor(Math.random() * 99999);
	this._content = null;
	this._firstimage = true;
};
ImageViewer._ALL = new Array();
ImageViewer._get = function(id) {
	for (var i in ImageViewer._ALL)
		if (ImageViewer._ALL[i]._id = id) return ImageViewer._ALL[i];
	return null;
};
ImageViewer.prototype = {
	init: function() {
		ImageViewer._ALL.push(this);
		this._loadItems();
	},
	refresh: function() {
		//this._insert();
	},
	_next: function(element) {
		this.next();
	},
	next: function(i) {
		if (i != undefined) { this._resetTime(); this._ioldi = this._ii; this._ii = i; }
		else {
			if (this._ii + 1 == this._maxitems)
				this._ii = 0;
			else this._ii++;
			i = this._ii;
		}
		//alert(this._items);
		var img = this._items[this._ii];
		var txt = '<div class="iv-content-p" id="iv-content-p-' + this._id + '"><div class="iv-image"><a href="' + img.Src + '"><img alt="" src="' + this._isrc.replace('[w]', this._iw).replace('[h]', this._ih).replace('[id]', img.Id) + '" /></a></div>';
		txt += '<div class="iv-details"><div class="iv-iinfo"><h5><a href="' + img.Src + '">' + img.Title + '</a></h5><div class="tiny-stars"><span class="ts_1"></span></div></div></div></div>';
		txt += '<div class="iv-pagger"></div>';
		if (this._firstimage) {
			$(this._content).html(txt);
			var pagger = document.createElement('div');
			$(pagger).attr('class', 'iv-pagger');
			var ul = document.createElement('ul');
			for (var ni = 0; ni < this._maxitems; ni++) {
				var li = document.createElement('li');
				li.appendChild(document.createTextNode(ni + 1));
				ul.appendChild(li);
				if (ni == 0)
					$(li).attr('class', 'on');
				$(li).bind('click', { iv: this, ni: ni }, function(e) {
					e.data.iv.next(e.data.ni);
				});
			}
			pagger.appendChild(ul);
			$(this._content).append(pagger);
			this._firstimage = false;
		} else {
			var inc = $('#iv-content-p-' + this._id);
			inc.fadeOut('slow', function() {
				inc.html(txt);
				ImageViewer._ALL[0]._setPaggerItem(ImageViewer._ALL[0]._ii);
				inc.fadeIn('slow');
			});
			//this._setPaggerItem(this._ii);
		}
	},
	_resetTime: function() {
		$(this).stopTime('image-viewer', this._next);
		$(this).everyTime(8000, 'image-viewer', this._next);
	},
	_setPaggerItem: function(i) {
		$('.image-viewer .iv-pagger li').removeClass('on');
		$.each($('.image-viewer .iv-pagger li'), function(ni) {
			if (ni == i)
				$(this).attr('class', 'on');
		});
	},
	_insert: function(items) {
		if (items) this._items = items;
		if (!this._items || this._items.length < 1) return;

		var txt = '<div><div class="iv-header"></div><div class="clear"></div><div class="iv-content" id="iv-content-' + this._id + '"></div><div class="iv-footer"></div></div>';
		$(this._control).html(txt);
		this._content = $('#iv-content-' + this._id);
		if (this._content) {
			this._ii = 0;
			this.next(0);
		}
	},
	_loadItems: function() {
		$.get(this._url, { returndata: this._id }, function(data) {
			ImageViewer._get(data.returnData)._insert(data.Items);
		}, 'json');
	}
};