var buttonsStatus,
	request,
	itemRequest;

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.id, 'class': 'box_content'}).injectInside(item_box);
			var img = new Element('img', {'src': '/newpanel/pics/' + item.stockid + '_90.jpg' , 'width':'90', 'height':'90', 'alt': 0}).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': '/newpanel/pics/' + item.stockid + '_200.jpg', 'width':'200', 'height':'200', 'alt': item.title}).injectInside(item_detials);
		var title = new Element ('h2', {}).injectInside(item_detials);
		title.setHTML(item.title);
		
		var ulist = new Element ('ul', {}).injectInside(item_detials);
		new Element('li',{}).injectInside(ulist).innerHTML = '<strong>Stock ID:</strong> ' + item.stockid;
		new Element('li',{}).injectInside(ulist).innerHTML = '<strong>Metal:</strong> 14k,18k,Plat';
		if (item.metal_weight > 0){
			new Element('li',{}).injectInside(ulist).innerHTML = '<strong>Total Gram:</strong> ' + item.metal_weight;
		}
		if (item.gems_weight > 0){
			new Element('li',{}).injectInside(ulist).innerHTML = '<strong>Diamonds Weight:</strong> ' + item.gems_weight;
		}
		//new Element('li',{}).injectInside(ulist).innerHTML = '<strong>Type:</strong> ' + item;
		
	/*
	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 ulist = new Element ('ul', {}).injectInside(item_detials);
		var listItem = new Element('li',{}).injectInside(ulist).innerHTML ='<strong>'+item.sidestones+'</strong>';
		
		item_detials.injectInside(selected_content);
	};
	
	var updateBrowser = function(buttons){

		buttonsStatus = 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);
		}

		$('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);
			//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();

	// load next 6 items;
	$('nextJson').addEvent('click', function(e) {

		if (buttonsStatus.next == "false"){
			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 (buttonsStatus.prev == "false"){
			return;
		}
		
		page = page-1;
		
		the_items.start(1,0).chain(function(){
			$('the_items').empty();
			request.send('&page='+page);
		});
	});
	// load previous 6 items;

}); // end domready