//create new class
var DesignUpdater = Class.create();

//create some methods for class
DesignUpdater.prototype = {
	
	/*
	*  constructor
	*/
	initialize: function() {
		this.currentCategoryName = '';
		this.currentCategoryLink = '';
		this.currentDesignName = '';
		this.currentDesignLink = '';
	},
	
	/*
	* interface to rico ajax engine
	*/
	ajaxUpdate: function(ajaxResponse) {		
		this.setCategories(ajaxResponse.childNodes[0]);
		this.setThumbs(ajaxResponse.childNodes[1]);
		this.setDesign(ajaxResponse.childNodes[2]);

		//leave breadcrumbs :)
		//this.refreshNavi();
	},
	
	setCategories: function(n){

		if(n == null || n.childNodes.length == 0){
			return;
		}	

		var tDiv = document.getElementById('listing');
		var result = '';
		var txt, lnk, img;
		for(var i = 0; i < n.childNodes.length; i++){
			var child = n.childNodes[i];
			txt = child.getAttribute('text');
			lnk = child.getAttribute('link');
			img = '<img src="/images/icon_'+ lnk.substr(2) +'.gif" align="absmiddle" style="border:none">';
			// link image and text seperately
			img = '<a href="#" name="' + lnk + '" onclick="return categoryLink(this);">' + img + '</a>';
			result += '<div class="listItem" style="height:20px">';
			result += img + '&nbsp;';
			result += '<a href="#" name="' + lnk + '" onclick="return categoryLink(this);">' + txt + '</a>';
			result += '</div>';
		}
		tDiv.innerHTML = result;
		//alert('categories:' + result);
		document.form1.designid.value =''
		this.show('listing');
	},
	
	setThumbs: function(n){

		if(n == null || n.childNodes.length == 0){
			return;
		}
		var tDiv = document.getElementById('thumbnails');
		var result = '';
		for(var i = 0; i < n.childNodes.length; i++){
			var child = n.childNodes[i];
			result += '<div class="listItem">';
			result += '<a href="#" name="' + child.getAttribute('link') +  '" onclick="thumbnailLink(this); return false;">';
			result += '<img src="' + child.getAttribute('image') + '" alt="' + child.getAttribute('alt') + '" style="border:none"/>';
			result += '</a>';
			result += '</div>';
		}
		tDiv.innerHTML = result;
		//alert('thumbs:' + result);
		this.currentCategoryLink = n.getAttribute('cLink');
		this.currentCategoryName = n.getAttribute('cName');
		document.form1.designid.value ='';
		this.show('thumbnails');
	},
	
	setDesign: function(node){
		if(node == null){
			return;
		}
		var result = '';
		var tDiv = document.getElementById('design');
		result += '<a href="#" onclick="return designLink(' + node.getAttribute('link') + ');">';
		result += '<img src="' + node.getAttribute('image') + '" alt="' + node.getAttribute('alt') + '" style="border:none"/>';
		result += '</a>';
		tDiv.innerHTML = result;
		//alert('design:' + result);
		this.currentCategoryLink = node.getAttribute('cLink');
		this.currentCategoryName = node.getAttribute('cName');
		this.currentDesignLink = node.getAttribute('link');
		this.currentDesignName = node.getAttribute('alt');

		document.form1.designid.value = node.getAttribute('link');
		document.getElementById('design_name').innerHTML = "&gt;&gt; " + node.getAttribute('alt');
		document.getElementById('controls').style.display = "";
		setSelect(document.form1.category, ajaxCallback.currentCategoryLink);		
		this.show('design');
	},
	show: function(target){
		var panels = ['thumbnails', 'design', 'listing'];
		for(var i = 0; i < panels.length; i++){
			var p = panels[i];
			var panel = document.getElementById(p);
			panel.style.display = (p == target) ? 'block' : 'none';
		}	
	},
	clear: function(target){
		if(target == null || target == 'undefined'){

			this.currentCategoryLink = 	this.currentCategoryName = 	this.currentDesignName = '';
			document.getElementById('design').innerHTML = '';
			document.getElementById('thumbnails').innerHTML = '';
			this.show('listing');
		}else if (target == 'design'){
			document.getElementById('design').innerHTML = this.currentDesignName = '';
			this.show('thumbnails');
		}
	}
};

var ajaxCallback = new DesignUpdater();

function categoryLink(element) {
	ajaxCallback.currentCategoryName = element.innerHTML;
	ajaxCallback.currentCategoryLink = element.name;
	ajaxCallback.clear('design');
	ajaxEngine.sendRequest('test', 'category=' + element.name);
	return false;
}	
function thumbnailLink(element) {
	ajaxEngine.sendRequest('test', "design=" + element.name);
	return false;
}

function designLink(designid) {
	window.open('preview.php?view=p&from=1&design=' + designid, 'preview', 'scrollbars=yes,width=750,height=650');
	return false;
}

function showCategory(category) {
	ajaxEngine.sendRequest('test', 'category=' + category);
	document.getElementById('design_name').innerHTML = "";
	document.getElementById('controls').style.display = "none";
}
function showCurrentCategory() {
	ajaxEngine.sendRequest('test', 'category=' + ajaxCallback.currentCategoryLink);
	document.getElementById('design_name').innerHTML = "";
	document.getElementById('controls').style.display = "none";
}
function showNextDesign() {
	current = ajaxCallback.currentDesignLink;
	var next;
	for (i=0; i < designids.length; i++) {
		if (designids[i] == current) {
			next = i + 1;
			break;
		}
	}
	if (next == designids.length) next = 0;	
	ajaxEngine.sendRequest('test', "design=" + designids[next]);
}
function showPrevDesign() {
	current = ajaxCallback.currentDesignLink;
	var prev;
	for (i=0; i < designids.length; i++) {
		if (designids[i] == current) {
			prev = i - 1;
			break;
		}
	}
	if (prev < 0) prev = designids.length - 1;	
	ajaxEngine.sendRequest('test', "design=" + designids[prev]);
}
function setSelect(sel, value) {
	if (value=='') return;
	var i=0;
	while (i < sel.options.length && sel.options[i].value != value) i++;
	sel.selectedIndex = i;
}
function init(){
	ajaxEngine.registerRequest('test','what.ajax.php');
	ajaxEngine.registerAjaxObject('complex', ajaxCallback);				
	ajaxCallback.clear();
	var category = 'c_aseasonal';
	if (document.form1.designid.value == '' || 
		document.form1.designid.value == 'undefined') {
		//alert('fetching categories');
		if (category != '') {
			//alert('fetching: ' + category);
			ajaxEngine.sendRequest('test', 'category=' + category);
		} else {
			//alert('fetching: all');
			ajaxEngine.sendRequest('test');	
		}
	} else {
		//alert('fetching design');
		ajaxEngine.sendRequest('test', "design=" + document.form1.designid.value);
	}
}