var gem = new Array();
gem[1]='Diamond'
gem[2]='Sapphire'
gem[3]='Emerald'
gem[4]='Ruby'
gem[5]='Tanzanite'
gem[6]='Pink Sapphire'
gem[7]='Amethyst'
gem[8]='Garnet'
gem[9]='Peridot'
gem[10]='Jade'
gem[11]='Topaz'
gem[12]='Opal'
gem[13]='Pearl'
gem[14]='Aquamarine'
gem[15]='Turquoise'
gem[16]='Pink Tourmaline'
gem[17]='Green Tourmaline'
gem[18]='Yellow Tourmaline'
gem[19]='Citrine'
gem[20]='Fancy Yellow'
gem[21]='Multi'

var shape = new Array();
shape['1']='Round'
shape['2']='Oval'
shape['3']='Pear-shaped'
shape['4']='Emerald'
shape['5']='Asscher'
shape['6']='Marquise'
shape['7']='Radiant'
shape['8']='Princess'
shape['9']='Heart'
shape['10']='Cushion'
shape['11']='trillian'
shape['12']='Baguette'

var states = new Object;
var pagenum;

window.addEvent('domready', function() {

	var selected_content = new Fx.Style('selected_content', 'opacity', {duration:500});
	var preloader = new Fx.Style('preloader', 'opacity', {duration:250});
	var items_preloader = new Fx.Style('items_preloader', 'opacity', {duration:250}).set(0);
	var the_items = new Fx.Style('the_items', 'opacity', {duration:500}).set(0);
	var nextJson = new Fx.Style('nextJson', 'opacity', {duration:500}).set(0.5);
	var prevJson = new Fx.Style('prevJson', 'opacity', {duration:500}).set(0.5);
	var views = new Fx.Style('views', 'opacity', {duration:500}).set(0);
	
	var addItems = function(items) {
		var item_list_block = $('the_items');
		var i=1;
		items.each(function(item) {
			var item_box = new Element ('div', {'class': 'item_box'});
			var the_item = new Element ('div', {'id': item.pid, 'class': 'box_content'}).injectInside(item_box);
			var img = new Element('img', {'src': 'http://www.ondiamonds.com/images/jewelry/' + item.pid + '_thumb.jpg', 'width':'90', 'height':'90', 'alt': item.var_id}).injectInside(the_item);
			/* var bk_img = new Element('img', {'id': 'bk_'+item.pid, 'class': 'pngfix', 'src': 'images/item_box.png', 'height':'100', 'width':'100', 'alt': 'item box background'}).injectInside(item_box); */
			item_box.inject(item_list_block);
			i++;
		});
	}
	
	var addItem = function(item) {
		var selected_content = $('selected_content');
		var item_detials = new Element ('div', {'id': 'item_detials'});
		//var ring_closeup = new Element ('div', {'id': 'ring_closeup'}).injectInside(item_detials);
		//var img_closeup = new Element('img', {'src': 'http://www.ondiamonds.com/images/jewelry/' + item.jewelry.pid + '_zoom.jpg', 'alt': item.variant.name, 'width':'350', 'height':'350'}).injectInside(ring_closeup);
		var img = new Element('img', {'id':'show_closeup', 'src': 'http://www.ondiamonds.com/images/jewelry/' + item.jewelry.pid + '.jpg', 'width':'200', 'height':'200', 'alt': item.variant.name}).injectInside(item_detials);
		var title = new Element ('h2', {}).injectInside(item_detials);
		title.setHTML(item.variant.name);
		
		var ulist = new Element ('ul', {}).injectInside(item_detials);
		new Element('li',{}).injectInside(ulist).innerHTML = '<strong>Stock ID:</strong> ' + item.jewelry.pid;
		new Element('li',{}).injectInside(ulist).innerHTML = '<strong>Style ID:</strong> ' + item.jewelry.sku;
		new Element('li',{}).injectInside(ulist).innerHTML = '<strong>Metal:</strong> 14k,18k,Plat';
		if (item.variant.weight!=false)
		{
			new Element('li',{}).injectInside(ulist).innerHTML = '<strong>Weight:</strong> ' + item.variant.weight;
		}
		new Element('li',{}).injectInside(ulist).innerHTML = '<strong>Type:</strong> ' + item.variant.prongType;
		
	/*
	var tables = new Element ('p',{'id':'ring_tables'}).injectInside(item_detials);
		
		var table = new Element ('table', {"cellpadding":"0", "cellspacing":"0"});
		var tbody = new Element ('tbody', {"cellpadding":"0", "cellspacing":"0", "border":"0"}).injectInside(table);
		
		var tr = new Element ('tr', {}).injectInside(tbody);
		var td = new Element ('td', {'width':'75'}).injectInside(tr);
		td.innerHTML='<strong>Stock ID:</strong>';
		var td = new Element ('td', {}).injectInside(tr);
		td.innerHTML=item.jewelry.pid;
		
		var tr = new Element ('tr', {}).injectInside(tbody);
		var td = new Element ('td', {'width':'75'}).injectInside(tr);
		td.innerHTML='<strong>Style ID:</strong>';
		var td = new Element ('td', {}).injectInside(tr);
		if (item.jewelry.sku)
		{
		td.innerHTML=item.jewelry.sku;
		}
		
		var tr = new Element ('tr', {}).injectInside(tbody);
		var td = new Element ('td', {'width':'75'}).injectInside(tr);
		td.innerHTML='<strong>Metal:</strong>';
		var td = new Element ('td', {}).injectInside(tr);
		td.innerHTML='  14k,18k,Plat';
*/
		
		/*var tr = new Element ('tr', {}).injectInside(tbody);
		var td = new Element ('td', {'width':'75'}).injectInside(tr);
		td.innerHTML='<strong>Weight:</strong>';
		var td = new Element ('td', {}).injectInside(tr);
		if (item.variant.weight!=false)
		{
			td.innerHTML=item.variant.weight;
		}
		
		var tr = new Element ('tr', {}).injectInside(tbody);
		var td = new Element ('td', {'width':'75'}).injectInside(tr);
		td.innerHTML='<strong>Type:</strong>';
		var td = new Element ('td', {}).injectInside(tr);
		td.innerHTML=item.variant.prongType;
		*/
		
		//table.injectInside(tables);
		
		var h3 = new Element ('h3', {}).injectInside(item_detials).innerHTML = 'Sidestones:';
		//var sidestones = new Element ('p',{'id':'sidestones'}).injectInside(item_detials);
		
		var ulist = new Element ('ul', {}).injectInside(item_detials);
		item.sidestones.each(function(item){	
			
			var listItem = new Element('li',{}).injectInside(ulist).innerHTML = '<strong>'+item.quantity +' '+ shape[item.shape] +' '+gem[item.gem_type]+' Stones</strong>';
			
/*
				var table = new Element ('table', {"cellpadding":"0", "cellspacing":"0", "style":"margin-top:5px;"});
				var tbody = new Element ('tbody', {"cellpadding":"0", "cellspacing":"0", "border":"0"}).injectInside(table);
				
				var tr = new Element ('tr', {}).injectInside(tbody);
				var td = new Element ('td', {'colspan':'2'}).injectInside(tr);
				td.innerHTML='<strong>'+item.quantity +' '+ shape[item.shape] +' '+gem[item.gem_type]+' Stones</strong>';
*/
				
				/*
var tr = new Element ('tr', {}).injectInside(tbody);
				var td = new Element ('td', {'width':'75'}).injectInside(tr);
				td.innerHTML='Clarity:';
				var td = new Element ('td', {}).injectInside(tr);
				td.innerHTML='Betwwen: '+item.lowest_clarity+' and '+item.highest_clarity;
				
				var tr = new Element ('tr', {}).injectInside(tbody);
				var td = new Element ('td', {'width':'75'}).injectInside(tr);
				td.innerHTML='Color:';
				var td = new Element ('td', {}).injectInside(tr);
				td.innerHTML='Betwwen: '+item.lowest_color+' and '+item.highest_color;
				
				var tr = new Element ('tr', {}).injectInside(tbody);
				var td = new Element ('td', {'width':'75'}).injectInside(tr);
				td.innerHTML='Prong type:';
				var td = new Element ('td', {}).injectInside(tr);
				td.innerHTML=item.prong;
*/
				
				//table.injectInside(sidestones);
		});
		
		item_detials.injectInside(selected_content);
	}
	
	var updateBrowser = function(buttons){
		if (buttons.next=="true")
		{
			nextJson.start(0.5,1);
		}
		else if (buttons.next=="false")
		{
			nextJson.start(1,0.5);
		}
		if (buttons.prev=="true")
		{
			prevJson.start(0.5,1);
		}
		else if (buttons.prev=="false")
		{
			prevJson.start(1,0.5);
		}
		
		if (buttons.pagenum)
			pagenum = buttons.pagenum;
		
		$('view_update').setHTML(buttons.view);
		views.start(0,1);
	}
	
	/*
function activeCloseup(){
		var closeupFx = new Fx.Style('ring_closeup','opacity', {duration:500}).set(0);
		
		$('show_closeup').addEvent('click', function(e) {
			closeupFx.start(0,1);
			$('page_notes').setHTML('Click on the ring to close');
		});
		$('ring_closeup').addEvent('click', function(e) {
			closeupFx.start(1,0);
			$('page_notes').setHTML('Click on the ring to zoom');
		});
	}
*/
	
	function populateItems(){
		var items = $$(".box_content");
		items.each(function(element) {
			element.addEvent("click", function(event) {
				var myFx = new Fx.Style(element, 'opacity', {duration:750}).start(0,1);
				itemRequest.send('&id='+element.id);
				//$('page_notes').setHTML('Click on the ring to zoom');
			});
		});
	}
	
	itemRequest = new Json.Remote('json.html?op=jewelry', {
		method: 'get',
		onRequest: function() {
			selected_content.set(0);
			$('selected_content').empty();
			preloader.set(1);
		},
		onComplete: function(jsonObj) {
			addItem(jsonObj.item);
			//activeCloseup();
			selected_content.start(0,1)
			preloader.set(0);
		}
	}).send();
	
	page=1;
	request = new Json.Remote('json.html?op=jewelry_list', {
		method: 'get',
		onRequest: function() {
			items_preloader.start(0,1);
		},
		onComplete: function(jsonObj) {
			addItems(jsonObj.items);
			updateBrowser(jsonObj.buttons);
			populateItems();
			pngfix();
			the_items.start(0,1).chain(function(){
				items_preloader.set(0);
			});
		}
	}).send();
	// init on domready
							
	// load next 6 items;
	$('nextJson').addEvent('click', function(e) {
		if (page+1 > pagenum)
			return;
		
		page = page+1;
		
		the_items.start(1,0).chain(function(){
			$('the_items').empty();
			request.send('&page='+page);
		});
	});
	// load next 6 items;
	
	// load previous 6 items;
	$('prevJson').addEvent('click', function(e) {
		if (page-1 <= 0)
			return;
		
		page = page-1;
		
		the_items.start(1,0).chain(function(){
			$('the_items').empty();
			request.send('&page='+page);
		});
	});
	// load previous 6 items;

}); // end domready