var rheight=20;
var newGrid=true;
var tdwidth="60px";
var $tip;
var pageSize;
var caratslider;


//this sets the current page/group throught javascript variables
function setpage(pg){
	document.search.page.value = pg;
//	document.search.group.value = gr;
	}

	
function display_php(sql,total){	
	//on page load insert php table with the sql sentence
//	alert(sql);
	
//	$from1=$('#rowfrom');
	var tabl = '/dlpro/table.php?sql='+sql;
	var $dia1 = $("#phptable");

	if ( total != 0 ) {

//loads phptable div		
	$dia1.load(tabl);
					

//fill up the #counttotal div
	var $pagination='<table><tr><td>';
	$pagination+='<b>Found: </b>'+total+' diamonds.</td><td></td>';
	$pagination+='<td align=\"right\"><b>Page: </b>';
	nrdispl=total;
	
	pagcur=document.search.page.value;
	//page list
	pagelist=10;
	
	//total no of pages
	nrpag=Math.ceil(nrdispl/100);
//	alert (nrpag);
	//groups of `pagelist` pages
	nrgrpag=Math.ceil(nrpag/pagelist);
	grpagcur=Math.ceil(pagcur/pagelist);
//	alert('pagelist '+pagelist);
//	alert('grpagcur'+grpagcur);
//	

// on a different search than actual one reset page and gr page to 1
//alert (pagcur+":"+nrpag);
if (pagcur>nrpag) 
					{grpagcur=1;
					 pagcur=1;
					 setpage(1);
					 RefreshGrid();
					};

//if page current`s group is not 1 , print << < 
if ((grpagcur!=1))
			{
			 k=pagelist*(grpagcur-1);
			 $pagination+='<a title=\"First page\" href=\'#\' onclick=\"setpage('+1+');RefreshGrid();\" class=\"pagelist\" >'+'&laquo;'+'</a>'+' ';
 			 $pagination+='<a title=\"Previous page\" href=\'#\' onclick=\"setpage('+k+');RefreshGrid();\" class=\"pagelist\">'+'&lsaquo;'+'</a>'+' ';				
			}

	
	for (var k=pagelist*(grpagcur-1)+1;k<=grpagcur*pagelist;k++)
  if (k<=nrpag)
	{ 
	 if (k==pagcur)
	    { 
		$pagination+= "<span class=\"pageselected\">"+k+"&nbsp;</span>";
		}
	 else 
			{
			$pagination+='<a href=\'#\' onclick=\"setpage('+k+');RefreshGrid();\" class=\"pagelist\">'+k+'</a>'+'&nbsp;';
			}
	
	}

//if page current`s group is not final one , print > >>
  if (k<=nrpag) 
  {
  k=pagelist*grpagcur+1;  
  $pagination+='<a title=\"Next page\" href=\'#\' onclick=\"setpage('+k+');RefreshGrid();\" class=\"pagelist\">'+'&rsaquo;'+'</a>'+' ';
  $pagination+='<a title=\"Last page\" href=\'#\' onclick=\"setpage('+nrpag+');RefreshGrid();\" class=\"pagelist\">'+'&raquo;'+'</a>';
  }
  
  
 $pagination+='</td></tr></table>';
	
	
		
	$('p').click(function(){
	var certid = $(this).attr('rel');
//	alert (certid);
//	var certurl = 'cert.php?id='+certid;
	var certurl = 'http://172.17.4.46/dia-admin/dbcheck.php?id='+certid;
	var $dia = $("#gridwrap1"); 
	//	$dia.load(certurl , function(){$dia.dialog({
//	modal: true,
//    resizable: false,
//    draggable: false,
//    width:840,
//    height:600, 
//    overlay: { 
//        opacity: 0.8, 
//        background: "black" 
	
//	} })})
	
		$dia.load(certurl)
	
});
	
//populate div counttotal	
	$('#counttotal').html($pagination);

}
}

		function adjustcarat(id){
		
		if (id==='mincw'){
		var minval = $('#mincarat').val()*1;
		$('#mincw').val(minval.toFixed(2))
		}

		if (id==='maxcw'){
				var maxval = $('#maxcarat').val()*1;
		$('#maxcw').val(maxval.toFixed(2))
		}
		
		}

function RefreshGrid(){

    $('#gridwrap').unbind('scroll');
    $('.loading').css("display", "block");

    $.post("post.php", getFormData() , function(json){   

        $('#rowcounts').val(json.total);
//      alert(json.total);
	
// trigger displaying thtml table  
		display_php(json.sql_back,json.total);
					
        if (json.total == 0){
       $('.loading').fadeOut('fast');
        $('#counttotal').html('<p><b>Found: </b>'+json.total+' diamonds.</p>');
        $('#phptable').html('<p><center><b>Diamond search engine returned no result. Please try to refine your search.</b></center>');

        }
        else if (json.rows.length>0){
        var newMax = json.caratmax;
        var newMin = json.caratmin;
        hilo(newMin,newMax);
		

       if($("input[@name='fancy']").val() == "F"){ var fancy = '<b> FANCY</b>';}else{var fancy = ""}
                $('#counttotal').html('<p><b>Found: </b>'+json.total+fancy+' diamonds.</p>')
            RenderGrid(json); 
			
            if ( needsData(json.total) == false  ){
                $('.loading').fadeOut('fast');
                $('#gridwrap').bind('scroll', gridScroll);
	        setGridHeight(json.total);  
            } else { 
             RefreshGrid();
            }
        } else {
           $('.loading').fadeOut('fast');
           $('#gridwrap').bind('scroll', gridScroll);
        }
    }, "json");
}

function RenderGrid(json){
    var $grid, $tbl;
    if (newGrid){
        $tbl = $('<table id="newgrid" cellspacing="0" cellpadding="0"><tbody/></table>');
        $grid = $tbl.children('tbody');
    }
    else{
        $grid = $('#grid tbody');
    }
    var trhtml="";
//    for(var i=0; i < json.rows.length; i++){
		for(var i=0; i < 1; i++){
        trhtml += RenderTableRow(json.rows[i]);
    }
    $(trhtml).appendTo($grid)
    if (newGrid){
        $('#gridwrap table').remove();
        $tbl.appendTo($('#gridwrap')).attr('id','grid');
        $('#gridwrap').scrollTop(0);
    }
    $('#grid tr:even').addClass('alt');
	//$('#grid tr td:nth-child(5)').hide()
    newGrid=false;
    
    //setTimeout( addTips, 100 );
       //the cert popups
    $('.cert').click(function(){
	var certid = $(this).attr('rel');
//	var certurl = 'cert.php?id='+certid;
	var certurl = 'http://172.17.4.46/dia-admin/dbcheck.php?id='+certid;
	var $dia = $("#gridwrap1"); 
	//	$dia.load(certurl , function(){$dia.dialog({
//	modal: true,
//    resizable: false,
//    draggable: false,
//    width:840,
//    height:600, 
//    overlay: { 
//        opacity: 0.8, 
//        background: "black" 
	
//	} })})
	
		$dia.load(certurl)
	
});
	

}

/*
//obsolete
function RenderTableRow(row){
    var s="<tr>";
    for(var i=0; i < row.cell.length; i++){
    	if (i==13){
    	tdwidth = "65px";
    	s += "<td width='"+tdwidth+"'><a class='cert' rel='"+row.id+"' href='#'>";
        s += row.cell[i];
        s += "</a></td>";
    	}
    	else{
    	if (i==0){tdwidth = "58";}
    	else if(i==1){tdwidth = "60px";}
    	else if(i==2){tdwidth = "57px";}
    	else if(i==3){tdwidth = "61px";}
    	else if(i==4){tdwidth = "60px";}
    	else if(i==5){tdwidth = "60px";}
    	else if(i==6){tdwidth = "57px";}
    	else if(i==7){tdwidth = "59px";}
    	else if(i==8){tdwidth = "59px";}
    	else if(i==9){tdwidth = "58px";}
    	else if(i==10){tdwidth = "75px";}
    	else if(i==11){tdwidth = "100px";}
    	else if(i==12){tdwidth = "97px";}
    	else if(i==13){tdwidth = "20px";}
    	//else{tdwidth = "10px";}
    	
        s += "<td width='"+tdwidth+"'>";
        s += row.cell[i];
        s += "</td>";
        }
    }
    s+="</tr>";
    return s;
}

*/

//updated on 27.03.2009/marius. inserted div to as workaround for table widths ...	
function RenderTableRow(row){
    var s="<tr>";
    for(var i=0; i < row.cell.length; i++){
    	if (i==14){
    	tdwidth = "55px";
    	s += "<td><div style=\'width: "+tdwidth+"; overflow: hidden\'><a class='cert' rel='"+row.id+"' href='#'>";
        s += row.cell[i];
        s += "</a></div></td>";
    	}
    	else{
		
    	if (i==0){tdwidth = "51px"; }
    	else if(i==1){tdwidth = "41px";}
    	else if(i==2){tdwidth = "19px";}
    	else if(i==3){tdwidth = "24px";}
    	else if(i==4){tdwidth = "26px";}
    	else if(i==5){tdwidth = "19px";}
    	else if(i==6){tdwidth = "25px";}
    	else if(i==7){tdwidth = "26px";}
    	else if(i==8){tdwidth = "29px";}
    	else if(i==9){tdwidth = "30px";}
    	else if(i==10){tdwidth = "28px";}
    	else if(i==11){tdwidth = "25px";}
    	else if(i==12){tdwidth = "96px";}
    	else if(i==13){tdwidth = "55px";}
		//else if(i==14){tdwidth = "35px";}
    	//else{tdwidth = "10px";}
//    	if (isie==0) {tdwidth = "";}
        s += "<td align=\'left\'><div style=\'width: "+tdwidth+"; overflow: hidden\'>";
        s += row.cell[i];
        s += "</div></td>";
        }
    }
    s+="</tr>";
    return s;
}

function addTips(){
    $('#grid tr').mouseover( function(e) { showTip(e, $(this)); } ).mouseout( function(){ hideTip(); } );
    $('#grid').mouseout( function(){ hideTip(); } );
    
}

function showTip(e, $el){
	var x = $el.offset().left - 165;
	var y = $el.offset().top;
    var $tds=$el.children('td');
	var shapes = $tds.eq(0).text();
	var carats = $tds.eq(1).text();
	var color = $tds.eq(2).text();
	var clarity = $tds.eq(3).text();
	var s='<div id="thetip"><p>Shape: ';
	s+=shapes;s+='</p><p>Carats: ';s+=carats;s+='</p><p>Color: ';s+=color;s+='</p><p>Clarity: ';s+=clarity;s+='</div>';
	$tip.html(s).css("left", x);
	$tip.fadeIn('fast');
	var tb = $tip.height() + e.pageY;
	var wh = $(window).height();
	if (tb>wh){$tip.css({"bottom" :"0px"});}else{$tip.css({"top" : y});}
}
function hideTip(){
    $tip.hide(); 
}
function needsData(total){
    var retVal=false;
    $from=$('#rowfrom');
	$to=$('#rowto');
//	alert ($to.val());
    var rows = Math.round($from.val())+pageSize;
    var height = rows * rheight;
//	alert (Math.round($('#gridwrap')[0].scrollTop/rheight));
    if ( $('#gridwrap')[0].scrollTop >= height - 300 ){
        var newfrom=Math.round($from.val())+pageSize;
 	//	 var newfrom=Math.round($('#gridwrap')[0].scrollTop/rheight);
//		alert (newfrom+':'+total);
//pagesize=500;
        if (newfrom < total + 100){
			
            $from.val(newfrom);
            retVal=true;
        }
    }  
    return retVal;
}

function gridScroll(){  
    if ( needsData( $('#rowcounts').val() ) ){
        RefreshGrid();
    }        
}

function getFormData(){
    return $('#search').serializeArray();
}

function setGridHeight(rows){
    var h=rows * rheight;
    $('#gridheight').css('height',h);
}

function sortGrid($el){
    ClearGrid();
    $('.order').removeClass('sortUp sortDown'); 
    var sort=$('#sortname').val();
    var order=$('#sortorder').val();
    var cls;
    if (sort==$el.text()){
       if (order=="desc"){
            order="asc";
            cls="sortUp";
       }else{
           order="desc";
           cls="sortDown";
       }            
    }else{
        order="desc";
        cls="sortDown";
    }
    $el.addClass(cls);
    
    $('#sortname').val($el.text());
    $('#sortorder').val(order);
    RefreshGrid();
}

function ClearGrid(){
    newGrid=true;
    $('#rowfrom').val('0');
    $('#rowto').val(pageSize);
}

function printcert(id){
var url="cert.php?id="+id+"&action=print"
window.open(url,'Print Certificate','width=800,height=500,resizable=no,toolbar=no,location=no,directories=no,status=no,menubar=no');
}

function checkinput(){
var i=0;
$('fieldset.shape input').each(
function(){
if($(this).val() != ""){
var theid= "#"+ $(this).attr('name');
if ($(theid).hasClass('clicked')){}else{$(theid).addClass('clicked'); i = i +1;}
if (i==10){
$('#all').addClass('clicked');
}
}
}
)
}





$(document).ready( function(){
						
							
if ($.browser.version = $.browser.msie ){
 pageSize=50;
}
else{
 pageSize=50; //former 100

}

$("a")
  .filter(".sprecnet")
    .click(function(){
      alert("axy");
    })
  .end()


//$("#linkcualert").click(function(){
//        alert("Sunteti pe cale sa parasiti aceasta pagina!");
//      });



	$('#shapes ul li').load(function(){var theshapeid = $(this).attr('id'); $(this).css('background','url(images/all/'+theshapeid+'.jpg) top')})
	$('#shapes ul li').hover(function(){$(this).addClass('hovered')},function(){$(this).removeClass('hovered')});


	$('#shapes ul li').click(function(){
	
	var theshapeid = $(this).attr('id');
	var binput = "input[@name='"+theshapeid+"']";
	var allshapes = '#round,#princess,#emerald,#marquise,#asscher,#oval,#radiant,#pear,#heart,#cushion,#triangular';
	
	//checks if matching was clicked
	if (theshapeid == 'matching'){	
		if($(binput).val()=='1'){
		$(allshapes).removeClass('clicked');
		$("#all").removeClass('clicked');
		$(binput).val('2');
		$(this).addClass('clicked');
		}
		else{
		$(this).removeClass('clicked')
		$(binput).val('1')
		checkinput();
		}
	}
	//checks if fancy was clicked
	else if (theshapeid == 'fancy'){
		if ($('#fancy').hasClass('clicked')){ 
		
		$(this).removeClass('clicked');
		document.search.fancy.value = ""
		$('#theshade,.shadet').fadeOut('fast');
		$('#thecolor, .colort').fadeIn('fast');
		}
		else{
		$(this).addClass('clicked');
		document.search.fancy.value = "F"
		$('#thecolor, .colort').fadeOut('fast');
		$('#theshade,.shadet').fadeIn('fast');
//test  
//		$('#all').addClass('clicked');
//		document.search.all.value = "ALL"
//test		
		}
		
	}
	
	//if a shape was clicked ON

	else if ($(binput).val()==""){
	if ($('#matching').hasClass('clicked')){
	$("input[@name='matching']").val('1');
	$('#matching').removeClass('clicked')
	$('fieldset.shape input').val('');
		}
	if(theshapeid == "all"){
	$(allshapes).removeClass('clicked');
	
	$("fieldset.shape input").val('');

	}
	else{
	if ($("#all").hasClass("clicked")){
	$("#all").removeClass("clicked");
	document.search.all.value = ""
	}
	}
	$(this).addClass('clicked');
	
	if(theshapeid == "all"){ document.search.all.value="ALL"}
	else if(theshapeid == "round"){document.search.round.value = "Round" }
	else if(theshapeid == "princess"){document.search.princess.value = "Princess" }
	else if(theshapeid == "emerald"){document.search.emerald.value = "Emerald" }
	else if(theshapeid == "marquise"){document.search.marquise.value = "Marquise" }
	else if(theshapeid == "asscher"){document.search.asscher.value = "Asscher" }
	else if(theshapeid == "oval"){document.search.oval.value = "Oval" }
	else if(theshapeid == "radiant"){document.search.radiant.value = "Radiant" }
	else if(theshapeid == "pear"){document.search.pear.value = "Pear" }
	else if(theshapeid == "heart"){document.search.heart.value = "Heart" }
	else if(theshapeid == "cushion"){document.search.cushion.value = "Cushion" }
	else if(theshapeid == "triangular"){document.search.triangular.value = "Triangular" }
	}
	// if a shape was clicked off
	else{
	//checks if matching pairs was on.
	if ($('#matching').hasClass('clicked')){
	$("input[@name='matching']").val('1');
	$('#matching').removeClass('clicked')
	$('fieldset.shape input').val('');
	
	var theshapeid = $(this).attr('id');
		if(theshapeid == "round"){document.search.round.value = "Round" }
			else if(theshapeid == "princess"){document.search.princess.value = "Princess" }
			else if(theshapeid == "emerald"){document.search.emerald.value = "Emerald" }
			else if(theshapeid == "marquise"){document.search.marquise.value = "Marquise" }
			else if(theshapeid == "asscher"){document.search.asscher.value = "Asscher" }
			else if(theshapeid == "oval"){document.search.oval.value = "Oval" }
			else if(theshapeid == "radiant"){document.search.radiant.value = "Radiant" }
			else if(theshapeid == "pear"){document.search.pear.value = "Pear" }
			else if(theshapeid == "heart"){document.search.heart.value = "Heart" }
			else if(theshapeid == "cushion"){document.search.cushion.value = "Cushion" }
			else if(theshapeid == "triangular"){document.search.triangular.value = "Triangular" }
		$(this).addClass("clicked")
	}
	else{
	if($("#all").hasClass('clicked')){
		$("#all").removeClass('clicked');}
	
	$(this).removeClass('clicked');
	$(binput).val(""); 
	
	var anyclicked = $('.clicked').length;
	if ($('.clicked').length == 0 ){
	//default to all
	$('#all').addClass('clicked');
				document.search.all.value = "ALL"
					}
	
	}
		            
	} //end of shape adjustments
ClearGrid();
RefreshGrid();
		

});
    $tip=$('#tip');
    $('#rowfrom').val(0);
    $('#rowto').val(pageSize);    
    $('.order').click( function() { sortGrid( $(this) ) } );
 	
    $("fieldset.shape input").bind("click",function(){ ClearGrid(); RefreshGrid(); } );
	



	$('#mincw').keydown(
	
	function(e){
	
	if (e.keyCode===190 || e.which===190 ){return true;}
	else if (e.keyCode >= 65 || e.which>=65){
		if(e.keyCode>=96 || e.which>=96){
				if (e.keyCode<=105 || e.which<=105){
					return true;
				}
			}
		else{
			return false;
		}
		}
		
	
	if (e.keyCode === 13 || e.which === 13){
	
		var theval = $('#mincw').val()*1;
	
		if (theval < $('#locarat').val() || theval > $('#maxcarat').val()){
			$('#mincw').val($('#mincarat').val()).blur();
		}
	
		else {
		
			if($('#mincarat').val()==$('#mincw').val()){
			$('#mincarat,#mincw').val(theval.toFixed(2));
			$('#mincw').blur();
			}
			else{
			updatethecarat();
   		  }  }
	}//end enter stuff
	
	//the type stuff

	}
	); //end keydown
	
	$('#mincw').keyup(
	
	function(e){
	
			if (e.keyCode>=48 || e.which >=48){
	   			if (e.keyCode<=57 || e.which <=57){
					updatethecarat();		
				}
			}
			
			if (e.keyCode>=96 || e.which >=96){
	   			if (e.keyCode<=105 || e.which <=105){
					updatethecarat();		
				}
			}	
	
	})
	
	function updatethecarat(){
			
			var theval = $('#mincw').val()*1;
			var themaxval=$('#maxcw').val()*1;

   		 	var lo = $("#locarat").val();
   		    var hi = $("#hicarat").val();  

   		 	var minc = $('#mincw').val()*1;
   		 	var maxc = $('#maxcw').val()*1;
   		    
   		    if(minc < 1){
   		    var mincw = 90*((minc-lo)/(1-lo));
   		    }
   		    else if(minc >= 1 && minc <= 5){
   		    //loval = loval - 85;
   		    var mincw = ((minc-1)/(4))*180+90;
   		    }
   		    else if(minc > 5){
   		    //loval = loval - 255;
   		    var mincw = (minc-5)/(hi-5)*90+270;
   		    }
   		    
   		    var maxc = $('#maxcw').val()*1;
	  		if(maxc < 1){
				var maxcw = (90)*((maxc-lo)/(1-lo));
			}
			else if(maxc >= 1 && maxc <= 5){
				var maxcw = ((maxc-1)/(4))*180 + 90;
			}
			else if(maxc > 5){
				var maxcw = (maxc-5)/(hi-5)*90 + 270;
			}	
			
			maxcw=maxcw+10;
			
			var theval = $('#mincw').val()*1;
			var themaxval=$('#maxcw').val()*1;
			
 			if (theval < lo || theval > $('#maxcarat').val()){
			//$('#mincw').val($('#mincarat').val()).blur();
			mincw = 0;
				}
			if (themaxval < $('#mincarat').val() || themaxval > hi ){
			//$('#mincw').val($('#mincarat').val()).blur();
			maxcw = 370;
			}
			
			
   		    var rmin = Math.round(mincw);
   		 	var rmax = Math.round(maxcw);
   		 	
   		 	//if(theval>$('#maxcarat').val() || theval < lo){rmin=0;}
   		 	
   		    caratslider.setValues(rmin,rmax,false,false,true); 
   		    
   		    var delta = rmax - rmin; 
			var left = rmin+10 +'px';
        	var hwidth = Math.max(delta - 10,0) +'px';
        	$('#highlight').css("left",left);
        	$('#highlight').css("width",hwidth); 
   		    
   		    if(theval>$('#maxcarat').val() || theval < lo){
   		    $('#mincarat').val(lo);
   		    }
   		    else{
   		    $('#mincarat').val($('#mincw').val());
   		    }
   		    if(themaxval> hi || themaxval < $('#mincarat').val()){
   		    $('#maxcarat').val(hi);
   		    }
   		    else{
   		    $('#maxcarat').val($('#maxcw').val());
   		    }
   		    if(rmin!=caratslider.minVal || rmax!=caratslider.maxVal){
   		    ClearGrid();RefreshGrid();}
   		    
	}
	
	
	
	

	$('#maxcw').keydown(
	function(e){
	
	if (e.keyCode===190 || e.which===190 ){return true;}
	else if (e.keyCode >= 65 || e.which>=65){
		if(e.keyCode>=96 || e.which>=96){
				if (e.keyCode<=105 || e.which<=105){
					return true;
				}
			}
		else{
			return false;
		}
		}
		if (e.keyCode === 13 || e.which === 13){
	
		var theval = $('#maxcw').val()*1;
	
		if (theval < $('#mincarat').val() || theval > $('#hicarat').val()){
			$('#maxcw').val($('#hicarat').val()).blur();
		}
	
		else {
		
			if($('#maxcarat').val()==$('#maxcw').val()){
			$('#maxcarat,#maxcw').val(theval.toFixed(2));
			$('#maxcw').blur();
			}
			else{
			updatethecarat();
   		  }  }
	}//end enter stuff
	
	}
	)
	
$('#maxcw').keyup(
	
	function(e){
	
			if (e.keyCode>=48 || e.which >=48){
	   			if (e.keyCode<=57 || e.which <=57){
					updatethecarat();		
				}


			}
			
			if (e.keyCode>=96 || e.which >=96){
	   			if (e.keyCode<=105 || e.which <=105){
					updatethecarat();		
				}
			}	
	
	})

	
	$('#mincw,#maxcw').click(
	function(){
	$(this).val('');
	}
	)
	$('#mincw,#maxcw').bind("blur",
	function(){
		if($(this).val()==""){
			if ($(this).attr("id")=="mincw"){
				$(this).val($('#mincarat').val())
			}
			else{
				$(this).val($('#maxcarat').val())
			}
	}
	}
	)
	var allshapes = '#all,#round,#princess,#emerald,#marquise,#asscher,#oval,#radiant,#pear,#heart,#cushion,#triangular';	
	$("#all").addClass('clicked');
	
	RefreshGrid();	
		
		
		//$('#minc').html("<b>From: </b>"+$('#caratA').val())
		//$('#maxc').html("<b>To: </b>"+$('#caratB').val())
		$('#sliderShade,.shadet').hide();
		


		$(".caratleft, .caratright").mouseup(
		function(){
		$('#mincc,#maxcc').fadeOut('100')
		$('#maxcc').fadeOut('100')

		}
		)

		$('#mincw').val($('#locarat').val());
		$('#maxcw').val($('#hicarat').val());
		
		
	$("#min_thumb").mousedown(function(){$('#mincc').show()})
	$("#max_thumb").mousedown(function(){$('#maxcc').show()})
	    

		
		$(".carathandle").mousemove(
		function(){
		var handleimg = $(".handleimg");
		handleimg.hover(function(){ $(this).data('hasFocus', true);},function(){ $(this).data('hasFocus', false);})
		
		if (handleimg.data("hasFocus")){ $(this).css("z-index","12");}
		else{ 
		$(this).css("z-index","10");
		
		if ($(this).hasClass("left")){$('.right').css("z-index","12");}
		else if ($(this).hasClass("right")){$('.left').css("z-index","12");}		
		}
		
		}
		)
		$(".carathandle").mouseout(function(){$('.carathandle').css("z-index","10");})
		$(document).mouseup(function(){		$('#mincc,#maxcc').hide()})
		
		

		
/////////start yui slider////////////////////


    var Dom = YAHOO.util.Dom;
    var range = 370;
    var tickSize = 0;

    YAHOO.util.Event.onDOMReady(function () {
        var reportSpan     = Dom.get("demo_range");
        var calculatedSpan = Dom.get("demo_value");

        // Create the DualSlider
        caratslider = YAHOO.widget.Slider.getHorizDualSlider("caratslider","min_thumb", "max_thumb", range, tickSize);
            	if($.browser.safari){ caratslider.minRange = 10;}else{caratslider.minRange=0;}
       
        // Decorate the DualSlider instance with some new properties and
        // methods to maintain the highlight element
        YAHOO.lang.augmentObject(caratslider, {
            _status : 'ok',
            _highlight : Dom.get("highlight"),

            getStatus : function () { return this._status; },

            updateHighlight : function () {
                var delta = this.maxVal - this.minVal,
                    newStatus = 'ok';
                
                if (this._status !== newStatus) {
                    // Update the highlight class if status is changed
                    Dom.replaceClass(this._highlight,this._status,newStatus);
                    this._status = newStatus;
                }
                if (this.activeSlider === this.minSlider) {
                    // If the min thumb moved, move the highlight's left edge
                    Dom.setStyle(this._highlight,'left', (this.minVal + 10) + 'px');
                }
                // Adjust the width of the highlight to match inner boundary
                Dom.setStyle(this._highlight,'width', Math.max(delta - 10,0) + 'px');
            }
},true);

        // Attach the highlight method to the slider's change event
        caratslider.subscribe('change',caratslider.updateHighlight,caratslider,true);

        // Create an event callback to update some display fields
        var report = function () {
           
    var lo = $("#locarat").val()*1;
	var hi = $("#hicarat").val()*1;
	var loval =  caratslider.minVal;
	var hival =  caratslider.maxVal -10;	
	var loloval = lo*loval;
	if (hi < 5 || lo > 1){
		var denom= hi - lo;
		var mincw= (loval*denom)/340 + lo;
		var maxcw= (hival*denom)/340 + lo;
	}
	else{
	if(loval < 90){
	var mincw = (loval/90)*(1-lo) + lo;
	}
	else if(loval >= 90 && loval <= 270){
	loval = loval - 90;
	var mincw = (4*loval)/180 + 1;
	}
	else if(loval > 270){
	loval = loval - 270;
	var mincw = (hi-5)*loval/90 +5;
	}
	if(hival < 90){
	var maxcw = (hival/90)*(1-lo) + lo;
	}
	else if(hival >= 90 && hival <= 270){
	hival = hival - 90;
	var maxcw = (4*hival)/180 + 1;
	}
	else if(hival > 270){
	hival = hival - 270;
	var maxcw = (hi-5)*hival/90 +5;
	}
	}
	var rmin = mincw.toFixed(2);
	var rmax = maxcw.toFixed(2);

	$('#mincc').text(rmin);
	$('#maxcc').text(rmax);
	$('#mincw').val(rmin);
	$('#maxcw').val(rmax);
	
            // Call our conversion function
            calculatedSpan.innerHTML =
            calculatedSpan.className = caratslider.getStatus();
        };
          var updateCarat = function(){
          
    var lo = $("#locarat").val()*1;
	var hi = $("#hicarat").val()*1;
	var loval =  caratslider.minVal;
	var hival =  caratslider.maxVal -10;	
	var loloval = lo*loval;
	if (hi < 5 || lo > 1){
		var denom= hi - lo;
		var mincw= (loval*denom)/340 + lo;
		var maxcw= (hival*denom)/340 + lo;
	}
	else{
	if(loval < 90){
	var mincw = (loval/90)*(1-lo) + lo;
	}
	else if(loval >= 90 && loval <= 270){
	loval = loval - 90;
	var mincw = (4*loval)/180 + 1;
	}
	else if(loval > 270){
	loval = loval - 270;
	var mincw = (hi-5)*loval/90 +5;
	}
	if(hival < 90){
	var maxcw = (hival/90)*(1-lo) + lo;
	}
	else if(hival >= 90 && hival <= 270){
	hival = hival - 90;
	var maxcw = (4*hival)/180 + 1;
	}
	else if(hival > 270){
	hival = hival - 270;
	var maxcw = (hi-5)*hival/90 +5;
	}
	}
	var rmin = mincw.toFixed(2);
	var rmax = maxcw.toFixed(2);

	$('#mincc').text(rmin);
	$('#maxcc').text(rmax);
	$('#mincw').val(rmin);
	$('#maxcw').val(rmax);
				if(rmin != $('#mincarat').val() || rmax != $('#maxcarat').val()){

					ClearGrid();
	                $('#maxcarat').val(rmax);
	                $('#mincarat').val(rmin);
	                $('#minh').val(caratslider.minVal);
					$('#maxh').val(caratslider.maxVal);
	                RefreshGrid();
}	                
            };
        

        // Subscribe to the slider's change event to report the status.
        caratslider.subscribe('change',report);
		caratslider.subscribe('slideEnd',updateCarat);


    });


		//$("#handle_caratB").html("<img src='images/righth.gif'>")
});

function hilo(min,max){

        
   var oldlo = $("#locarat").val();
	var oldhi = $("#hicarat").val();

if (oldlo == "" && oldhi == ""){
    // set all defaults
    
    $("#hicarat").val(max);
    $("#locarat").val(min);
    $("#maxcarat").val(max);
    $("#mincarat").val(min);
    
    $("fieldset.shape input").val('');
    $('input[@name="all"]').val('ALL');

    
	$('#sliderCarat').slider( "moveTo", 0, 0 );	
	$('#sliderCarat').slider( "moveTo", 340, 1 );
	
}
	
else if (min != oldlo || max != oldhi){

    $("#hicarat").val(max);
    $("#locarat").val(min);
    
    var lo = $("#locarat").val();
	var hi = $("#hicarat").val();  
    var minc = $('#mincc').text();
    var maxc = $('#maxcc').text();
	
	//var mincw = (hi*minc)/340;
	//var maxcw = (hi*maxc)/340;
	//var loval = $('#sliderCarat').slider("value",0);
	//var hival = $('#sliderCarat').slider("value",1);	
	
	var loval =  	$('#minh').val();
	var hival =  	$('#maxh').val();
	
	if (lo>1||hi<5){
	
	var mincw=((minc-lo)*340)/(hi-lo);
	var maxcw=((maxc-lo)*355)/(hi-lo);
	
	console.log(minc,maxc,caratslider.minVal,caratslider.maxVal)
	console.log(mincw,maxcw,lo,hi);
	}
	else{
	if(minc < 1){
	var mincw = 90*((minc-lo)/(1-lo));
	}
	else if(minc >= 1 && minc <= 5){
	//loval = loval - 85;
	var mincw = ((minc-1)/(4))*180+90;
	}
	else if(minc > 5){
	//loval = loval - 255;
	var mincw = (minc-5)/(hi-5)*90+270;
	}
	if(maxc < 1){
	var maxcw = (90)*((maxc-lo)/(1-lo));
	}
	else if(maxc >= 1 && maxc <= 5){
	//loval = loval - 85;
	var maxcw = ((maxc-1)/(4))*180 + 100;
	}
	else if(maxc > 5){
	//loval = loval - 255;
	var maxcw = (maxc-5)/(hi-5)*90 + 290;
	}	
	
	}
	
	var rmin = Math.round(mincw);
	var rmax = Math.round(maxcw);
	if (rmin<0 || rmin>370){rmin=0;}
	if (rmax>370 || rmax<0){rmax=370;}
	
	caratslider.setValues(rmin,rmax); 
	
	}						
}