var Viewer = new Class.create(ASControls.UserControl, {
	initialize: function($super, options) {
		this.thumbnails = null;
		this.thPadding = options.thPadding || 22;
		this.thumbnailsData = options.thumbnailsData || [];
		$super(options);
	},
	CreateThumbnails: function(data) {
		throw 'Не реализовано !!!';
	}
});

Viewer.addMethods({
	Invalidate: function($super) {
		$super();
		this.thumbnails = this.CreateThumbnails(this.thumbnailsData);
	}
});

var TableViewer = new Class.create(Viewer, {
	initialize: function($super, options) {
		this.rows = options.rows || 2;
		this.columns = options.columns || 3;
		$super(options);
	}
});
TableViewer.addMethods({
	CreateThumbnails: function($super, data) {
		var container = Builder.node('div');
		var subcontainer = Builder.node('div');
		container.appendChild(subcontainer);
		this.AppendContent(container);
		var cc = this.GetContentContainer();
		var height = parseInt(cc.offsetHeight);
		var width = parseInt(cc.offsetWidth);
		container.setStyle({ 'background': 'Gray', 'overflow': 'auto', 'position': 'relative', 'width': width, 'height': height, 'left': '0%', 'top': '0%' });

		var colsCount = Math.ceil(data.length / this.rows);
		var bounds = {
			height: Math.round((height - this.thPadding) / this.rows) - this.thPadding,
			width: Math.round((width - this.thPadding) / this.columns) - this.thPadding,
			left: this.thPadding,
			top: this.thPadding
		}
		for (var i = 0; i < colsCount; i++) {
			for (var j = 0; j < this.rows; j++) {
				var index = i * this.rows + j;
				if (index >= data.length)
					continue;
				bounds.left = bounds.width * i + this.thPadding * (i + 1);
				bounds.top = bounds.height * j + this.thPadding * (j + 1);

				ThumbnailFactory.CreateThumbnail(data[index], bounds, subcontainer, this);
			}
		}
		var maxWidth = bounds.left + bounds.width + this.thPadding;
		var maxHeight = bounds.top + bounds.height;

		subcontainer.setStyle({ 'background': 'Gray', 'position': 'relative', 'width': maxWidth, 'height': maxHeight, 'left': '0px', 'top': '0px' })
		return container;
	},
	Select: function(item) {
		if (this.galery) {
			this.body.fire(this.galery.id + ':selectionchanged', { sender: item });
		}
		this.selectedItem = item;
	}
});

var ImageSelectView = new Class.create(ASControls.UserControl, {
	initialize: function($super, options) {
		this.thumbnail = options.thumbnail || null;
		this.thPadding = options.thPadding || 20;

		$super(options);
	},
	SetData: function(thumbnail) {
		this.thumbnail = thumbnail;
		this.Invalidate();
	}
});

ImageSelectView.addMethods({
	Invalidate : function($super){
		$super();
		if (this.thumbnail != null){
			var container = this.GetContentContainer();	
			var height = parseInt(container.offsetHeight) - 30;
			var width = parseInt(container.offsetWidth) - 30;			
			var bounds = {
				height: Math.round((height - this.thPadding)) - this.thPadding,
				width: Math.round((width - this.thPadding)) - this.thPadding,
				left: this.thPadding,
				top: this.thPadding
			}
			ThumbnailFactory.CreateThumbnail(this.thumbnail, bounds, container, this);			
		}
		
	}
});


var MediaGalery = new Class.create(ASControls.Dialog, {
	initialize: function($super, options) {
		this.treeview = options.treeview || null;

		if (!options.thumbnailsData)
			options.thumbnailsData = {};
		this.thumbnailsData = options.thumbnailsData.tag || [];
		this.type = options.thumbnailsData.type || "Images";
		if (!options.canAdd)
			options.canAdd = false;
		this.canAdd = options.canAdd;
		
		this.vieweroptions = { thumbnailsData: this.thumbnailsData };
		$super(options);
	}
});
MediaGalery.addMethods({
	Invalidate: function($super) {
		$super();
		this.CreateButtons();
		this.RefreshViewer();
	},
	CreateButtons: function() {
		var first = Builder.node('td');
		var second = Builder.node('td');
		var third = Builder.node('td');
		var splitter = Builder.node('td', { width: '100px' });
		var addNewC = Builder.node('td');

		btncontainer = Builder.node('table', { id: this.id + '-buttonContainer' }, [Builder.node('tbody', [Builder.node('tr', [first, second, third, splitter, addNewC])])]);
		btncontainer.setStyle({ 'left': '0px', 'textAlign': 'left', 'position': 'relative', 'padding': '5px 5px 0px 8px' });
		this.AppendContent(btncontainer);

		var btn2x3 = new ASControls.Button({ isToggle: true, state: true, id: this.id + '-2x3', caption: '2x3', container: third });
		this.body.observe(this.id + '-2x3:statechanged', this.On2x3Click.bindAsEventListener(this));

		var btn1x2 = new ASControls.Button({ isToggle: true, id: this.id + '-1x2', caption: '1x2', container: second });
		this.body.observe(this.id + '-1x2:statechanged', this.On1x2Click.bindAsEventListener(this));

		var btn1x1 = new ASControls.Button({ isToggle: true, id: this.id + '-1x1', caption: '1x1', container: first });
		this.body.observe(this.id + '-1x1:statechanged', this.On1x1Click.bindAsEventListener(this));

		if (this.canAdd == true) {
			var addNew = new ASControls.Button({ id: this.id + '-addNew', caption: 'Добавить', container: addNewC });
			this.body.observe(this.id + '-addNew:click', this.OnAddNewClick.bindAsEventListener(this));
		}

		var group = new ASControls.ToggleButtonGroup([btn1x1, btn1x2, btn2x3], btn2x3);
	},
	SetData: function(data, caption) {
		this.thumbnailsData = data.tag;
		this.type = data.type || "Image";
		this.vieweroptions.thumbnailsData = data.tag;
		this.SetCaption(caption);
		this.RefreshViewer();
	},
	OnAddNewClick: function(event) {

	},
	On1x1Click: function(event) {
		if (event.memo.sender.GetState() != true)
			return;

		this.vieweroptions.rows = 1;
		this.vieweroptions.columns = 1;
		this.RefreshViewer();
	},
	On1x2Click: function(event) {
		if (event.memo.sender.GetState() != true)
			return;

		this.vieweroptions.rows = 1;
		this.vieweroptions.columns = 2;
		this.RefreshViewer();
	},
	On2x3Click: function(event) {
		if (event.memo.sender.GetState() != true)
			return;

		this.vieweroptions.rows = 2;
		this.vieweroptions.columns = 3;
		this.RefreshViewer();
	},
	OnAddNewClick: function() {
		var form = document.forms[0];
		form.action = "Default.aspx?at=Upload" + this.type;
		form.submit();
	},
	RefreshViewer: function() {

		if (this.viewer) this.viewer.body.remove();
		if (this.treeview) this.treeview.body.remove();
		if (this.imageselector) this.imageselector.body.remove();
		if ($(this.id + '-viewtable')) {
			$(this.id + '-viewtable').remove();
		}
		var lCol = Builder.node('td', { id: this.id + '-mglecl', overflow: 'scroll' });
		var cCol = Builder.node('td', { id: this.id + '-mglccl' });

		var table = Builder.node('table', { id: this.id + '-viewtable', className: this.className },
			[Builder.node('tbody', [
				Builder.node('tr', [lCol, cCol]),
				]),
			]);

		this.vieweroptions.height = this.height - 30;
		if (this.treeview) {
			lCol.appendChild(this.treeview.body);
			this.vieweroptions.width = this.width - this.treeview.width - 10;
		}
		else {
			this.vieweroptions.width = this.width - 10;
		}

		this.viewer = new TableViewer(this.vieweroptions);
		cCol.appendChild(this.viewer.body);
		if (this.treeview) lCol.appendChild(this.treeview.body);

		this.AppendContent(table);
		this.viewer.galery = this;
	}
});