function Templates () {
}

Templates.prototype.startup = function() {
	this.productList = new Array();
	this.templateList = new Array();
	user.rpc.listProducts().addCallback(this, function(res) {
			this.productList = res;
			for(var i in this.productList) {
				if(this.productList[i].initial) {
					this.initialProduct = i;
				}
			}
			this.createLayer("templates/" + this.productList[this.initialProduct].file + "/" + this.productList[this.initialProduct].file + "_viewport.png");
			this.currentProduct = this.initialProduct;
		}).addErrback(this, function(msg) {
			user.alert("Could not retrieve product list!</br>", msg);
			});
	user.rpc.listTemplates().addCallback(this, function(res) {
			this.templateList = res;
			this.currentTemplate = -1;
		}).addErrback(this, function(msg) {
			user.alert("Could not retrieve template list!</br>", msg);
			});
}

Templates.prototype.createLayer = function(src) {
	this.layer = new Object();
	this.layer.node = document.createElement("div");
	this.layer.node.id = "ViewportTemplate";
	this.layer.node.style.zIndex = 900;
	dojo.addClass(this.layer.node,"template");
	dojo.byId("Canvas").appendChild(this.layer.node);
	
	this.layer.templateToggler = new dojo.fx.Toggler({
		node: this.layer.node,
		hideDuration: 400,
		showDuration: 400
	});
	
	this.templateView = true;
	
	this.layer.image = document.createElement("img");
	this.layer.image.src = src;
	this.layer.image.style.width = "100%";
	this.layer.image.style.height = "100%";
	this.layer.node.appendChild(this.layer.image);

	this.layer.bg = document.createElement("div");
	dojo.addClass(this.layer.bg, "bg");
	dojo.byId("Canvas").appendChild(this.layer.bg);
}

Templates.prototype.toggleTemplateView = function() {
	if (this.templateView) {
		this.layer.templateToggler.hide();
		this.templateView = false;
	} else {
		this.layer.templateToggler.show();
		this.templateView = true;
	}
	dojo.byId("templateView").src = this.templateView ? "images/designview.png" : "images/templateview.png";
}

Templates.prototype.openProductSelector = function() {
	if (!this.productList || this.productList.length < 1) {
		user.alert("No product templates found");
		return;
	}
	
	if (!this.templateView) {
		this.toggleTemplateView();
	}
	
	var container, node;
	container = document.createElement("div");
	
	node = document.createElement("img");
	node.src = "images/pic_product.jpg";
	container.appendChild(node);
	
	node = document.createElement("div");
	node.id = "dProductSelector";
	
	for (var i in this.productList) {
		var img = document.createElement("img");
		img.src = "templates/" +  this.productList[i].file + "/" + this.productList[i].file + "_preview.png";
		img.id = "dProductSelectorImage_" + i;
		img.productnumber = i;
		if (i == this.currentProduct) {
			dojo.addClass(img, "selected");
		}
		dojo.connect(img, "onclick", function (e) {
			dojo.removeClass(dojo.byId("dProductSelectorImage_" + user.templates.currentProduct), "selected");
			dojo.addClass(this, "selected");
			user.templates.currentProduct = this.productnumber;
			user.templates.currentTemplate = -1;
			var file = user.templates.productList[this.productnumber].file;
			user.templates.layer.image.src = "templates/" + file + "/" + file + "_viewport.png";
			dialog.destroy();
		});
		var div = document.createElement("div");
		div.appendChild(img);
		var tdiv = document.createElement("div");
		tdiv.innerHTML = this.productList[i].file;
		div.appendChild(tdiv);
		node.appendChild(div);
	}
	container.appendChild(node);
	
	dialog = user.openDialog("Select Product", container);
}

Templates.prototype.openTemplateSelector = function(replace) {
	templatesForProduct = false;
	var layersettings = new Object();
	
	for (var i = 0; i < this.templateList.length; i++)
		if (this.templateList[i].product == this.productList[this.currentProduct].file) {
			templatesForProduct = true;
			break;
		}
	
	if (!this.templateList || this.templateList.length < 1 || !templatesForProduct) {
		user.alert("Warning!", "Sorry, no templates found for this product!");
		return;
	}
	
	if (!this.templateView) {
		this.toggleTemplateView();
	}

	var container, node, list, preview, previewImage;
	container = document.createElement("div");

	node = document.createElement("img");
	node.src = "images/pic_template.jpg";
	container.appendChild(node);
	
	node = document.createElement("div");
	
	list = document.createElement("div");
	list.id = "templateSelectorList";
	node.appendChild(list);	
	
	for (var i in this.templateList) {
		if (this.templateList[i].product == this.productList[this.currentProduct].file){
			themePath = '/';
			if (this.templateList[i].theme != '') 
				themePath = themePath + this.templateList[i].theme + '/';

			var div = document.createElement("div");
			var img = document.createElement("img");
			img.templatenumber = i;
			img.id = "dTemplateSelectorItem_" + i;
			img.src = "templates/" + this.templateList[i].product + themePath + this.templateList[i].name + "_preview.png";
			    
			if (i == this.currentTemplate) {
				dojo.addClass(img, "selected");
			}
			dojo.connect(img, "onclick", function (e) {
				if (user.templates.currentTemplate > -1)
					dojo.removeClass(dojo.byId("dTemplateSelectorItem_" + user.templates.currentTemplate), "selected");
			
				dojo.addClass(this, "selected");
				user.templates.currentTemplate = this.templatenumber;
				var file = user.templates.templateList[this.templatenumber].name;
				var product = user.templates.templateList[this.templatenumber].product;
				var theme = user.templates.templateList[this.templatenumber].theme == '' ? "/" : "/" + user.templates.templateList[this.templatenumber].theme + "/";
				layersettings.src = "templates/" + product + theme + file + "_template.png";
				layersettings.name = file;
//				user.templates.layer.image.src = "templates/" + product + theme + file + "_template.png";
				});
			div.appendChild(img);
			list.appendChild(div);
		}
	}
	
	container.appendChild(node);
	container.style.textAlign = "center";	

	var spacer = document.createElement("div");
	dojo.addClass(spacer, "spacer");
	container.appendChild(spacer);	
	
	var button = new dijit.form.Button({label: "OK"});
	container.appendChild(button.domNode);

	dojo.connect(button, "onClick", function () {
		dialog.destroy();
		user.user_layers.lastlayer++;
		layersettings.id = "Layer_" + user.user_layers.lastlayer + "_" + layersettings.name;
		layersettings.name = "Template layer";
		layersettings.selected = false;
		layersettings.type = 'template';
		layersettings.order = this.lastlayer;
		layersettings.left = 0;
		layersettings.top = 0;
		layersettings.rotation = 0;
	 	layersettings.move = false;
		layersettings.bounded = true;
		layersettings.resize = false;
		layersettings.keepratio = true;
		layersettings.meta = 'template';
		user.rpc.addLayerWithServerImage(session, layersettings).addCallback(function(res){
			layersettings = res;
			layersettings.width = 550;
			layersettings.height = 460;
			if(replace == true){
				user.user_layers.replaceSelectedLayer(new Layer(layersettings));
			} else {
				user.user_layers.addLayer(new Layer(layersettings));
			}
		});
	});
	
	dialog = user.openDialog("Select Template", container);
}

Templates.prototype.openBgColorDialog = function() {
	user.openColorDialog("Select Background Color",function (value){
		user.templates.layer.bg.style.backgroundColor = value;
		dojo.byId("dBgColorPreview").style.backgroundColor = value;
		}, 'images/pic_background.jpg');
}

Templates.prototype.setProductFromFile = function(product) {
	for(var i in this.productList)
		if(this.productList[i].file == product)
			break;
	this.currentProduct = i;
	var file = this.productList[i].file;
	this.layer.image.src = "templates/" + file + "/" + file + "_viewport.png";
}

Templates.prototype.setTemplateFromFile = function(template) {
	for(var i in this.productList)
		if(this.templateList[i].name == template.template && this.templateList[i].product == template.product)
			break;
	this.currentTemplate = i;
}