var CUT_DRAG_HEIGHT = 24, COLOR_DRAG_HEIGHT = 17, CLARITY_DRAG_HEIGHT = 15;
var DRAG_HEIGHT = 142;
var CUT_TOP_HEIGHT_RULE = {};
CUT_TOP_HEIGHT_RULE[CUT_DRAG_HEIGHT * 4] = "Fair";
CUT_TOP_HEIGHT_RULE[CUT_DRAG_HEIGHT * 3] = "Good";
CUT_TOP_HEIGHT_RULE[CUT_DRAG_HEIGHT * 2] = "Very Good";
CUT_TOP_HEIGHT_RULE[CUT_DRAG_HEIGHT] = "Ideal";
CUT_TOP_HEIGHT_RULE[0] = "Super Ideal";
var COLOR_TOP_HEIGHT_RULE = {};
COLOR_TOP_HEIGHT_RULE[COLOR_DRAG_HEIGHT * 6] = "J";
COLOR_TOP_HEIGHT_RULE[COLOR_DRAG_HEIGHT * 5] = "I";
COLOR_TOP_HEIGHT_RULE[COLOR_DRAG_HEIGHT * 4] = "H";
COLOR_TOP_HEIGHT_RULE[COLOR_DRAG_HEIGHT * 3] = "G";
COLOR_TOP_HEIGHT_RULE[COLOR_DRAG_HEIGHT * 2] = "F";
COLOR_TOP_HEIGHT_RULE[COLOR_DRAG_HEIGHT] = "E";
COLOR_TOP_HEIGHT_RULE[0] = "D";
var CLARITY_TOP_HEIGHT_RULE = {};
CLARITY_TOP_HEIGHT_RULE[CLARITY_DRAG_HEIGHT * 7] = "SI2";
CLARITY_TOP_HEIGHT_RULE[CLARITY_DRAG_HEIGHT * 6] = "SI1";
CLARITY_TOP_HEIGHT_RULE[CLARITY_DRAG_HEIGHT * 5] = "VS2";
CLARITY_TOP_HEIGHT_RULE[CLARITY_DRAG_HEIGHT * 4] = "VS1";
CLARITY_TOP_HEIGHT_RULE[CLARITY_DRAG_HEIGHT * 3] = "VVS2";
CLARITY_TOP_HEIGHT_RULE[CLARITY_DRAG_HEIGHT * 2] = "VVS1";
CLARITY_TOP_HEIGHT_RULE[CLARITY_DRAG_HEIGHT] = "IF";
CLARITY_TOP_HEIGHT_RULE[0] = "FL";
var CUT_BOTTOM_HEIGHT_RULE = {};
CUT_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT] = "Fair";
CUT_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - CUT_DRAG_HEIGHT] = "Good";
CUT_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - CUT_DRAG_HEIGHT * 2] = "Very Good";
CUT_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - CUT_DRAG_HEIGHT * 3] = "Ideal";
CUT_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - CUT_DRAG_HEIGHT * 4] = "Super Ideal";
var COLOR_BOTTOM_HEIGHT_RULE = {};
COLOR_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT] = "J";
COLOR_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - COLOR_DRAG_HEIGHT] = "I";
COLOR_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - COLOR_DRAG_HEIGHT * 2] = "H";
COLOR_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - COLOR_DRAG_HEIGHT * 3] = "G";
COLOR_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - COLOR_DRAG_HEIGHT * 4] = "F";
COLOR_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - COLOR_DRAG_HEIGHT * 5] = "E";
COLOR_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - COLOR_DRAG_HEIGHT * 6] = "D";
var CLARITY_BOTTOM_HEIGHT_RULE = {};
CLARITY_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT] = "SI2";
CLARITY_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - CLARITY_DRAG_HEIGHT] = "SI1";
CLARITY_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - CLARITY_DRAG_HEIGHT * 2] = "SI2";
CLARITY_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - CLARITY_DRAG_HEIGHT * 3] = "VS1";
CLARITY_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - CLARITY_DRAG_HEIGHT * 4] = "VVS2";
CLARITY_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - CLARITY_DRAG_HEIGHT * 5] = "VVS1";
CLARITY_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - CLARITY_DRAG_HEIGHT * 6] = "IF";
CLARITY_BOTTOM_HEIGHT_RULE[DRAG_HEIGHT - CLARITY_DRAG_HEIGHT * 7] = "FL";
var saveTopValue = {};
var __mouseTimes = false;
var __prevTop = false, __curTop = false;
var isSimilar_show = false;
var cur_sort_column = false;
var cur_sort_type = "";
var sort_column = "price";
var sort_type = "asc";
var parv_scroll_top = false;
var start_scroll_top = 0;
var cur_scroll_top = false;
var end_scroll_top = false;
var isMouse_down = false;
var curKeyValue = false;
var curKeyCode = false;
var mouseTimeout = 0;
var view_link = '';
var search_path = '';

var mode = 0;
var height_times = 1;
var RAW_HEIGHT = 21;
var is_init = false;
var sid = '';
var first = '';

var CACHE = {'waiting_response': false, 'request_params': null};

var lastAjax = null /*added by shuyuan zhou, used to store last ajax object*/
CACHE.ajaxParams = {}; /*added by shuyuan zhou*/
CACHE.ajaxTimer = null; /*added by shuyuan zhou*/

/* That's not very good, move initDrat function to backInit because we use backInit everywhere now.*/
/*
$(document).ready(
	function() {
		initDrag();
	}
);
*/

function initDrag() {
	$(".dragValues").change(function () {
		cur_scroll_top = 0;
		dragSearchResult(0,0,sort_column,sort_type);
	});

	var min_price = $("#id_min_price");
	var max_price = $("#id_max_price");
	min_price.change(function(){
		min = parseInt(min_price.val());
		max = parseInt(max_price.val());
		if (!min || max && min > max){
			min_price.val('');
		}
	});
	max_price.change(function(){
		min = parseInt(min_price.val());
		max = parseInt(max_price.val());
		if (!max || min && min > max){
			max_price.val('');
		}
	});

	if(mode == 0 || height_times == 2){
		$("#sha_area").find("input").click(function() {
			if($(this).attr("x_index") != null) return;
			cur_scroll_top = 0;
			dragSearchResult(0,0,sort_column,sort_type);
		});
		
		$('.dragTop_2').Draggable( {
			zIndex: 	1000,
			ghosting:	false,
			opacity: 	0.7,
			axis:		'vertically',
			grid:		[CUT_DRAG_HEIGHT,CUT_DRAG_HEIGHT],
			containment : 'parent',
			onStart : function(obj, left, top) {__prevTop = top;},
			onDrag : doDragHigh,
			onStop : doDragStopHigh
		});
		$('.dragBottom_2').Draggable( {
			zIndex: 	1000,
			ghosting:	false,
			opacity: 	0.7,
			axis:		'vertically',
			grid:		[CUT_DRAG_HEIGHT,CUT_DRAG_HEIGHT],
			containment : 'parent',
			onStart : function(obj, left, top) {__prevTop = top;},
			onStop : doDragStopLow,
			onDrag : doDragLow
		});
		$('.dragTop_3').Draggable( {
			zIndex: 1000,
			ghosting: false,
			opacity: 0.7,
			axis: 'vertically',
			grid: [COLOR_DRAG_HEIGHT, COLOR_DRAG_HEIGHT],
			containment: 'parent',
			onStart: function(obj, left, top){__prevTop = top;},
			onDrag: doDragHigh,
			onStop: doDragStopHigh
		});
		$('.dragBottom_3').Draggable( {
			zIndex: 1000,
			ghosting: false,
			opacity: 0.7,
			axis: 'vertically',
			grid: [COLOR_DRAG_HEIGHT, COLOR_DRAG_HEIGHT],
			containment: 'parent',
			onStart: function(obj, left, top){__prevTop = top;},
			onStop: doDragStopLow,
			onDrag: doDragLow
		});
		$('.dragTop_4').Draggable( {
			zIndex: 1000,
			ghosting: false,
			opacity: 0.7,
			axis: 'vertically',
			grid: [CLARITY_DRAG_HEIGHT, CLARITY_DRAG_HEIGHT],
			containment: 'parent',
			onStart: function(obj, left, top){__prevTop = top;},
			onDrag: doDragHigh,
			onStop: doDragStopHigh
		});
		$('.dragBottom_4').Draggable( {
			zIndex: 	1000,
			ghosting:	false,
			opacity: 	0.7,
			axis:		'vertically',
			grid:		[CLARITY_DRAG_HEIGHT,CLARITY_DRAG_HEIGHT],
			containment : 'parent',
			onStart : function(obj, left, top) {__prevTop = top;},
			onStop : doDragStopLow,
			onDrag : doDragLow
		});
		//added by shuyuan zhou----//
		initSlotMouseDown();
		//-------------------------//
	} else {
		$("#type_area").find("input").click(function() {
			var collection_id = '#collection_' + $(this).attr('value').toLocaleLowerCase();
			$(collection_id).parent().find('dd').removeClass();
			$(collection_id).attr('class', 'active');
			if($(this).attr("x_index") != null) return;
			cur_scroll_top = 0;
			dragSearchResult(0,0,sort_column,sort_type, true);
		});
	}
}

function getDragHeight(x_index) {
	switch(x_index) {
		case '2' : return CUT_DRAG_HEIGHT;
		case '3' : return COLOR_DRAG_HEIGHT;
		case '4' : return CLARITY_DRAG_HEIGHT;
	}
	return 0;
}
function doDragStopHigh () {
	// __prevTop, __curTop is about the top of dragTop here	
	var dragTop = $(this),
			dragTop_top = parseInt($(this).css("top")),
			dragTopBG = dragTop.parent().find(".dragTopBG"),
			childElemTop = dragTop.parent(),
			childElemTop_height = parseInt(childElemTop.css("height")),
			dragBottom = dragTop.parent().parent().find(".dragBottom"),
			dragBottom_top = parseInt(dragBottom.css("top")),
	    	dragBottomBG = dragBottom.parent().find(".dragBottomBG"),
			childElemBottom = dragBottom.parent(),
			childElemBottom_height = parseInt(childElemBottom.css("height")),
			childElemBottom_top = parseInt(childElemBottom.css("top")),
			parentElem_offsetheight = parseInt(this.parentNode.parentNode.offsetHeight),//Need to change to jquery way
			x_index = dragTop.attr("x_index"),
			saveTop = saveTopValue["dragBottomBG" + x_index],
			drag_separation = childElemTop_height - dragTop_top - 11,
			drag_height = getDragHeight(x_index);			
	if (drag_separation < drag_height) {
	  __curTop = top_space = (Math.floor(__curTop / drag_height) - 1) * drag_height;
		dragTop.css("top", __curTop);
		dragDoneHigh(__prevTop, __curTop, this);
	}
	var	dragTop_top_change = __prevTop - __curTop,
			bgTop = (saveTop ? saveTop : 142) + dragTop_top_change;
	childElemBottom.css("height", (childElemBottom_height + dragTop_top_change) + "px");	
	dragBottomBG.css("top", bgTop + "px");
	saveTopValue["dragBottomBG" + x_index] = bgTop;
	childElemBottom.css("top",(childElemBottom_top - dragTop_top_change) + "px");
	dragBottom.css("top", dragBottom_top + dragTop_top_change + "px");
	dragTopBG.css("top", __curTop - parentElem_offsetheight + 22 + "px");
	saveTopValue["dragTopBG" + x_index] = __curTop - parentElem_offsetheight + 11;
	stopDone();
}
function doDragStopLow () {
	var dragBottom = $(this),
			dragBottom_top = parseInt(dragBottom.css("top")),
			childElemBottom = dragBottom.parent(),
			childElemBottom_top = parseInt(childElemBottom.css("top")),
			dragBottomBG = childElemBottom.find(".dragBottomBG"),
			dragTop = dragBottom.parent().parent().find(".dragTop"),
			dragTop_top = parseInt(dragTop.css("top")),
			childElemTop = dragTop.parent(),
			childElemTop_height = parseInt(childElemTop.css("height")),
			x_index = dragBottom.attr("x_index"),
			drag_separation = dragBottom_top,
			drag_height = getDragHeight(x_index);
	
	if (drag_separation < drag_height) {
		// Reset the dragBottom's top.
		bottom_space = DRAG_HEIGHT - dragTop_top - 22;
		shadow_space = (Math.floor(bottom_space / drag_height) - 1) * drag_height
		__curTop = bottom_space - shadow_space;
		dragBottom.css("top", __curTop);
		dragDoneLow(__prevTop, __curTop, this);
	}

	var	dragBottom_top_change = __prevTop - __curTop;
	childElemTop.css("height", (childElemTop_height - dragBottom_top_change) + "px");
	childElemBottom.css("top", (childElemBottom_top + dragBottom_top_change) + "px");
	saveTopValue["dragBottomBG" + x_index] = __curTop + 11;
	dragBottomBG.css("top", (__curTop + 11) + "px");
	stopDone();
}
function doDragHigh (left, top){
	$(this).parent().find(".dragTopBG").css("top",
		top - this.parentNode.parentNode.offsetHeight + 22 + "px");
	dragDoneHigh(__prevTop, __curTop = top, this);
}
function doDragLow (left, top) {
	$(this).parent().find(".dragBottomBG").css("top",(top + 11) + "px");
	dragDoneLow(__prevTop, __curTop = top, this);
}

function initDragTopValue(elem, curTop, rule){
	$("#dragShowTop_" + $(elem).attr("x_index")).val(rule[curTop]);
}
function initDragBottomValue(elem, curTop, rule) {
	curTop += (elem.parentNode.parentNode.offsetHeight - elem.parentNode.offsetHeight) + 11;
	$("#dragShowBot_" + $(elem).attr("x_index")).val(rule[curTop]);
}

function dragDoneHigh(startTop, curTop, elem) {
	var highValue = "Super Ideal";
	if($(elem).attr("x_index") == "2") {
		switch(curTop) {
			case CUT_DRAG_HEIGHT * 4 : highValue = "Fair"; break;
			case CUT_DRAG_HEIGHT * 3 : highValue = "Good"; break;
			case CUT_DRAG_HEIGHT * 2 : highValue = "Very Good"; break;
			case CUT_DRAG_HEIGHT : highValue = "Ideal"; break;
		}
		$("#dragShowTop_" + $(elem).attr("x_index")).val(highValue);
	}
	else if($(elem).attr("x_index") == "3") {
		highValue = "D";
		switch(curTop) {
			case COLOR_DRAG_HEIGHT * 6 : highValue = "J"; break;
			case COLOR_DRAG_HEIGHT * 5 : highValue = "I"; break;
			case COLOR_DRAG_HEIGHT * 4 : highValue = "H"; break;
			case COLOR_DRAG_HEIGHT * 3 : highValue = "G"; break;
			case COLOR_DRAG_HEIGHT * 2 : highValue = "F"; break;
			case COLOR_DRAG_HEIGHT : highValue = "E"; break;
		}
		$("#dragShowTop_" + $(elem).attr("x_index")).val(highValue);
	}
	else if($(elem).attr("x_index") == "4") {
		highValue = "FL";
		switch(curTop) {
			case CLARITY_DRAG_HEIGHT * 7 : highValue = "SI2"; break;
			case CLARITY_DRAG_HEIGHT * 6 : highValue = "SI1"; break;
			case CLARITY_DRAG_HEIGHT * 5 : highValue = "VS2"; break;
			case CLARITY_DRAG_HEIGHT * 4 : highValue = "VS1"; break;
			case CLARITY_DRAG_HEIGHT * 3 : highValue = "VVS2"; break;
			case CLARITY_DRAG_HEIGHT * 2 : highValue = "VVS1"; break;
			case CLARITY_DRAG_HEIGHT : highValue = "IF"; break;
		}
		$("#dragShowTop_" + $(elem).attr("x_index")).val(highValue);
	}
}
function dragDoneLow(startTop, curTop, elem) {
	curTop += (elem.parentNode.parentNode.offsetHeight - elem.parentNode.offsetHeight) + 11;
	var lowValue = "Super Ideal";
	if (elem.getAttribute("x_index") == "2") {
		switch (curTop) {
			case DRAG_HEIGHT : lowValue = "Fair"; break;
			case DRAG_HEIGHT - CUT_DRAG_HEIGHT : lowValue = "Good"; break;
			case DRAG_HEIGHT - CUT_DRAG_HEIGHT * 2 : lowValue = "Very Good"; break;
			case DRAG_HEIGHT - CUT_DRAG_HEIGHT * 3 : lowValue = "Ideal"; break;
		}
		$("#dragShowBot_" + $(elem).attr("x_index")).val(lowValue);
	}
	else if (elem.getAttribute("x_index") == "3") {
		lowValue = "D";
		switch (curTop) {
			case DRAG_HEIGHT : lowValue = "J"; break;
			case DRAG_HEIGHT - COLOR_DRAG_HEIGHT: lowValue = "I"; break;
			case DRAG_HEIGHT - COLOR_DRAG_HEIGHT * 2 : lowValue = "H"; break;
			case DRAG_HEIGHT - COLOR_DRAG_HEIGHT * 3 : lowValue = "G"; break;
			case DRAG_HEIGHT - COLOR_DRAG_HEIGHT * 4 : lowValue = "F"; break;
			case DRAG_HEIGHT - COLOR_DRAG_HEIGHT * 5 : lowValue = "E"; break;
		}
		$("#dragShowBot_" + $(elem).attr("x_index")).val(lowValue);
	}
	else if (elem.getAttribute("x_index") == "4") {
		lowValue = "FL";
		switch (curTop) {
			case DRAG_HEIGHT : lowValue = "SI2"; break;
			case DRAG_HEIGHT - CLARITY_DRAG_HEIGHT : lowValue = "SI1"; break;
			case DRAG_HEIGHT - CLARITY_DRAG_HEIGHT * 2 : lowValue = "VS2"; break;
			case DRAG_HEIGHT - CLARITY_DRAG_HEIGHT * 3 : lowValue = "VS1"; break;
			case DRAG_HEIGHT - CLARITY_DRAG_HEIGHT * 4 : lowValue = "VVS2"; break;
			case DRAG_HEIGHT - CLARITY_DRAG_HEIGHT * 5 : lowValue = "VVS1"; break;
			case DRAG_HEIGHT - CLARITY_DRAG_HEIGHT * 6 : lowValue = "IF"; break;
		}
		$("#dragShowBot_" + $(elem).attr("x_index")).val(lowValue);
	}
}

function stopDone() {
//	cur_scroll_top = 0;
//	dragSearchResult(0,0,sort_column,sort_type);

	var sb = document.forms.form_list.sort_by.value;
	var sm = document.forms.form_list.sort_method.value;
	if(sb==""){document.forms.form_list.sort_by.value=sb="price"}
	if(sm==""){document.forms.form_list.sort_method.value=sm="asc"}
	dragSearchResult(0, 0, sb, sm, '');

}

function changeInputMouse(elem, changeCla, v, validateCla, isMax, isInt) {
	isInt = isInt || false;
	v = parseInt(v * 100 , 10);
	var pareElem = $(elem).parent().parent();
	var change = Math.round(parseFloat(pareElem.find("." + changeCla).val()) * 100);
	var val = Math.round( parseFloat(pareElem.parent().find("." + validateCla).val()) * 100);
	change = (change + v) > 0 ? (change + v) : 0;
	change = (isMax == 1) ? (change < val ? val : change) : (change > val ? val : change);
	var showValue = (change / 100) + "";
	if(!isInt) {
		if((showValue).indexOf(".") == -1)
			showValue += ".00";
		else if((showValue).indexOf(".") == (showValue + "").length - 1)
			showValue += "00";
		else if((showValue).indexOf(".") == (showValue + "").length - 2)
			showValue += "0";
	}
	$(elem).parent().parent().find("." + changeCla).val(showValue);
	__mouseTimes && clearInputTimer();
	__mouseTimes = setTimeout( function () {
		mouseTimeout = mouseTimeout > 1000 ? 0 : mouseTimeout + 150;
		(mouseTimeout ? changeInputMouse : changeInputMouse_timeout)
			(elem, changeCla, v / 100, validateCla, isMax, isInt);
	},150);
}
function changeInputMouse_timeout(elem, changeCla, v, validateCla, isMax, isInt) {
	isInt = isInt || false;
	v = parseInt(v * 100 , 10);
	var curValue = Math.round(
		parseFloat($(elem).parent().parent().find("." + changeCla).val()) * 100);
	var validateValue = Math.round( parseFloat(
		$(elem).parent().parent().parent().find("." + validateCla).val()) * 100);
	curValue = (curValue + v) > 0 ? (curValue + v) : 0;
	curValue = (isMax == 1) ? 
		(curValue < validateValue ? validateValue : curValue) : 
		(curValue > validateValue ? validateValue : curValue);
	var showValue = (curValue / 100) + "";
	if(!isInt) {
		if((showValue + "").indexOf(".") == -1)
			showValue += ".00";
		if((showValue + "").indexOf(".") == showValue.length - 1)
			showValue += "00";
		if((showValue + "").indexOf(".") == showValue.length - 2)
			showValue += "0";
	}
	$(elem).parent().parent().find("." + changeCla).val(showValue);
	__mouseTimes && clearInputTimer();
	__mouseTimes = setTimeout(function() {
		changeInputMouse_timeout(
			elem, changeCla, v / 100, validateCla, isMax, isInt);
	},1);
}
function clearInputTimer() {
	clearTimeout(__mouseTimes);
	__mouseTimes = false;
}
function mouseUpGetData() {
	clearInputTimer();
	cur_scroll_top = 0;
	dragSearchResult(0,0,sort_column,sort_type);
}

function validateInput(elemId, even) {
	even = even || window.event;
	var keychar = document.all ? even.keyCode : even.which;
	if (keychar > 57 || keychar < 48) {
		if (keychar == 8 || keychar == 46 || curKeyCode == 37 || 
			curKeyCode == 39 || even.keyCode == 46) 
			return true;
		if (even.keyCode == 13)
			document.getElementById(elemId).blur();
		return false;
	}
}

function validateInput_price(elemId, even) {
	even = even || window.event;
	var keychar = document.all ? even.keyCode : even.which;
	if (keychar > 57 || keychar < 48) {
		if (keychar == 8 || curKeyCode == 37 || curKeyCode == 39 || 
			((navigator.userAgent.indexOf("Gecko") != -1) && even.keyCode == 46)) 
			return true;
		if (even.keyCode == 13)
			document.getElementById(elemId).blur();
		return false;
	}
}
function changeInputKey(elem, changeCla, v, validateCla, isMax, isInt, even) {
	even = even || window.event;
	if (even.keyCode == 38 || even.keyCode == 40)
		changeInputMouse(elem, changeCla, 
			even.keyCode == 38 ? v : -v, validateCla, isMax, isInt);
	curKeyCode = even.keyCode;
}
function keyUpValidate(cla, validateCla, isMax, isInt) {
	var cur = parseFloat($("#" + cla).val(), 10);
	var validate = parseFloat($("#" + validateCla).val(), 10);
	var showValue = ((isMax == 1) ? 
		(cur >= validate ? cur : curKeyValue) : 
		(cur <= validate ? cur : curKeyValue)) + "";
	showValue = (showValue == 0)? curKeyValue : showValue;
	if(!isInt) {
		if(showValue.indexOf(".") == -1)
			showValue += ".00";
		if(showValue.indexOf(".") == showValue.length - 1)
			showValue += "00";
		if(showValue.indexOf(".") == showValue.length - 2)
			showValue += "0";
		if(showValue.indexOf(".") < showValue.length - 2)
			showValue = showValue.slice(0,showValue.indexOf(".")+3);
	}
	$("#" + cla).val(showValue);
}

function getoffset(elem) {  
	var t = elem.offsetTop, l = elem.offsetLeft;
	while(elem = elem.offsetParent)
		t += elem.offsetTop,l += elem.offsetLeft;
	return [t, l];
}
function _real_diamond_id(id) { // implement has been changed, so this function isn't necessary
	return id;
}
function init_similar(scrollTop) {	
	$(".diamonds_list").each(function(index) {
		this.setAttribute("x_index",index);
	});
	$(".diamonds_list").mouseover(function(){
		var elemLoca = getoffset(this);
//		id = _real_diamond_id($(this).attr("id"));
//		var t_c = "#toolbar_container_" + id;
//		var t_c = "infopanel";
//		$(t_c).show();
		if (height_times != 2) {
			$(this).addClass("hover");
			
			var index = $(".diamonds_list").index(this)-1;
			var diamond = {};
			if(this.id.indexOf('d')!=-1){
				diamond = diamondData;	
			}else if(index!=-1){
				diamond = similarData[index];
			}
			dtl.setInfoData(this, diamond, false);

//			$(t_c).css("left", elemLoca[1] - 
//				document.getElementById("toolbar_container_" + 
//				id).offsetWidth - (document.all ? 13 : 15) + "px");
//			if (navigator.userAgent.indexOf("Gecko") == -1)
//				$(t_c).css("top", elemLoca[0] + (document.all ? 2 : 0) - 
//					(scrollTop != 0 ? scrollTop : 0) + 
//					(navigator.userAgent.indexOf("Safari") != -1 ? 1 : 0) + "px");
//			else
//				$(t_c).css("top", elemLoca[0] - (scrollTop != 0 ? scrollTop : 0) - 
//					(navigator.appVersion.indexOf("Mac") != -1 ? 2 : 0) + "px");



		}
		});
	$(".diamonds_list").mouseout(function(){
//		id = _real_diamond_id($(this).attr("id"));
//		var t_c = "#toolbar_container_" + id;
		var t_c = "#infopanel";
		if (height_times != 2) {
			$(this).removeClass("hover");
			dtl.hideToolbar();
		}
	});
	if ($('#x_sort_table')) {
		$('#x_sort_table').tablesorter({textExtraction: myTextExtraction});
		$('#x_sort_table').bind('sortEnd',function(){
			for (var i = 0; i < $('#x_sort_table tbody tr').length; i++){
				if (i % 2 == 0){
					$('#x_sort_table tbody tr')[i].className = 'line_c diamonds_list';
				} else {
					$('#x_sort_table tbody tr')[i].className = 'diamonds_list';
				}
			}
		})
	}
}

// Initial information section.
function infoInit(scrollTop) {
	init_similar(scrollTop);
	$(".diamonds_list_similar").each(function(index) {
		this.setAttribute("x_index",index);
	});
	if (height_times == 1) {
		$(".diamonds_list_similar").mouseover(function(){
			id = _real_diamond_id($(this).attr("id"));
			var elemLoca = getoffset(this), t_c = "#toolbar_container_" + 
			$(t_c).show();
			$(this).addClass("hover");
			$(t_c).css("left", elemLoca[1] - document.getElementById("toolbar_container_" +
				 id).offsetWidth - (document.all ? 13 : 15) + "px");
			if (navigator.userAgent.indexOf("Gecko") == -1)
				$(t_c).css("top", elemLoca[0] + (document.all ? 1 : 0) + "px");
			else
				$(t_c).css("top", 
					elemLoca[0] - (navigator.appVersion.indexOf("Mac") != -1 ? 2 : 0) + "px");
		})
		$(".diamonds_list_similar").mouseout(function(){
			id = _real_diamond_id($(this).attr("id"));
			var t_c = "#toolbar_container_" + id;
			$(this).removeClass("hover");
			$(t_c).hide();
		});
		var active_tab = $("#id_active_tab").val();
		if(active_tab == "result_click") result_click();
		if(active_tab == "similar_click") similar_click();
			
		//tabSimilarSort_init();
		if(!isSimilar_show || $(".diamonds_list").size() > 5)
			result_click();
		else
			$("#tabSimilar").find(".thead").find("a").each(function() {
				if($(this).html().toLocaleLowerCase() == cur_sort_column) {
					$(this).click();
					if(cur_sort_type == "now") $(this).click();
				}
			}),
			similar_click();
	}
}

function getSearchResult (
	sha, cut, col, cla, min_car, max_car, min_pri, max_pri, row, scrollTop, sort, sort_tyle, direct, size, showrow) {
	row = row || 0;
	scrollTop = scrollTop || 0;
	sort = sort || false;
	sort_tyle = sort_tyle || false;
	CACHE['request_params'] = {
		shapes: sha,
		cuts: cut,
		colors: col,
		clarities: cla,
		min_carat: min_car,
		max_carat: max_car,
		min_price: min_pri,
		max_price: max_pri,
		row: row,
		order_by: sort, 
		order_method: sort_tyle,
		scrollTop:scrollTop,
		scroll_top_right: end_scroll_top,
		view_link: view_link,
		search_path: search_path,
		sid: sid,
		first: first,
		direct:(direct?direct:'none'),
		requestedDataSize:(size?size:dtl.DRAG_DATA_LEN),
		nocache: Math.random()
	};
	//if (!CACHE['waiting_response']) {
	    var url = "/loose-diamonds/list/";
		if(direct=='none'){
			ajaxProxy(url, CACHE['request_params'], function(data){ dtl.doResponse(data, showrow?showrow:0, size?size:dtl.DRAG_DATA_LEN, url);});
		}else{
			lastAjax = $.get(url, CACHE['request_params'], function(data){ dtl.doResponse(data, showrow?showrow:0, size?size:dtl.DRAG_DATA_LEN, url);});	
		}
	    CACHE['waiting_response'] = true;
	//}
}

function initResponse(scrollTop){
	if (scrollTop != 0) {
		$("#scroll_up_div").css("height",scrollTop + "px");
		$("#scroll_up_div").parent().parent().show();
		document.getElementById("scroll_div").scrollTop = scrollTop;
		$(".myScroll").css("top", end_scroll_top + "px");
	}
	else
		$(".myScroll").css("top", "0px");
	$(".view").click( function() {
		return document.getElementById("keyword").value = $(this).val();
	});
	initScroll();
	search_sort_init();
	infoInit(scrollTop);
}

function collection_search_init(){
	if (mode == 1) {
	    var max = parseInt($("input[@name=max_price][@type=hidden]").val(), 10);
	    var min = parseInt($("input[@name=min_price][@type=hidden]").val(), 10);
	    $("#dragShowBot_5").val(min);
	    $("#dragShowTop_5").val(max);
	}
	$("tr.diamonds_list, tr.line_c diamonds_list").click(
		function(){
			var link = $(this).find("a.view").attr("href");
			location.href = link;
	});
}

//added by shuyuan zhou start---------------------------------------------------------//
function repos(timer, _shapes, _cuts, _colors, _clars, _minCarat, _maxCarat, _minPrice, _maxPrice,
	_scrollTop, _scrollTopRight, _sortBy, _sortMethod, _row){
	
	var stopRepos = false;
	for(var i=2; i<=4; i++){
		var top3 = $("#dragTop_"+i+"");
		var tv = parseInt(top3.css("top"));
		tv -= 4;
		var mTop3 = top3.parent().find(".dragTopBG");
		var mthv = parseInt(mTop3.css("height"));
		mthv -= 4;	
		if(tv<=0){
			top3.css("top", "0px");	
			mTop3.css("height", "120px");
			mTop3.css("top", 0 - document.getElementById("dragTop_"+i+"").parentNode.parentNode.offsetHeight + 22 + "px");
			stopRepos = stopRepos || true;
		}else{
			top3.css("top", tv + "px");
			mTop3.css("height", mthv + "px");		
		}
		
		var bottom3 = $("#dragBottom_"+i+"");
		var tv = parseInt(bottom3.css("top"));
		tv += 4;
		if(tv>=120){
			bottom3.css("top", "120px");	
			bottom3.parent().find(".dragBottomBG").css("top",(120 + 11) + "px");
			stopRepos = stopRepos || true;
		}else{
			bottom3.css("top", tv + "px");
			bottom3.parent().find(".dragBottomBG").css("top",(tv + 11) + "px");
		}
	}
	if(stopRepos){
		clearInterval(timer);
		
		backInitFiled(_shapes, _cuts, _colors, _clars, _minCarat, _maxCarat, _minPrice, _maxPrice,
	_scrollTop, _scrollTopRight, _sortBy, _sortMethod, _row);

	}
}

function getPosition(obj){
	var left = 0;
	var top  = 0; 
	while(obj.offsetParent){
		left += obj.offsetLeft;
		top  += obj.offsetTop;
		obj   = obj.offsetParent;
	}
	left += obj.offsetLeft;
	top  += obj.offsetTop;
	return {x:left, y:top};
}

function getVpos(clm,top){
	if(clm==3){
		if(top<11){
			return 0;
		}else if(top>=11 && top<25){ //D
			return 1;
		}else if(top>=25 && top<43.5){ //E
			return 2;
		}else if(top>=43.5 && top<62){ //F
			return 3;
		}else if(top>=62 && top<80.5){ //G
			return 4;
		}else if(top>=80.5 && top<99){ //H
			return 5;
		}else if(top>=99 && top<117.5){ //I
			return 6;
		}else if(top>=117.5 && top<131){ //J
			return 7;
		}else if(top>=131){
			return 8;	
		}
	}else if(clm==4){
		if(top<11){
			return 0;
		}else if(top>=11 && top<23.5){ //FL
			return 1;
		}else if(top>=23.5 && top<39.5){ //IF
			return 2;
		}else if(top>=39.5 && top<55.5){ //VVS1
			return 3;
		}else if(top>=55.5 && top<71.5){ //VVS2
			return 4;
		}else if(top>=71.5 && top<87.5){ //VS1
			return 5;
		}else if(top>=87.5 && top<103.5){ //VS2
			return 6;
		}else if(top>=103.5 && top<119.5){ //SI1
			return 7;
		}else if(top>=119.5 && top<131){ //SI2
			return 8;
		}else if(top>=131){
			return 9;
		}
	}else if(clm==2){
		if(top<13){
			return 0;
		}else if(top>=13 && top<38){ //Super Ideal
			return 1;
		}else if(top>=38 && top<56){ //Ideal
			return 2;
		}else if(top>=56 && top<86.5){ //Very Good
			return 3;
		}else if(top>=86.5 && top<107.5){ //Good
			return 4;
		}else if(top>=107.5 && top<124){ //Fair
			return 5;
		}else if(top>=124){
			return 6;	
		}
	}
}

function slotMouseDownHandler(pObj,e){
	var evt = window.event || e;
	if(evt.button==2){return;} //right button, do nothing
	var left = 0;
	var top = 0;
	var pos = getPosition(pObj);
	var tbar,bbar;
	if(evt.srcElement){
		if($.browser.msie){
			left = evt.clientX + document.documentElement.scrollLeft - pos.x;
			top  = evt.clientY + document.documentElement.scrollTop - pos.y;					
		}else{
			left = evt.clientX + document.body.scrollLeft - pos.x;
			top  = evt.clientY + document.body.scrollTop - pos.y;				
		}
	}else{
		left = evt.pageX + document.body.scrollLeft - pos.x;
		top  = evt.pageY + document.body.scrollTop - pos.y;
	}
	tbar = $(pObj).find(".dragTop")[0];
	bbar = $(pObj).find(".dragBottom")[0];	

	var column = 3;
	var vpos = 0;
	var tpos = 0;
	var bpos = 0;
	var tCurTop = parseInt($(tbar).css("top"));
	var bCurTop = tCurTop + parseInt($(bbar).css("top"));	
	if($(pObj).find("#dragTop_3").length>0){ //color
		column = 3;
		vpos = getVpos(3,top);
		tpos = getVpos(3,tCurTop)+1;
		bpos = getVpos(3,bCurTop);
	}else if($(pObj).find("#dragTop_4").length>0){ //clarity
		column = 4;
		vpos = getVpos(4,top);
		tpos = getVpos(4,tCurTop)+1;
		bpos = getVpos(4,bCurTop);		
	}else if($(pObj).find("#dragTop_2").length>0){ //cut
		column = 2;
		vpos = getVpos(2,top);
		tpos = getVpos(2,tCurTop)+1;
		bpos = getVpos(2,bCurTop);		
	}
	
	//decide to operate top bar or bottom bar
	var moveTop;
	if(vpos<tpos){
		moveTop = true;	
	}else if(vpos>bpos){
		moveTop = false;	
	}else{	
		moveTop = (Math.abs(vpos-tpos)-Math.abs(vpos-bpos)<0)?true:false;
		//console.log("between top and bottom");
		//console.log("tpos:"+tpos+",vpos:"+vpos+",bpos:"+bpos);
		if(Math.abs(bpos-tpos)<=2){
			//console.log("distance<2");
			moveTop = (vpos==bpos)?true:false;
		}
	}
	if(moveTop){ //operate top bar	
		__prevTop = parseInt($(tbar).css("top"));
		//correct top value
		if(3==column){ //color
			top = COLOR_DRAG_HEIGHT*(vpos<=0?0:vpos-1);
		}else if(4==column){ //clarity
			top = CLARITY_DRAG_HEIGHT*(vpos<=0?0:vpos-1);
		}else if(2==column){ //cut
			top = CUT_DRAG_HEIGHT*(vpos<=0?0:vpos-1);
		}
		$(tbar).css("top",top+"px");
		doDragHigh.call(tbar,left,top);
		doDragStopHigh.call(tbar);	
	}else{//operate bottom bar
		__prevTop = parseInt($(bbar).css("top"));
		//correct top value
		if(3==column){ //color
			top = DRAG_HEIGHT - COLOR_DRAG_HEIGHT*(vpos==8?0:7-vpos);
		}else if(4==column){ //clarity
			top = DRAG_HEIGHT - CLARITY_DRAG_HEIGHT*(vpos==9?0:8-vpos);
		}else if(2==column){ //cut
			top = DRAG_HEIGHT - CUT_DRAG_HEIGHT*(vpos==6?0:5-vpos);
		}
		top -= (bbar.parentNode.parentNode.offsetHeight - bbar.parentNode.offsetHeight) + 11;
		$(bbar).css("top",top+"px");
		doDragLow.call(bbar,left,top);
		doDragStopLow.call(bbar);			
	}
	
}
function initSlotMouseDown(){
	$('.slider_bg1').mousedown(function(e){slotMouseDownHandler($('.slider_bg1')[0],e)});
	$('.slider_bg2').mousedown(function(e){slotMouseDownHandler($('.slider_bg2')[0],e)});
	$('.slider_bg3').mousedown(function(e){slotMouseDownHandler($('.slider_bg3')[0],e)});
}

function ajaxProxy(url, params, func){
	//	alert(lastAjax);
	CACHE.ajaxParams.url = url;
	CACHE.ajaxParams.params = params;
	CACHE.ajaxParams.func = func
//	if(lastAjax){
//		lastAjax.abort();
//	}
	//alert(func);

	if(!CACHE.ajaxTimer){
		CACHE.ajaxTimer = setTimeout(function(){
			if(lastAjax){
				lastAjax.abort();
			}
			//display loading icon
//			if (document.getElementById("loading_preview") == null) return;
//			var display = $(".loading_preview");
//			var local_loading = getoffset(document.getElementById("loading_preview").parentNode);
//			display.css({
//				top : (local_loading[0] + 30) + "px",
//				left : local_loading[1] + "px"
//			})
//			display.show();
//			//////////////////////
//			
			lastAjax = $.get(CACHE.ajaxParams.url, CACHE.ajaxParams.params, CACHE.ajaxParams.func);
			
			//lastAjax = $.ajax({url:CACHE.ajaxParams.url,data:CACHE.ajaxParams.params,complete:CACHE.ajaxParams.func});

			CACHE.ajaxTimer = null;	
		},1500);
	}
	
//	lastAjax = $.get(url, params, func);
}


//added by shuyuan zhou end----------------------------------------------------------------------------//


//codes in this function are cut from function: backInit
function backInitFiled(_shapes, _cuts, _colors, _clars, _minCarat, _maxCarat, _minPrice, _maxPrice,
	_scrollTop, _scrollTopRight, _sortBy, _sortMethod, _row){
	
	var isResult = false;
	var is_init = false;
	if (_shapes) {
		isResult = true;
		var shapes = document.getElementById("sha_area").getElementsByTagName("input");
		for(var i = 0;i < shapes.length;i ++)
			if(!shapes[i].checked){
				shapes[i].checked = _shapes.indexOf(shapes[i].value) != -1;
			}
	}
	if (_cuts) {
		var curs = _cuts.split(",");
		$("#dragShowTop_2").val(curs[0]);
		$("#dragShowBot_2").val(curs[curs.length - 1]);
		var cutsHigh = 0;
		switch (curs[0]) {
			case "Fair" : 		cutsHigh += CUT_DRAG_HEIGHT * 4; break;
			case "Good" : 		cutsHigh += CUT_DRAG_HEIGHT * 3; break;
			case "Very Good" : 	cutsHigh += CUT_DRAG_HEIGHT * 2; break;
			case "Ideal" : 		cutsHigh += CUT_DRAG_HEIGHT; break;
		}
		$(".dragTop_2").css("top", cutsHigh + "px"),
		dragHightTopInit(document.getElementById("dragTop_2"), 0, cutsHigh);
		
		var lowElem = document.getElementById("dragBottom_2").parentNode,
			lowTop = DRAG_HEIGHT - lowElem.parentNode.offsetHeight + lowElem.offsetHeight - 11,
			curLowTop = Math.abs(parseInt($("#dragBottom_2").parent().css("top")));
		switch (curs[curs.length - 1]) {
			case "Good" : 			lowTop -= CUT_DRAG_HEIGHT; break;
			case "Very Good" : 		lowTop -= CUT_DRAG_HEIGHT * 2; break;
			case "Ideal" : 			lowTop -= CUT_DRAG_HEIGHT * 3; break;
			case "Super Ideal" : 	lowTop -= CUT_DRAG_HEIGHT * 4; break;
		}
		$(".dragBottom_2").css("top", lowTop + "px"),
		dragLowTopInit(document.getElementById("dragBottom_2"), curLowTop, lowTop);
		isResult = true;
	}
	if (_colors) {
		var colors = _colors.split(",");
		$("#dragShowTop_3").val(colors[0]);
		$("#dragShowBot_3").val(colors[colors.length - 1]);
		var colHigh = 0;
		switch (colors[0]) {
			case "J" : colHigh += COLOR_DRAG_HEIGHT * 6 ; break;
			case "I" : colHigh += COLOR_DRAG_HEIGHT * 5  ; break;
			case "H" : colHigh += COLOR_DRAG_HEIGHT * 4  ; break;
			case "G" : colHigh += COLOR_DRAG_HEIGHT * 3  ; break;
			case "F" : colHigh += COLOR_DRAG_HEIGHT * 2  ; break;
			case "E" : colHigh += COLOR_DRAG_HEIGHT  ; break;
		}
		$(".dragTop_3").css("top", colHigh + "px");
		dragHightTopInit(document.getElementById("dragTop_3"), 0, colHigh);
		
		var lowElem = document.getElementById("dragBottom_3").parentNode,
			lowTop = DRAG_HEIGHT - lowElem.parentNode.offsetHeight + lowElem.offsetHeight - 11,
			curLowTop = Math.abs(parseInt($("#dragBottom_3").parent().css("top")));
		switch (colors[colors.length - 1]) {
			case "I" : lowTop -= COLOR_DRAG_HEIGHT ; break;
			case "H" : lowTop -= COLOR_DRAG_HEIGHT * 2 ; break;
			case "G" : lowTop -= COLOR_DRAG_HEIGHT * 3 ; break;
			case "F" : lowTop -= COLOR_DRAG_HEIGHT * 4 ; break;
			case "E" : lowTop -= COLOR_DRAG_HEIGHT * 5 ; break;
			case "D" : lowTop -= COLOR_DRAG_HEIGHT * 6 ; break;
		}
		$(".dragBottom_3").css("top", lowTop + "px");
		dragLowTopInit(document.getElementById("dragBottom_3"), curLowTop, lowTop);
		isResult = true;
	}
	if (_clars) {
		var clar = _clars.split(",");
		$("#dragShowTop_4").val(clar[0]);
		$("#dragShowBot_4").val(clar[clar.length - 1]);
		var clarHigh = 0;
		switch (clar[0]) {
			case "SI2" : 	clarHigh += CLARITY_DRAG_HEIGHT * 7 ; break;
			case "SI1" : 	clarHigh += CLARITY_DRAG_HEIGHT * 6 ; break;
			case "VS2" : 	clarHigh += CLARITY_DRAG_HEIGHT * 5  ; break;
			case "VS1" : 	clarHigh += CLARITY_DRAG_HEIGHT * 4  ; break;
			case "VVS2" : 	clarHigh += CLARITY_DRAG_HEIGHT * 3  ; break;
			case "VVS1" : 	clarHigh += CLARITY_DRAG_HEIGHT * 2  ; break;
			case "IF" : 	clarHigh += CLARITY_DRAG_HEIGHT  ; break;
		}
		$(".dragTop_4").css("top", clarHigh + "px");
		dragHightTopInit(document.getElementById("dragTop_4"), 0, clarHigh);
		
		var lowElem = document.getElementById("dragBottom_4").parentNode,
			lowTop = DRAG_HEIGHT - lowElem.parentNode.offsetHeight + lowElem.offsetHeight - 11,
			curLowTop = Math.abs(parseInt($("#dragBottom_4").parent().css("top")));
		switch (clar[clar.length - 1]) {
			case "SI1" : 	lowTop -= CLARITY_DRAG_HEIGHT ; break;
			case "VS2" : 	lowTop -= CLARITY_DRAG_HEIGHT * 2; break;
			case "VS1" : 	lowTop -= CLARITY_DRAG_HEIGHT * 3 ; break;
			case "VVS2" : 	lowTop -= CLARITY_DRAG_HEIGHT * 4 ; break;
			case "VVS1" : 	lowTop -= CLARITY_DRAG_HEIGHT * 5 ; break;
			case "IF" : 	lowTop -= CLARITY_DRAG_HEIGHT * 6 ; break;
			case "FL" : 	lowTop -= CLARITY_DRAG_HEIGHT * 7 ; break;
		}
		$(".dragBottom_4").css("top", lowTop + "px");
		dragLowTopInit(document.getElementById("dragBottom_4"), curLowTop, lowTop);
		isResult = true;
	}
	/* Protect the browser cache the value of the hidden area.
	if (document.getElementById('dragTop_2')) {
		// Dirty way to check if this is the advance search page.
		initDragTopValue(document.getElementById("dragTop_2"), parseInt($("#dragTop_2").css("top")), CUT_TOP_HEIGHT_RULE);
		initDragBottomValue(document.getElementById("dragBottom_2"), parseInt($("#dragBottom_2").css("top")), CUT_BOTTOM_HEIGHT_RULE);
		initDragTopValue(document.getElementById("dragTop_3"), parseInt($("#dragTop_3").css("top")), COLOR_TOP_HEIGHT_RULE);
		initDragBottomValue(document.getElementById("dragBottom_3"), parseInt($("#dragBottom_3").css("top")), COLOR_BOTTOM_HEIGHT_RULE);
		initDragTopValue(document.getElementById("dragTop_4"), parseInt($("#dragTop_4").css("top")), CLARITY_TOP_HEIGHT_RULE);
		initDragBottomValue(document.getElementById("dragBottom_4"), parseInt($("#dragBottom_4").css("top")), CLARITY_BOTTOM_HEIGHT_RULE);
	}*/
	if (_minCarat)
		isResult = true, $("#dragShowBot_1").val(_minCarat);
	if(_maxCarat)
		isResult = true, $("#dragShowTop_1").val(_maxCarat);
	if(_minPrice)
		isResult = true, $("#dragShowBot_5").val(_minPrice);
	if(_maxPrice)
		isResult = true, $("#dragShowTop_5").val(_maxPrice);
	if(_scrollTopRight)
		end_scroll_top = parseInt(_scrollTopRight, 10);
	if(_sortBy)
		cur_sort_column = sort_column = _sortBy;
	if (_sortMethod)
		sort_type = _sortMethod,
		cur_sort_type = (sort_type == "asc" ? "now" : "descend");
	if (mode == 1) {
		isResult = true;
	}

	if (_row && _scrollTop && isResult && !is_init)
		dragSearchResult(parseInt(_row, 10), parseInt(_scrollTop, 10), sort_column, sort_type);
	else if (isResult && !is_init)
		dragSearchResult(0, 0, sort_column, sort_type, true);

	if (is_init) {
		if (parseInt(_scrollTop)) {
			cur_scroll_top = scrollTop = parseInt(_scrollTop);
		} else {
			cur_scroll_top = scrollTop = 0;
		}
		initResponse(scrollTop);
	}
	
	initDrag();	
}


function backInit(_shapes, _cuts, _colors, _clars, _minCarat, _maxCarat, _minPrice, _maxPrice,
	_scrollTop, _scrollTopRight, _sortBy, _sortMethod, _row) {

	//check parameters from the cache page
	var arr = [["Super Ideal", "Ideal", "Very Good", "Good", "Fair"],
		["D","E","F","G","H","I","J"], ["FL","IF","VVS1","VVS2","VS1","VS2","SI1","SI2"]];
	//for _shapes
	var sps = [];
	var sarea = document.getElementById("sha_area");
	var shapes = sarea?sarea.getElementsByTagName("input"):[];
	for(var i = 0;i < shapes.length;i ++){
		if(shapes[i].checked){sps.push(shapes[i].value);}	
	}
	if(sps.length>0){_shapes=sps.join(",")}
	//for _cuts
	var cut = findByArray(arr[0], $("#dragShowTop_2").val(),$("#dragShowBot_2").val());
	if(cut!=arr[0].join(",")){_cuts=cut}
	//for _colors
	var col = findByArray(arr[1], $("#dragShowTop_3").val(),$("#dragShowBot_3").val());
	if(col!=arr[1].join(",")){_colors=col}
	//for _clars
	var cla = findByArray(arr[2], $("#dragShowTop_4").val(),$("#dragShowBot_4").val());
	if(cla!=arr[2].join(",")){_clars=cla}
	//for _minCarat
	var minc = $("#dragShowBot_1").val();
	if(minc!=""){_minCarat=minc}
	//for _maxCarat
	var maxc = $("#dragShowTop_1").val();
	if(maxc!=""){_maxCarat=maxc}
	//for _minPrice
	var minp = $("#dragShowBot_5").val();
	if(minp!=""){_minPrice=minp}
	//for _maxPrice
	var maxp = $("#dragShowTop_5").val();
	if(maxp!=""){_maxPrice=maxp}
	//for _sortBy
	var sb = document.forms.form_list.sort_by.value;
	if(_sortBy==""){_sortBy = "price";}
	if(sb!=""){
		_sortBy = sb;
	}else{
		document.forms.form_list.sort_by.value = _sortBy;
	}
	//for _sortMethod
	var sm = document.forms.form_list.sort_method.value;
	if(_sortMethod==""){_sortMethod = "asc";}
	if(sm!=""){
		_sortMethod = sm;
	}else{
		document.forms.form_list.sort_method.value = _sortMethod;
	}
	
	//added by shuyuan zhou---------------------------------// 
	if(mode == 0 || height_times == 2){
		var timer = setInterval(function(){repos(timer, _shapes, _cuts, _colors, _clars, _minCarat, _maxCarat, _minPrice, _maxPrice,
	_scrollTop, _scrollTopRight, _sortBy, _sortMethod, _row)},$.browser.msie?1:40);
	}else{
		backInitFiled(_shapes, _cuts, _colors, _clars, _minCarat, _maxCarat, _minPrice, _maxPrice,
	_scrollTop, _scrollTopRight, _sortBy, _sortMethod, _row);
	}
	//commented by shuyuan zhou-----------------------------//
	//initDrag();
}
function dragHightTopInit(elem, prevTop, curTop) {
	var low = $(elem).parent().parent().find(".dragBottom");
	var parentHeight = parseInt(low.parent().css("height"), 10);
	low.parent().css("height",parentHeight + prevTop - curTop + "px");
	var saveValue = saveTopValue["dragBottomBG" + elem.getAttribute("x_index")];
	$(low).parent().find(".dragBottomBG").css("top",
		(saveValue == null ? 169 : saveValue) + prevTop - curTop + "px");
	saveTopValue["dragBottomBG" + elem.getAttribute("x_index")] = 
		saveValue == null ? 169 : saveValue + prevTop - curTop;
	
	var parentTop = parseInt(low.parent().css("top"), 10);
	saveValue = curTop - elem.parentNode.parentNode.offsetHeight;
	low.parent().css("top", parentTop - prevTop + curTop + "px");
	saveTopValue["dragTopBG" + elem.getAttribute("x_index")] = saveValue + 11;
	var bottomCurTop = parseInt(low.css("top"), 10);
	low.css("top", bottomCurTop + prevTop - curTop + "px");
	$(elem).parent().find(".dragTopBG").css("top", saveValue + 22 + "px");
}
function dragLowTopInit(elem, prevTop, curTop) {
	var high = $(elem).parent().parent().find(".dragTop");
	var parentHeight = parseInt(high.parent().css("height"), 10);
	high.parent().css("height",parentHeight - prevTop + curTop + "px");
	
	var low = $(elem).parent().parent().find(".dragBottom");
	var parentTop = parseInt(low.parent().css("top"), 10);
	low.parent().css("top",parentTop + prevTop - curTop + "px");
	saveTopValue["dragBottomBG" + elem.getAttribute("x_index")] = curTop + 11;
	$(elem).parent().find(".dragBottomBG").css("top",curTop + 11 + "px");
}

function dragSearchResult(row, scrollTop, sort, sort_tyle, need_price, direct, size, showrow) {
	row = row || 0;
	scrollTop = scrollTop || 0;
	sort = sort || false;
	sort_tyle = sort_tyle || false;
	need_price = need_price || ''

	var max_pri = $(".dragShowTop_5").val();
	var min_pri = $(".dragShowBot_5").val();
	
	if(direct==undefined || direct=="none" || direct=="sup" || direct=="sdown"){
		var loading = $(".loading_preview");
		var tabcont = document.getElementById("tableContainer");
		var p = dtl.getPos(tabcont);
		var table = document.getElementById("x_sort_table");
		var th = 0;
		if(table){th = table.rows[0].offsetHeight;}
		loading.css({
			top : p.y + th,
			left : p.x,
			width: tabcont.offsetWidth>150?tabcont.offsetWidth:536,
			height: tabcont.offsetHeight>150?(tabcont.offsetHeight-th):400
		})
		loading.show();
		if(direct=="sup"){direct="up"}
		if(direct=="sdown"){direct="down"}
	}

	cur_scroll_top = parseInt(row) * (RAW_HEIGHT * height_times);
	if (mode == 0){
		var sha_Arr = document.getElementById("sha_area").getElementsByTagName("input");
		var sha = "";
		for(var i = 0;i < sha_Arr.length;i ++)
			if(sha_Arr[i].checked)
				sha += sha_Arr[i].value + ",";
		if(sha.length > 0) 
			sha = sha.substring( 0, sha.length - 1);
		
		var max_car = $(".dragShowTop_1").val();
		var min_car = $(".dragShowBot_1").val();
		var arr = [["Super Ideal", "Ideal", "Very Good", "Good", "Fair"],
			["D","E","F","G","H","I","J"], ["FL","IF","VVS1","VVS2","VS1","VS2","SI1","SI2"]];
		var cut = findByArray(arr[0], $("#dragShowTop_2").val(),$("#dragShowBot_2").val());
		var col = findByArray(arr[1], $("#dragShowTop_3").val(),$("#dragShowBot_3").val());
		var cla = findByArray(arr[2], $("#dragShowTop_4").val(),$("#dragShowBot_4").val());

		if (height_times == 1){
			getSearchResult( sha, cut, col, cla, min_car, max_car, min_pri, max_pri, row, scrollTop, sort, sort_tyle, direct, size, showrow);
		} else if (height_times == 2){
		        CACHE['request_params'] = {
				shape: sha,
				cuts: cut,
				colors: col,
				clarities: cla,
				min_price: min_pri,
				max_price: max_pri,
				min_carat: min_car,
				max_carat: max_car,
				row: row,
				order_by: sort, 
				order_method: sort_tyle,
				scrollTop:scrollTop,
				scroll_top_right: end_scroll_top,
				sid: sid,
				direct:(direct?direct:'none'),
				requestedDataSize:(size?size:dtl.DRAG_DATA_LEN),
				nocache: Math.random()
			};
			//if (!CACHE['waiting_response']) {
			    var url = "/diamond-earrings/design-your-own/list/";
				if(direct=='none'){
			    	ajaxProxy(url, CACHE['request_params'], function(data){ dtl.doResponse(data, showrow?showrow:0, size?size:dtl.DRAG_DATA_LEN, url);});
				}else{
					lastAjax = $.get(url, CACHE['request_params'], function(data){ dtl.doResponse(data, showrow?showrow:0, size?size:dtl.DRAG_DATA_LEN, url);});	
				}
			    CACHE['waiting_response'] = true;
			//}
		}
	} else {
		var type = $("input[@name=collection_search]:checked").val();
		CACHE['request_params'] = {
			collection_search: type,
			type: 'list',
			min_price: min_pri,
			max_price: max_pri,
			row: row,
			order_by: sort,
			order_method: sort_tyle,
			scrollTop:scrollTop,
			scroll_top_right: end_scroll_top,
			need_price: need_price,
			view_link: view_link,
			search_path: search_path,
			sid: sid,
			first: first,
			direct:(direct?direct:'none'),
			requestedDataSize:(size?size:dtl.DRAG_DATA_LEN),
			nocache: Math.random()
		};
		//if (!CACHE['waiting_response']) {
		    var url = "/loose-diamonds/round-collection/";
			if(direct=='none'){
				ajaxProxy(url, CACHE['request_params'], function(data){ dtl.doResponse(data, showrow?showrow:0, size?size:dtl.DRAG_DATA_LEN, url);});
			}else{
				lastAjax = $.get(url, CACHE['request_params'], function(data){ dtl.doResponse(data, showrow?showrow:0, size?size:dtl.DRAG_DATA_LEN, url);});	
			}
		    CACHE['waiting_response'] = true;
		//}
	}
}

function findByArray(arr, start, end) {
	var returnArr = "";
	for (var i = arr.indexOf(start); i <= arr.indexOf(end); i++)
		returnArr += arr[i] + ",";
	if(returnArr.length > 0) returnArr = returnArr.substring(0,returnArr.length - 1);
	return returnArr;
}

// initialize variables, if last query durixng waiting exists, send the request.
function init_request_params(url) {
//    if (CACHE['request_params']) {
//	var scrolltop = CACHE['request_params']['scrollTop'];
//	$.get(url, CACHE['request_params'], function(data){doResponse(data, scrolltop, url);});
//    }
    CACHE['waiting_response'] = false;
    CACHE['request_params'] = null;
}



/*this section for dtl:start*/

var dtl = {};
dtl.SHOW_DATA_LEN = 20;
dtl.CACHE_DATA_LEN = 90;
dtl.DRAG_DATA_LEN = 200;
dtl.top10data = [];
dtl.show20data = [];
dtl.bot10data = [];
dtl.similardata = [];
dtl.row = 0;
dtl.totalcount = 0;

dtl.hasLw = false;
dtl.viewlink = "";
dtl.viewparams = "";

dtl.getPos = function(obj){
	var _Top  = obj.offsetTop;
	var _Left = obj.offsetLeft;
	while(obj = obj.offsetParent)
	{
		_Top  += obj.offsetTop;
		_Left += obj.offsetLeft;
	}
	return {'x':_Left, 'y':_Top}
}

dtl.resetScrollBar = function(){
	$("#sBar").css("top", "0px");	
}

dtl.sortBy = function(clm){
	clm = clm.parentNode;
	var table = document.getElementById("x_sort_table");
	for(var i=table.rows[0].cells.length-1; i>=0; i--){
		if(table.rows[0].cells[i].className.indexOf("Sort")!=-1 && table.rows[0].cells[i]!=clm){
			$(table.rows[0].cells[i]).removeClass("headerSortDown");
			$(table.rows[0].cells[i]).removeClass("headerSortUp");
		}
	}
	
	var sortType = "desc";
	if($(clm).hasClass("headerSortUp")){
		sortType = "asc";
		$(clm).removeClass("headerSortUp");
		$(clm).addClass("headerSortDown");
	}else{
		sortType = "desc";
		$(clm).removeClass("headerSortDown");
		$(clm).addClass("headerSortUp");
	}

	var sortBy = $(clm).find("span")[0].innerHTML.toLowerCase();
	document.forms.form_list.sort_by.value = sort_column = sortBy;
	document.forms.form_list.sort_method.value = sort_type = sortType;

	dragSearchResult(0, 0, sortBy, sortType, '');
	dtl.resetScrollBar();
}

dtl.setInfoData = function(obj, diamond, hasLw){
	
	var set = function(id,key){
		var ele = document.getElementById(id);
		if(key!=undefined && key.toString().toLowerCase()!="none"){ //add key.toString().toLowerCase()!="none" to fix bug: show "None" value of diamond information
			ele.parentNode.style.display = "block";
			ele.innerHTML = key;
		}else{
			if(hasLw){
				ele.parentNode.style.display = "block";
				ele.innerHTML = "1.00";
			}else{
				ele.parentNode.style.display = "none";
			}
		}		
	}

	set("info_stocknumber",diamond['Stock Number']);
	set("info_price",diamond.Price);
	set("info_shape",diamond.Shape);
	set("info_carat",diamond.Carat);
	set("info_cut",diamond.Cut);
	set("info_color",diamond.Color);
	set("info_clarity",diamond.Clarity);	
	set("info_report",diamond.Report);
	set("info_measurements",diamond.Measurements);
	set("info_polish",diamond.Polish);		
	set("info_symmetry",diamond.Symmetry);
	set("info_depth",diamond.Depth);	
	set("info_table",diamond.Table);	
	set("info_girdle",diamond.Girdle);	
	set("info_culet",diamond.Culet);	
	set("info_fluorescence",diamond.Fluorescence);	
	set("info_lw",diamond['Length Width ratio']);
	set("info_order",diamond.orderby);
	set("info_receive",diamond.receiveby);

	set = null;
	
	var p = getoffset(obj);
	var la = document.getElementById("lineArrow");
	la.style.display = "block";
	var latop = p[0];
	if($.browser.msie && $(".noBorTop").size()==0){latop += 1;} //fix bug: in ie, the toolbar arrow will be up 1px
	la.style.top = latop +"px";
	var	laleft = p[1]-la.offsetWidth;
	if($.browser.msie){laleft += 1;}
	la.style.left = laleft +"px";

	var table = obj.parentNode.parentNode;
	var p = getoffset(table);
	var panel = document.getElementById("infopanel");
	panel.style.display = "block";
	panel.style.top = (obj.id.indexOf('d')!=-1?p[0]:(p[0]+table.offsetHeight-panel.offsetHeight))+"px";
	var paleft = p[1]-panel.offsetWidth-15;

	if($.browser.msie){paleft += 3;}
	panel.style.left = paleft + "px";
	
}

dtl.gotoPage = function(obj){
	var link = $(obj).find("a.view").attr("href");
	location.href = link;
}

dtl.showLineData = function(obj){
	
	$(obj).addClass("hover");

	var row = parseInt(obj.id);
	var hasLw = document.getElementById("x_sort_table").rows[0].innerHTML.indexOf("L:W")!=-1?true:false;
	var diamond = {};
	var resultType = $("#id_active_tab").val();
	if(resultType=="similar_click" && dtl.similardata.length>row){
		dtl.setInfoData(obj, dtl.similardata[row], hasLw);
	}else{
		for(var i = dtl.show20data.length-1; i>=0; i--){
			if(dtl.show20data[i].row==row){
				diamond = dtl.show20data[i];
				dtl.setInfoData(obj, diamond, hasLw);
			}
		}
	}

}
dtl.hideToolbar = function(){
	document.getElementById("infopanel").style.display = "none";
	document.getElementById("lineArrow").style.display = "none";
}
dtl.cleanLineData = function(obj){
	$(obj).removeClass("hover");
	dtl.hideToolbar();
}

dtl.objectToparams = function(obj){
	var arr = [];
	for(key in obj){
		arr.push(key);arr.push("=");arr.push(obj[key]);arr.push("&");
	}
	arr.pop();
	return arr.join("");
}

dtl.initTable = function(data, isSimi){

	var strArr = [];
	
	var sb = document.forms.form_list.sort_by.value;
	var cls = (document.forms.form_list.sort_method.value=="asc")?"headerSortDown":"headerSortUp";

	strArr.push('<table id="x_sort_table" width="536" border="0" align="center" cellpadding="0" cellspacing="0">');
		strArr.push('<thead class="thead">');
			strArr.push('<tr>');
				strArr.push('<th class="header ');strArr.push(sb=="shape"?cls:'');strArr.push('" width="55"><span class="mLIe mRIe mlno" onclick="javascript:popup(\'/popup-shape/\', \'shape\', \'height=550,width=850,scrollbars=yes,resizable=yes,left=100,top=0\');">Shape</span><a href="javascript:void(0);" name="Shape"');if(!isSimi){strArr.push(' onclick="dtl.sortBy(this)"');}strArr.push('></a></th>');
				strArr.push('<th class="header ');strArr.push(sb=="carat"?cls:'');strArr.push('" width="45"><span class="mRIe" onclick="javascript:popup(\'/popup-carat/\', \'carat\', \'height=550,width=850,scrollbars=yes,resizable=yes,left=100,top=0\');">Carat</span><a href="javascript:void(0);" name="Carat"');if(!isSimi){strArr.push(' onclick="dtl.sortBy(this)"');}strArr.push('></a></th>');
				strArr.push('<th class="header ');strArr.push(sb=="color"?cls:'');strArr.push('" width="45"><span onclick="javascript:popup(\'/popup-color/\', \'color\', \'height=550,width=850,scrollbars=yes,resizable=yes,left=100,top=0\');">Color</span><a href="javascript:void(0);" name="Color"');if(!isSimi){strArr.push(' onclick="dtl.sortBy(this)"');}strArr.push('></a></th>');
				strArr.push('<th class="header ');strArr.push(sb=="clarity"?cls:'');strArr.push('" width="50"><span onclick="javascript:popup(\'/popup-clarity/\', \'clarity\', \'height=550,width=850,scrollbars=yes,resizable=yes,left=100,top=0\');">Clarity</span><a href="javascript:void(0);" name="Clarity"');if(!isSimi){strArr.push(' onclick="dtl.sortBy(this)"');}strArr.push('></a></th>');
				strArr.push('<th class="header ');strArr.push(sb=="cut"?cls:'');strArr.push('" width="65"><span onclick="javascript:popup(\'/popup-cut/\', \'cut\', \'height=550,width=850,scrollbars=yes,resizable=yes,left=100,top=0\');">Cut</span><a href="javascript:void(0);" name="Cut"');if(!isSimi){strArr.push(' onclick="dtl.sortBy(this)"');}strArr.push('></a></th>');
				if(dtl.hasLw){
					strArr.push('<th class="header ');strArr.push(sb=="l:w"?cls:'');strArr.push('" width="36"><span onclick="javascript:popup(\'/popup-l-w-ratio/\', \'l_w_ratio\', \'height=550,width=850,scrollbars=yes,resizable=yes,left=100,top=0\');">L:W</span><a href="javascript:void(0);" name="L:W"');if(!isSimi){strArr.push(' onclick="dtl.sortBy(this)"');}strArr.push('></a></th>');
				}
				strArr.push('<th class="header ');strArr.push(sb=="report"?cls:'');strArr.push('" width="51"><span onclick="javascript:popup(\'/popup-report/\', \'report\', \'height=550,width=850,scrollbars=yes,resizable=yes,left=100,top=0\');">Report</span><a href="javascript:void(0);" name="Report"');if(!isSimi){strArr.push(' onclick="dtl.sortBy(this)"');}strArr.push('></a></th>');
				strArr.push('<th class="header ');strArr.push(sb=="origin"?cls:'');strArr.push('" width="64"><span onclick="javascript:popup(\'/popup-origin-certification/\', \'certification', 'height=550,width=850,scrollbars=yes,resizable=yes,left=100,top=0\');">Origin</span><a href="javascript:void(0);" name="Origin"');if(!isSimi){strArr.push(' onclick="dtl.sortBy(this)"');}strArr.push('></a></th>');
				strArr.push('<th class="header ');strArr.push(sb=="price"?cls:'');strArr.push('" width="55"><span onclick="javascript:popup(\'/popup-price/\', \'price\', \'scrollbars=yes,resizable=yes,left=100,top=0\');">Price</span><a href="javascript:void(0);" name="Price"');if(!isSimi){strArr.push(' onclick="dtl.sortBy(this)"');}strArr.push('></a></th>');
				strArr.push('<th width="45" class="view header" style="border-right-width:0px;">View</th>');
			strArr.push('</tr>');
		strArr.push('</thead>');
		var len = data.length;
		var lineNum = len>0?data[0].row:0;
		var isPair = (len>0 && data[0].first!=undefined)?true:false;
		strArr.push('<tbody>');
		for(var i=0; i<len; i++){
			strArr.push('<tr id="');strArr.push(data[i].row);strArr.push('" class="');strArr.push(lineNum++%2==0?'line_c diamonds_list':'diamonds_list');strArr.push('" onclick="dtl.gotoPage(this)" ');
			if(!isPair){strArr.push('onmouseover="dtl.showLineData(this)" onmouseout="dtl.cleanLineData(this)"');}
			strArr.push('>');
				strArr.push('<td width="55" class="line_l">');strArr.push(isPair?data[i].first.Shape+'<br/>'+data[i].second.Shape:data[i].Shape);strArr.push('</td>');
				strArr.push('<td width="45">');strArr.push(isPair?dtl.forDight(data[i].first.Carat,2)+'<br/>'+dtl.forDight(data[i].second.Carat,2):dtl.forDight(data[i].Carat,2));strArr.push('</td>');
				strArr.push('<td width="45">');strArr.push(isPair?data[i].first.Color+'<br/>'+data[i].second.Color:data[i].Color);strArr.push('</td>');
				strArr.push('<td width="50">');strArr.push(isPair?data[i].first.Clarity+'<br/>'+data[i].second.Clarity:data[i].Clarity);strArr.push('</td>');
				strArr.push('<td width="65">');strArr.push(isPair?data[i].first.Cut+'<br/>'+data[i].second.Cut:data[i].Cut);strArr.push('</td>');
				if(dtl.hasLw){
					strArr.push('<td width="36">');strArr.push(data[i]['Length Width ratio']==undefined?"1.00":dtl.forDight(data[i]['Length Width ratio'],2));strArr.push('</td>');
				}
				strArr.push('<td width="51">');strArr.push(isPair?data[i].first.Report+'<br/>'+data[i].second.Report:data[i].Report);strArr.push('</td>');
				strArr.push('<td width="64">');strArr.push(isPair?data[i].first.Origin+'<br/>'+data[i].second.Origin:data[i].Origin);strArr.push('</td>');
				strArr.push('<td width="55">');strArr.push('$');strArr.push(isPair?dtl.usd(data[i].pair_price):dtl.usd(data[i].Price));strArr.push('</td>');
				strArr.push('<td width="45" class="line_r">');
					strArr.push('<a class="view" href="');
					strArr.push(dtl.viewlink==""?"/loose-diamonds/view_detail/":dtl.viewlink);strArr.push(isPair?data[i].first.id+"/"+data[i].second.id:data[i].id);strArr.push(dtl.viewparams);
					strArr.push('"><img width="40" height="17" alt="view" src="/media/images/btn/view.gif"/></a>');
				strArr.push('</td>');
			strArr.push('</tr>');
		}
		strArr.push('</tbody>');
	strArr.push('</table>');
	
	document.getElementById("tableContainer").innerHTML = strArr.join("");
	
	if (isSimi && $('#x_sort_table')) {
		$('#x_sort_table').tablesorter({textExtraction: myTextExtraction});
		$('#x_sort_table').bind('sortEnd',function(){
			for (var i = 0; i < $('#x_sort_table tbody tr').length; i++){
				if (i % 2 == 0){
					$('#x_sort_table tbody tr')[i].className = 'line_c diamonds_list';
				} else {
					$('#x_sort_table tbody tr')[i].className = 'diamonds_list';
				}
			}
		})
	}
	
}

dtl.scrollBtnMouseUpHandler = function(){
	dtl.btnmd = false;
	$(document).unbind('mouseup', dtl.scrollBtnMouseUpHandler);
}

dtl.scrollBtnClickHandler = function(){
	dtl.btnmd = true;
	$(document).mouseup(dtl.scrollBtnMouseUpHandler);	
	if(this.id=="sTopBtn"){
		setTimeout(function(){dtl.stepScroll('up')}, 200);
	}else if(this.id=="sBotBtn"){
		setTimeout(function(){dtl.stepScroll('down')}, 200);
	}
}

dtl.btnmd = false;

dtl.stepScroll = function(direct){
	if(direct=="up"){
		if(dtl.show20data[0].row==0){

		}else{
			var td = dtl.top10data.pop();
			if(dtl.totalcount>dtl.DRAG_DATA_LEN &&
			   (td==undefined || dtl.top10data.length==parseInt(dtl.CACHE_DATA_LEN/2))
			){
				var size = td?parseInt(dtl.CACHE_DATA_LEN/2):dtl.CACHE_DATA_LEN;
				var row = dtl.top10data.length>0?dtl.top10data[0].row:dtl.show20data[0].row;
				if(row>size){
					row -= size;	
				}else{
					size = row;
					row = 0;
				}
				setTimeout(function(){
					var sb = document.forms.form_list.sort_by.value;
					var sm = document.forms.form_list.sort_method.value;
					dragSearchResult(row, 0, sb, sm, '', td==undefined?'sup':'up', size);
				},0);
			}
			if(td!=undefined){
				dtl.show20data = [td].concat(dtl.show20data);
				var len = dtl.show20data.length;
				if(len>dtl.SHOW_DATA_LEN){
					var md = dtl.show20data.pop();
					dtl.bot10data = [md].concat(dtl.bot10data);
					var blen = dtl.bot10data.length;
					if(blen>dtl.CACHE_DATA_LEN && dtl.totalcount>dtl.DRAG_DATA_LEN){
						dtl.bot10data.pop();
					}
				}
				dtl.initTable(dtl.show20data);

				var slotHeight = $("#sBar").parent().get(0).offsetHeight;
				var barHeight = $("#sBar").get(0).offsetHeight;
				
				var scrollTop = parseInt(dtl.show20data[0].row*(/*slotHeight-barHeight*/346)/dtl.totalcount);
				$("#sBar").css({"position":"relative","top":scrollTop+"px"});
				
				if(dtl.btnmd){
					setTimeout(function(){dtl.stepScroll(direct);}, 100);
				}
			}
		}
	}else if(direct=="down"){
		if(dtl.show20data[dtl.show20data.length-1].row==dtl.totalcount-1){
			//alert("the end of the data");
		}else{
			var bd = dtl.bot10data.shift();
			if(dtl.totalcount>dtl.DRAG_DATA_LEN &&
			   (bd==undefined || dtl.bot10data.length==parseInt(dtl.CACHE_DATA_LEN/2))
			){
				var size = bd?parseInt(dtl.CACHE_DATA_LEN/2):dtl.CACHE_DATA_LEN;
				var row = dtl.bot10data.length>0?dtl.bot10data[dtl.bot10data.length-1].row:dtl.show20data[dtl.show20data.length-1].row;
				if(row+size>dtl.totalcount){
					size = dtl.totalcount - row;
				}
				setTimeout(function(){
					var sb = document.forms.form_list.sort_by.value;
					var sm = document.forms.form_list.sort_method.value;
					dragSearchResult(row, 0, sb, sm, '', bd==undefined?'sdown':'down', size);
				},0);
			}
			if(bd!=undefined){ 	
				dtl.show20data = dtl.show20data.concat([bd]);
				var len = dtl.show20data.length;
				var showlen = dtl.SHOW_DATA_LEN;
				if(len>0 && bd.first!=undefined){ //pairs
					showlen /= 2;
				}
				if(len>showlen){
					var md = dtl.show20data.shift();
					dtl.top10data = dtl.top10data.concat([md]);
					var blen = dtl.top10data.length;
					if(blen>dtl.CACHE_DATA_LEN && dtl.totalcount>dtl.DRAG_DATA_LEN){
						dtl.top10data.shift();
					}
				}
				dtl.initTable(dtl.show20data);
				
				var slotHeight = $("#sBar").parent().get(0).offsetHeight;
				var barHeight = $("#sBar").get(0).offsetHeight;
				
				var scrollTop = parseInt(dtl.show20data[0].row*(/*slotHeight-barHeight*/346)/(dtl.totalcount-dtl.SHOW_DATA_LEN));
//				if(dtl.show20data[0].row>=dtl.totalcount-dtl.SHOW_DATA_LEN){
//					scrollTop += 2;
//				}
				$("#sBar").css({"position":"relative","top":scrollTop+"px"});

				if(dtl.btnmd){
					setTimeout(function(){dtl.stepScroll(direct)}, 100);
				}
				
			}
		}
	}	
}

dtl.scrollbarOnstopHandler = function(){

	//dragSearchResult(row, scrollTop, sort, sort_tyle, need_price)
	var slotHeight = $("#sBar").parent().get(0).offsetHeight;
	var barHeight = $("#sBar").get(0).offsetHeight;
	var scrollTop = parseInt($("#sBar").css("top").toLowerCase().replace("px",""));
	
//	var row = parseInt(dtl.totalcount/(slotHeight-barHeight)*scrollTop);	
//	if(row>dtl.DRAG_DATA_LEN){row -= dtl.DRAG_DATA_LEN;}
	
	if(dtl.totalcount<=dtl.DRAG_DATA_LEN){
		var row = parseInt((dtl.totalcount-dtl.SHOW_DATA_LEN)/(slotHeight-barHeight)*scrollTop);	
		if(row<0){row = 0;}	
		var arr = dtl.top10data.concat(dtl.show20data).concat(dtl.bot10data);
		var len = arr.length;
		dtl.top10data = [];
		dtl.show20data = [];
		dtl.bot10data = [];		
		for(var i=0; i<len; i++){
			if(arr[i].row<row){dtl.top10data.push(arr[i]);}
			if(arr[i].row>=row && arr[i].row<row+dtl.SHOW_DATA_LEN){dtl.show20data.push(arr[i]);}
			if(arr[i].row>=row+dtl.SHOW_DATA_LEN){dtl.bot10data.push(arr[i]);}
		}
		dtl.initTable(dtl.show20data);
	}else{
		var showrow = parseInt(dtl.totalcount/(slotHeight-barHeight)*scrollTop);
		if(showrow>dtl.totalcount-dtl.SHOW_DATA_LEN){
			showrow = dtl.totalcount-dtl.SHOW_DATA_LEN;
		}
		row = showrow - dtl.CACHE_DATA_LEN;
		if(row<0){row=0}
		var sb = document.forms.form_list.sort_by.value;
		var sm = document.forms.form_list.sort_method.value;		
		dragSearchResult(row, 0, sb, sm, '', 'none', dtl.DRAG_DATA_LEN, showrow);
	}
	
}

dtl.forDight = function(d,h){    
    d  =  Math.round(d*Math.pow(10,h))/Math.pow(10,h);
    return  d.toFixed(2);
}

dtl.doResponse = function(data, showrow, size, url) {
	data = eval("("+data+")");
	//check if it is pair data
	var isPair = (data.view_link && data.view_link.indexOf("/diamond-earrings/")==0)?true:false;
	//check if it should hide the similar search button
	var noSimi = (data.path && 
				  (data.path.indexOf("/diamond-earrings/")==0 || 
				   data.path.indexOf("/loose-diamonds/round-collection/")==0)
				  )?true:false;
	//keep total data count
	dtl.totalcount = parseInt(data.line_count);
	//keep hasLw
	dtl.hasLw = (data.shapes=="Round" || data.shapes==undefined)?false:true;
	//keep viewlink
	dtl.viewlink = (data.view_link==undefined)?"":data.view_link;
	//keep viewparams
	var paArr = [];
	paArr.push("?sid=");paArr.push(data.sid==undefined?'':data.sid);
	paArr.push("&first=");paArr.push(data.first==undefined?'':data.first);
	paArr.push("&show_diamond_tab=true");
	paArr.push("&path=");paArr.push(data.path==undefined?'':encodeURIComponent(data.path));
	dtl.viewparams = paArr.join("");
	//setdata
	var rowStartIndex = parseInt(data.row);
	if(dtl.totalcount-rowStartIndex<size){
		rowStartIndex = dtl.totalcount-data.diamonds.length;
	}
	if(data.direct=="none"){
		dtl.top10data = [];
		dtl.show20data = [];
		dtl.bot10data = [];
	}

	var len = data.diamonds.length;
	var ridx = 0;
	
	var showlen = dtl.SHOW_DATA_LEN;
	if(len>0 && isPair){showlen /= 2;}//pairs
	
	for(var i=0; i<len; i++){
		ridx = rowStartIndex+i;
		data.diamonds[i].row = ridx;
		if(data.direct=="none"){
			if(ridx<showrow){
				dtl.top10data.push(data.diamonds[i]);
			}else if(ridx>=showrow && ridx<showrow+showlen){
				dtl.show20data.push(data.diamonds[i]);	
			}else{
				dtl.bot10data.push(data.diamonds[i]);	
			}
		}
	}
	if(data.direct=="up"){
		dtl.top10data = data.diamonds.concat(dtl.top10data);
	}else if(data.direct=="down"){
		dtl.bot10data = dtl.bot10data.concat(data.diamonds);
	}

	//update scrollbar
	if(dtl.totalcount<showlen){
		dtl.hideScroll();
	}else{
		dtl.showScroll();
	}

	//init similar data
	dtl.similardata = [];
	if(data.similar!=undefined){
		dtl.similardata = data.similar;	
		var len = dtl.similardata.length;
		for(var i=0; i<len; i++){
			dtl.similardata[i].row = i;	
		}
	}
	
	if(dtl.totalcount<5 && !noSimi){ //show similar expect pairs
		$("#resultChangeButton").show();
		$("#id_active_tab").val("result_click");
		dtl.updateResultInfo();	
	}else if(dtl.totalcount==0 && noSimi){ //show pair no result error
		$("#listContainer").hide();
		$("#errmsg").show();
		document.getElementById("totalResult").innerHTML = "Your Search Results: 0 Conflict Free Diamonds";
	}else{ //show normal result
		if(noSimi){
			$("#errmsg").hide();$("#listContainer").show();
		}else{
			$("#resultChangeButton").hide();
		}
		document.getElementById("totalResult").innerHTML = "Your Search Results: "+dtl.totalcount+" Conflict Free Diamonds";
		dtl.initTable(dtl.show20data);
	}
	
	$(".loading_preview").hide();

}

dtl.hideScroll = function(){
	var ls = document.getElementById("listscrollbar");
	if(ls){ls.style.display = "none";}
}

dtl.showScroll = function(){
	var ls = document.getElementById("listscrollbar");
	if(ls){ls.style.display = "block";}
}

dtl.updateResultInfo = function(){
	var tre = document.getElementById("totalResult");
	if($("#id_active_tab").val()=="result_click"){
		$("#resultChangeButton").removeClass("resultButton");
		$("#resultChangeButton").addClass("similarButton");
		tre.innerHTML = "Your Search Results: "+dtl.totalcount+" Conflict Free Diamonds";
		tre.title = "Click here for diamonds similar to your preferences";
		dtl.initTable(dtl.show20data);
	}else{
		$("#resultChangeButton").removeClass("similarButton");
		$("#resultChangeButton").addClass("resultButton");
		tre.innerHTML = "Similar Diamonds";
		tre.title = "Return to original search results";
		dtl.initTable(dtl.similardata, true);
	}
}

dtl.viewChange = function(){
	if($("#id_active_tab").val()=="similar_click"){
		$("#id_active_tab").val("result_click");
	}else{
		$("#id_active_tab").val("similar_click");
	}
	dtl.updateResultInfo();
}

dtl.usd = function(m){
	var mstr = m.toString().split("");
	var marr = [];
	var count = 1;
	for(var i=mstr.length-1; i>=0; i--){
		marr.push(mstr[i]);
		if(count++%3==0 && i!=0){marr.push(",")}
	}
	marr.reverse();
	return marr.join("");
}

$(function(){
	if($("#sBar").length==0){return;}
	
	var Sys = {};
	var ua = navigator.userAgent.toLowerCase();
	var s;
	(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
	(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
	(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
	(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
	(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
	dtl.nav = Sys;

	var p = dtl.getPos($('#sBar').parent().get(0));
	$("#sBar").draggable(
		{
			axis: 'y', 
			containment:[0,0,0,346-$("#sBar").height()],
			stop: dtl.scrollbarOnstopHandler
		}
	);
	$('#sTopBtn').mousedown(dtl.scrollBtnClickHandler);
	$('#sBotBtn').mousedown(dtl.scrollBtnClickHandler);
	$('#sTopBtn').mouseup(dtl.scrollBtnMouseUpHandler);
	$('#sBotBtn').mouseup(dtl.scrollBtnMouseUpHandler);
	$('#sTopBtn').mouseout(dtl.scrollBtnMouseUpHandler);
	$('#sBotBtn').mouseout(dtl.scrollBtnMouseUpHandler);

});
/*this section for dtl:end*/