var activeSort='carat';

function sort(sortby){
	if (activeSort==sortby)
	{
		sortby=sortby+'D';
	}
	activeSort=sortby;
	// load sorted list items;
	var diamonds_table = new Fx.Style('diamonds_table', 'opacity', {duration:500}).start(1,0);
	diamonds_table.start(1,0).chain(function(){
		$('diamonds_table').empty();
		page = 1;
		request.send('&page='+page+'&sort='+sortby);
	});
}

function quote(url){
	window.open(url,"_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=350, height=300")
}


window.addEvent('domready', function() {
	
	function activeTable(){
		var diamonds = $$('.diamond_row');
		diamonds.each(function(el){
			el.addEvent('mouseenter', function(){
				el.setStyle('background-color', '#333333');
			});
			
			el.addEvent('mouseleave', function(){
				el.setStyle('background-color', 'transparent');
			});
	
			el.addEvent('click', function(){
				requestDiamond.send('&id='+el.id);
			});
		
		});
	}
	
	var selected_diamond = new Fx.Style('selected_diamond', 'opacity', {duration:500});
	var diamonds_table = new Fx.Style('diamonds_table', 'opacity', {duration:500}).set(0);
	var list_preloader = new Fx.Style('list_preloader', 'opacity', {duration:250}).set(0);
	var diamond_preloader = new Fx.Style('diamond_preloader', 'opacity', {duration:250}).set(0);
	var nextJson = new Fx.Style('nextJson', 'opacity', {duration:500}).set(0);
	var prevJson = new Fx.Style('prevJson', 'opacity', {duration:500}).set(0);
	var diamond_views = new Fx.Style('diamond_views', 'opacity', {duration:500}).set(0);
	
	var buildTable = function(items) {

		var table = new Element ('table', {"id":"the_table", "cellpadding":"0", "cellspacing":"0"});
		var tbody = new Element ('tbody', {"cellpadding":"0", "cellspacing":"0", "border":"0"}).injectInside(table);
		var tr = new Element ('tr', {"class":"table_titles"}).injectInside(tbody);
		
		var td = new Element ('td', {}).injectInside(tr);
		td.innerHTML='<a href="javascript:sort(\'size\');">Stock #</a>';
		
		var td = new Element ('td', {}).injectInside(tr);
		td.innerHTML='<a href="javascript:sort(\'size\');">Carat</a>';
		
		var td = new Element ('td', {}).injectInside(tr);
		td.innerHTML='<a href="javascript:sort(\'color\');">Color</a>';
		
		var td = new Element ('td', {}).injectInside(tr);
		td.innerHTML='<a href="javascript:sort(\'clarity\');">Clarity</a>';
		
		var td = new Element ('td', {}).injectInside(tr);
		td.innerHTML='<a href="#">Comment</a>';
		
		
		table.injectInside($('diamonds_table'));
		
		items.each(function(item) {
			var tr = new Element ('tr', {"id":item.id, "class":"diamond_row"});
			
			var td = new Element ('td', {}).injectInside(tr);
			td.setText(item.diamond_stockno);
			
			var td = new Element ('td', {}).injectInside(tr);
			td.setText(item.carat);
			
			var td = new Element ('td', {}).injectInside(tr);
			td.setText(item.color);
			
			var td = new Element ('td', {}).injectInside(tr);
			td.setText(item.clarity);
			
			var td = new Element ('td', {}).injectInside(tr);
			td.setText(item.diamond_comment);
			
			tr.injectInside(tbody);
		});
	}
	
	var buildDiamond = function(diamond)
	{
		var table;
		var tr;
		var td;
		
		var selected_diamond = $('selected_diamond');
		var h2 = new Element ('h2', {}).injectInside(selected_diamond);
		h2.innerHTML='<img src="images/br.jpg" />'+diamond.diamond_size+' Carat<br /> Diamond';
		var cleaner = new Element ('br', {"clear":"left"}).injectInside(selected_diamond);
		tableTitle = new Element ('p', {"id":"selected_table_title"}).injectInside(selected_diamond);
		tableTitle.innerHTML='Diamond Details:';
		table = new Element ('table', {"id":"selected_diamond_table", "cellpadding":"0", "cellspacing":"0"}).injectInside(selected_diamond);
		var tbody = new Element ('tbody', {"cellpadding":"0", "cellspacing":"0", "border":"0"}).injectInside(table);
		
		tr = new Element ('tr', {"class":"odd"}).injectInside(tbody);
		td = new Element ('td', {"class":"title"}).injectInside(tr);
		td.innerHTML='Carat:';
		td = new Element ('td', {"class":"content"}).injectInside(tr);
		td.innerHTML=diamond.diamond_size;
		
		tr = new Element ('tr', {"class":"even"}).injectInside(tbody);
		td = new Element ('td', {"class":"title"}).injectInside(tr);
		td.innerHTML='Color:';
		td = new Element ('td', {"class":"content"}).injectInside(tr);
		td.innerHTML=diamond.diamond_color;
		
		tr = new Element ('tr', {"class":"odd"}).injectInside(tbody);
		td = new Element ('td', {"class":"title"}).injectInside(tr);
		td.innerHTML='Clarity:';
		td = new Element ('td', {"class":"content"}).injectInside(tr);
		td.innerHTML=diamond.diamond_clarity;
		
		tr = new Element ('tr', {"class":"even"}).injectInside(tbody);
		td = new Element ('td', {"class":"title"}).injectInside(tr);
		td.innerHTML='Certification:';
		td = new Element ('td', {"class":"content"}).injectInside(tr);
		td.innerHTML=diamond.diamond_cert;
		
		tr = new Element ('tr', {"class":"odd"}).injectInside(tbody);
		td = new Element ('td', {"class":"title"}).injectInside(tr);
		td.innerHTML='Depth:';
		td = new Element ('td', {"class":"content"}).injectInside(tr);
		td.innerHTML=diamond.diamond_depth;
		
		tr = new Element ('tr', {"class":"even"}).injectInside(tbody);
		td = new Element ('td', {"class":"title"}).injectInside(tr);
		td.innerHTML='Table:';
		td = new Element ('td', {"class":"content"}).injectInside(tr);
		td.innerHTML=diamond.diamond_table;
		
		/*
tr = new Element ('tr', {"class":"odd"}).injectInside(tbody);
		td = new Element ('td', {"class":"title"}).injectInside(tr);
		td.innerHTML='Gridle:';
		td = new Element ('td', {"class":"content"}).injectInside(tr);
		td.innerHTML=diamond.diamond_girdle;
*/
		
		tr = new Element ('tr', {"class":"even"}).injectInside(tbody);
		td = new Element ('td', {"class":"title"}).injectInside(tr);
		td.innerHTML='Polish:';
		td = new Element ('td', {"class":"content"}).injectInside(tr);
		td.innerHTML=diamond.diamond_polish;
		
		tr = new Element ('tr', {"class":"odd"}).injectInside(tbody);
		td = new Element ('td', {"class":"title"}).injectInside(tr);
		td.innerHTML='Symmerty:';
		td = new Element ('td', {"class":"content"}).injectInside(tr);
		td.innerHTML=diamond.diamond_symmetry;
		
		tr = new Element ('tr', {"class":"even"}).injectInside(tbody);
		td = new Element ('td', {"class":"title"}).injectInside(tr);
		td.innerHTML='Fluoricent:';
		td = new Element ('td', {"class":"content"}).injectInside(tr);
		td.innerHTML=diamond.diamond_fluor;
		
		tr = new Element ('tr', {"class":"odd"}).injectInside(tbody);
		td = new Element ('td', {"class":"title"}).injectInside(tr);
		td.innerHTML='Measurments:';
		td = new Element ('td', {"class":"content"}).injectInside(tr);
		td.innerHTML=diamond.diamond_measurements;
		
		tr = new Element ('tr', {"class":"even"}).injectInside(tbody);
		td = new Element ('td', {"class":"title", "colspan":"2"}).injectInside(tr);
		td.innerHTML='<a href="javascript:quote(\'contact_d.html?pid='+diamond.pid+'&amp;stockno='+diamond.diamond_stockno+'\');">Click for quote</a>';
		
	}
	
	var updateBrowser = function(buttons){
		if (buttons.next=="true")nextJson.start(0,1);
		else if (buttons.next=="false")nextJson.start(1,0);
		
		if (buttons.prev=="true")prevJson.start(0,1);
		else if (buttons.prev=="false")prevJson.start(1,0);
		
		$('view_update').setHTML(buttons.view);
		diamond_views.start(0,1);
	}
	
	requestDiamond = new Json.Remote('json.html?op=diamond', {
		method: 'get',
		onRequest: function() {
			selected_diamond.set(0);
			$('selected_diamond').empty();
			diamond_preloader.set(1);
		},
		onComplete: function(jsonObj) {
			buildDiamond(jsonObj.diamond);
			selected_diamond.start(0,1)
			diamond_preloader.set(0);
		}
	}).send();
	
	page=1;
	request = new Json.Remote('json.html?op=diamonds_list', {
		method: 'get',
		onRequest: function() {
			list_preloader.start(0,1);
		},
		onComplete: function(jsonObj) {
			buildTable(jsonObj.items);
			updateBrowser(jsonObj.buttons);
			pngfix();
			activeTable();
			diamonds_table.start(0,1).chain(function(){
				list_preloader.set(0);
			});
		}
	}).send('&page='+page);
	
	// load next list items;
	$('nextJson').addEvent('click', function(e) {
		diamonds_table.start(1,0).chain(function(){
			$('diamonds_table').empty();
			page = page+1;
			request.send('&page='+page+'&sort='+activeSort);
		});
	});
	// load next list items;
	
	// load previous list items;
	$('prevJson').addEvent('click', function(e) {
		diamonds_table.start(1,0).chain(function(){
			$('diamonds_table').empty();
			page = page-1;
			request.send('&page='+page+'&sort='+activeSort);
		});
	});
	// load previous list items;
	
	
}); // end domready