var ThumbnailType = {
	Video: 'Video',
	Album: 'Album',
	Image: 'Image'
}

var Thumbnail = new Class.create(ASControls.UserControl, {
	initialize: function($super, options, viewer) {
		options.styles = options.styles || {};
		options.styles['position'] = 'absolute';
		options.styles['cursor'] = 'pointer';
		this.viewer = viewer;
		this.options = options;
		$super(options);
	},
	RequestData: function() {
		throw 'Не реализовано !!!';
	}
});
Thumbnail.addMethods({
	Invalidate: function($super) {
		$super();
		this.SetContent(this.GetThumbnailBody());
		this.body.observe('click', this.OnClick.bindAsEventListener(this));
	},
	GetThumbnailBody: function() {
		throw 'Не реализовано !!!';
	},
	OnClick: function(event) {
		if (!(this.viewer instanceof Viewer))
			return;
			
		if (this.viewer.selectedItem)
			this.viewer.selectedItem.body.setStyle({ 'border': '0px solid black' });
		this.body.setStyle({ 'border': '2px solid black' });
		this.viewer.Select(this);
	}
});

var VideoThumbnail = new Class.create(Thumbnail);
VideoThumbnail.addMethods({
Invalidate: function($super) {
	$super();
	this.InitImage();
},
GetThumbnailBody: function($super) {
	this.img = Builder.node('img', { width: 10, height: 10 });

	var imageContainer = Builder.node('td', [this.img]);
	imageContainer.setStyle({ 'textAlign': 'center' });

	var imageCaption = Builder.node('td', { height: 30 }, [this.options.caption]);
	imageCaption.setStyle({ 'color': 'black', 'background': 'white' });

	var imageThumbnailBody = Builder.node('table',
			{ className: this.className, width: '100%', height: '100%' },
			[Builder.node('tbody', [Builder.node('tr', imageContainer), Builder.node('tr', imageCaption)])]);
	imageThumbnailBody.setStyle({ 'background': 'black', 'textAlign': 'center' });
	return imageThumbnailBody;
},
InitImage: function() {
	var width = this.options.iwidth || 10;
	var height = this.options.iheight || 10;

	this.body.title = this.options.description;
	this.img.src = this.options.path;

	function scaleImage(maxSize, size) {
		var width = maxSize.Width;
		var height = width * size.Height / size.Width;

		if (height > maxSize.Height) {
			height = maxSize.Height;
			width = height * size.Width / size.Height;
		}

		return { Width: width, Height: height };
	}

	var originalSize = { Width: width, Height: height };
	var maxSize = { Width: (this.GetContentContainer().offsetWidth) - 4, Height: (this.GetContentContainer().offsetHeight - 30) - 4 };

	var newSize = scaleImage(maxSize, originalSize);

	var top = (this.GetContentContainer().offsetHeight - 30 - newSize.Height) / 2 + 'px';
	this.img.setStyle({ 'top': top, 'textAlign': 'center', 'width': newSize.Width + 'px', 'height': newSize.Height + 'px' });
}
});

var AlbumThumbnail = new Class.create(Thumbnail);
AlbumThumbnail.addMethods({
Invalidate: function($super) {
	$super();
	this.InitImage();
},
GetThumbnailBody: function($super) {
	this.img = Builder.node('img', { width: 10, height: 10 });

	var imageContainer = Builder.node('td', [this.img]);
	imageContainer.setStyle({ 'textAlign': 'center' });

	var imageCaption = Builder.node('td', { height: 30 }, [this.options.caption]);
	imageCaption.setStyle({ 'color': 'black', 'background': 'white' });

	var imageThumbnailBody = Builder.node('table',
			{ className: this.className, width: '100%', height: '100%' },
			[Builder.node('tbody', [Builder.node('tr', imageContainer), Builder.node('tr', imageCaption)])]);
	imageThumbnailBody.setStyle({ 'background': 'black', 'textAlign': 'center' });
	return imageThumbnailBody;
},
InitImage: function() {
	var width = this.options.iwidth || 10;
	var height = this.options.iheight || 10;

	this.img.alt = this.options.description;
	this.img.src = this.options.path;

	function scaleImage(maxSize, size) {
		var width = maxSize.Width;
		var height = width * size.Height / size.Width;

		if (height > maxSize.Height) {
			height = maxSize.Height;
			width = height * size.Width / size.Height;
		}

		return { Width: width, Height: height };
	}

	var originalSize = { Width: width, Height: height };
	var maxSize = { Width: (this.GetContentContainer().offsetWidth) - 4, Height: (this.GetContentContainer().offsetHeight - 30) - 4 };

	var newSize = scaleImage(maxSize, originalSize);

	var top = (this.GetContentContainer().offsetHeight - 30 - newSize.Height) / 2 + 'px';
	this.img.setStyle({ 'top': top, 'textAlign': 'center', 'width': newSize.Width + 'px', 'height': newSize.Height + 'px' });
}
});


var ImageThumbnail = new Class.create(Thumbnail);
ImageThumbnail.addMethods({
	Invalidate: function($super) {
		$super();
		this.InitImage();
	},
	GetThumbnailBody: function($super) {
		this.img = Builder.node('img', { width: 10, height: 10 });
		
		var imageContainer = Builder.node('td', [this.img]);
		imageContainer.setStyle({ 'textAlign': 'center' });

		var imageCaption = Builder.node('td', { height: 30},[this.options.caption]);
		imageCaption.setStyle({ 'color': 'black','background':'white'});

		var imageThumbnailBody = Builder.node('table',
			{ className: this.className, width: '100%', height: '100%' },
			[Builder.node('tbody', [Builder.node('tr', imageContainer), Builder.node('tr', imageCaption)])]);
		imageThumbnailBody.setStyle({ 'background': 'black','textAlign':'center'});
		return imageThumbnailBody;
	},
	InitImage: function() {
		var width = this.options.iwidth || 10;
		var height = this.options.iheight || 10;

		this.body.title = this.options.description;
		this.img.src = this.options.path;

		function scaleImage(maxSize, size) {
			var width = maxSize.Width;
			var height = width * size.Height / size.Width;

			if (height > maxSize.Height) {
				height = maxSize.Height;
				width = height * size.Width / size.Height;
			}

			return { Width: width, Height: height };
		}

		var originalSize = { Width: width, Height: height };
		var maxSize = { Width: (this.GetContentContainer().offsetWidth) - 4, Height: (this.GetContentContainer().offsetHeight - 30) - 4 };

		var newSize = scaleImage(maxSize, originalSize);

		var top = (this.GetContentContainer().offsetHeight - 30 - newSize.Height) / 2 + 'px';
		this.img.setStyle({ 'top': top, 'textAlign': 'center', 'width': newSize.Width + 'px', 'height': newSize.Height + 'px' });
	}
});

ThumbnailFactory = {};
ThumbnailFactory.CreateThumbnail = function(data, bounds, container, viewver) {
	data.container = container;
	data.width = bounds.width;
	data.height = bounds.height;
	data.left = bounds.left;
	data.top = bounds.top;
	data.id = data.id;

	switch (data.type) {
		case ThumbnailType.Video:
			thumbnail = new VideoThumbnail(data, viewver);
			break;
		case ThumbnailType.Image:
			thumbnail = new ImageThumbnail(data, viewver);
			break;
		case ThumbnailType.Album:
			thumbnail = new AlbumThumbnail(data, viewver);
			break;
		default:
			throw 'Неверный формат данных!';
	}
}