/* GET PROPERTY */
function getPropertyDiamonds(){
    initFreeDias();
  //Achtung bei Ringpaar nach Situation entscheiden welches Object anzusprechen
  if(setGender == 'pairring'){
    GetActiveItem('femalering','diamond_style',ShowActiveStyles);
    GetAvalibleItems('femalering','pseudo_stonetypecarat',ShowAvalibleType);
    GetAvalibleItems('femalering','pseudo_getavaliblediamonds', ShowAvailableDiamonds);
    GetActiveItem('femalering','diamond_quality',ShowActiveQuality);
    GetActiveItem('femalering','diamond_height',ShowActiveDiamondHeight);
    GetAvalibleItems('femalering','diamond_count',ShowAvalibleCount);
    //GetActiveItem('femalering','diamond_count',ShowActiveCount);
    GetActiveItem('femalering','diamond_arround',TestDiamondsArround);
    GetActiveItem('femalering','diamond_x',ShowActiveX);
    GetActiveItem('femalering','width',ShowActiveWidthDiamonds);
    GetActiveItem('femalering', 'diamond_spacing', ShowActiveSpacing);
  }else{
    GetActiveItem(setGender,'diamond_style',ShowActiveStyles);
    GetAvalibleItems(setGender,'pseudo_stonetypecarat',ShowAvalibleType);
    GetAvalibleItems(setGender,'pseudo_getavaliblediamonds', ShowAvailableDiamonds);
    GetActiveItem(setGender,'diamond_quality',ShowActiveQuality);
    GetActiveItem(setGender,'diamond_height',ShowActiveDiamondHeight);
    GetAvalibleItems(setGender,'diamond_count',ShowAvalibleCount);
    //GetActiveItem(setGender,'diamond_count',ShowActiveCount);
    GetActiveItem(setGender,'diamond_arround',TestDiamondsArround);
    GetActiveItem(setGender,'diamond_x',ShowActiveX);
    GetActiveItem(setGender,'width',ShowActiveWidthDiamonds);
    GetActiveItem(setGender, 'diamond_spacing', ShowActiveSpacing);
  }
}
var diamargin;
var diaWidth;
function ShowDiaMargin(data){
  //alert('diamargin: '+data.items);
  diamargin = parseFloat(data.items);
}
/* SHOW AVAILABLE STYLES */
/*
function ShowAvalibleStyles(data){
  if(!(data.any)){
    $.each(data.items, function(i,item){
    });
  }
}
*/
/* SET CLASS FOR ACTIVE ITEM */
function ShowActiveStyles(data){
  $('#container_configurator li').removeClass('active');
  if(data.value != ''){
    $('#diacomp_0'+data.value).parent().addClass('active');
  }else{
    $('#diacomp_01').parent().addClass('active');
  }
  
  if('diacomp_0'+data.value == 'diacomp_01'){
    $('#stonespacing, #s_spacing').show();
  }else{
    $('#stonespacing, #s_spacing').hide();
  }
  
  if('diacomp_0'+data.value == 'diacomp_04'){
    $('#dia_options_1').hide();
    $('#dia_options_2').show();
  }else{
    $('#dia_options_2').hide();
    $('#dia_options_1').show();
  }
}
/* SHOW AVAILABLE DIAMOND TYPE */
function ShowAvalibleType(data){

  //alert('SAT');
  var stonetype = data.items[0];
  var carat = data.items[1];
  if(carat != '0'){
    carat = carat.split('.');
    if(carat[1].length == 1){
      carat[1] = carat[1]+'0';
    };
    carat = carat[0]+','+carat[1]+' ct';
    /* REMOVED LOGIC - SEEMS TO BE OUTDATED
    if(stonetype == 'bri'){
        if(carat == '0,003 ct' || carat == '0,005 ct'){
            $('#diacomp_03').addClass('disabled');
            disable();
        }else{
            $('#diacomp_03').removeAttr('style').removeClass('disabled').unbind('click');
        }
    }*/
  }
  if(stonetype == 'bri'){
    $('#stoneselection .jqTransformSelectOpen').html('<img src="includes/steps/images/diamonds/img_bri.png" alt="" />Brilliant ('+carat+')');
    $('#q_lr, #q_vs').show();
    $('#q_vvs').hide();
  }else if(stonetype == 'bagv'){
    $('#stoneselection .jqTransformSelectOpen').html('<img src="includes/steps/images/diamonds/img_bagv.png" alt="" />Baguette ('+carat+')');
    $('#q_lr, #q_vs').hide();
    $('#q_vvs').show();
  }else if(stonetype == 'bagh'){
    $('#stoneselection .jqTransformSelectOpen').html('<img src="includes/steps/images/diamonds/img_bagh.png" alt="" />Baguette ('+carat+')');
    $('#q_lr, #q_vs').hide();
    $('#q_vvs').show();
  }else if(stonetype == 'pri'){
    $('#stoneselection .jqTransformSelectOpen').html('<img src="includes/steps/images/diamonds/img_pri.png" alt="" />Princess ('+carat+')');
    $('#q_lr, #q_vs').hide();
    $('#q_vvs').show();
  }
  SetActiveStoneClass(stonetype, carat);
}
function SetActiveStoneClass(stonetype, carat){
//alert('SASC');
  var carat = carat;
  if(carat != '0'){
    carat = carat.split(' ct');
    carat = carat[0];
    carat = carat.split(',');
    carat = carat[0]+carat[1];
    if(carat.length == 3){
      carat = carat+0;
    }
    $('#table_stones #'+stonetype+'_'+carat).parent().addClass('selected');
  }
}
/* CHECK FOR AVAILABLE DIAMONDS */
function ShowAvailableDiamonds(data){
//alert('SAD');
  $('#table_stones td a, #table_stones_free td a').addClass('disabled');
  disable();
  if(!(data.any)){
    if(data.items != null){
      $.each(data.items, function(i,item){
        if(item['bri']){
          var carat = item['bri'];
          carat = carat.split('.');
          carat = carat[0]+carat[1];
          $('#table_stones #bri_'+carat+', #table_stones_free #bri_'+carat).parent().removeAttr('style').removeClass('disabled').unbind('click');
        }else if(item['bagh']){
          var carat = item['bagh'];
          carat = carat.split('.');
          carat = carat[0]+carat[1];
          $('#table_stones #bagh_'+carat).parent().removeAttr('style').removeClass('disabled').unbind('click');
        }else if(item['bagv']){
          var carat = item['bagv'];
          carat = carat.split('.');
          carat = carat[0]+carat[1];
          $('#table_stones #bagv_'+carat).parent().removeAttr('style').removeClass('disabled').unbind('click');
        }else if(item['pri']){
          var carat = item['pri'];
          carat = carat.split('.');
          carat = carat[0]+carat[1];
          $('#table_stones #pri_'+carat).parent().removeAttr('style').removeClass('disabled').unbind('click');
        }
      });
    }else{
      //
    }
  };
}
function TestDiamondsArround(data){
  if(data.value == 1){
    $('#s_count .jqTransformSelectWrapper span').html('roundabout ('+availableMaxC+')');
    $('#s_count ul a').removeClass('selected');
    $('#s_count ul li:eq(0) a').addClass('selected');
  }else{
    if(setGender == 'pairring'){
      GetActiveItem('femalering','diamond_count',ShowActiveCount);
    }else{
      GetActiveItem(setGender,'diamond_count',ShowActiveCount);
    }
  }
}

function ShowActiveCount(data){
  var maxC = $('#s_count ul li').length-2;
  if(data.value > maxC){
    var entry = maxC+' Diamonds';
    var setA = parseFloat(maxC)+1;
    SetItemValue('femalering', 'diamond_count', maxC);
  }else if(data.value == 1){
    var entry = data.value+' Diamond';
    var setA = parseFloat(data.value)+1;
  }else if(data.value == 'NaN'){
    var entry = 'no Diamonds';
    var setA = parseFloat(data.value)+1;
  }else if(data.value == 0){
    var entry = 'no Diamonds';
    var setA = parseFloat(data.value)+1;
   }else{
    var entry = data.value+' Diamonds';
    var setA = parseFloat(data.value)+1;
  }
  $('#s_count .jqTransformSelectWrapper span').html(entry);
  $('#s_count ul a').removeClass('selected');
  $('#s_count ul li:eq('+setA+') a').addClass('selected');
}
/* SHOW AVAILABLE DIAMOND COUNT */
var availableMaxC;
function ShowAvalibleCount(data){
  $('#s_count ul li').remove();
  $('#s_count select option').remove();
  if(!(data.any)){
/*
    $('#s_count ul').append('<li><a href="#" index="0">keine Steine</a></li>');
    $('#s_count select').append('<option>keine Steine</option>');
    $('#s_count ul').append('<li><a href="#" index="-1">ringsum</a></li>');
    $('#s_count select').append('<option>ringsum</option>');
*/
    availableMaxC = parseFloat(data.items.length)-2;
    $.each(data.items, function(i,item){
      if(item == 1){
        $('#s_count ul').append('<li><a href="#" index="'+(parseFloat(item))+'">'+item+' Diamond</a></li>');
        $('#s_count select').append('<option>'+item+' Diamond</option>');
      }else if(item == 'NaN'){
        $('#s_count ul').append('<li><a href="#" index="'+(parseFloat(item))+'">no Diamonds</a></li>');
        $('#s_count select').append('<option>no Diamonds</option>');
      }else if(item == '0'){
        $('#s_count ul').append('<li><a href="#" index="'+(parseFloat(item))+'">no Diamonds</a></li>');
        $('#s_count select').append('<option>no Diamonds</option>');
      }else if(item == '-1'){
        $('#s_count ul').append('<li><a href="#" index="'+(parseFloat(item))+'">roundabout ('+availableMaxC+')</a></li>');
        $('#s_count select').append('<option>roundabout ('+availableMaxC+')</option>');
      }else{
        $('#s_count ul').append('<li><a href="#" index="'+(parseFloat(item))+'">'+item+' Diamonds</a></li>');
        $('#s_count select').append('<option>'+item+' Diamonds</option>');
      }
    });
  }
  if(setGender == 'pairring'){
    GetActiveItem('femalering','diamond_arround',TestDiamondsArround);
  }else{
    GetActiveItem(setGender,'diamond_arround',TestDiamondsArround);
  }
}
/* SET CLASS FOR ACTIVE DIAMOND QUALITY */
function ShowActiveQuality(data){
  $('#stone_quality .jqTransformRadioWrapper a').removeClass('jqTransformChecked');
  $('#stone_quality fieldset label').each(function(){
    var checkQuality = 'q_'+data.value;
    if(checkQuality == $(this).parent().attr('id')){
      var q = $(this).parent().attr('id');
      //q = q.split('/');
      //q = 'q_'+q[0]+q[1];
      //alert(q);
      $('#'+q+' a').addClass('jqTransformChecked');
    }
  });
}

function ShowActiveX(data){
  if(data.value != 0){
    posX = data.value;
    posX = parseFloat(posX);
  }else{
    posX = 0;
  }
  $( "#slider" ).slider( "option", "value", data.value );
  $("#ringPos span.label span").text(posX+' mm');
}
function ShowActiveSpacing(data){
  $('#s_spacing .jqTransformRadioWrapper a').removeClass('selected');
  var text = $('#s_spacing ul li:eq('+data.value+')').text();
  $('#s_spacing ul li:eq('+data.value+') a').addClass('selected');
  $('#s_spacing .jqTransformSelectWrapper span').html(text);
}

function ShowActiveWidthDiamonds(data){
  var range = data.value/2+'';
  $('#min_range span, #max_range span').text(range);
}
function ShowActiveDiamondHeight(data){
//  alert('dHeight:'+data.value);
}



// FUNCTIONS CALLED FROM CONF.JS
// SET DIAMOND COMPOSURE TYPE
function setComposure(e){
  $('.diamond_navigation li').removeClass('active');
  $(e).parent().addClass('active');
  if($(e).attr('id') == 'diacomp_04'){
    $('#dia_options_1').hide();
    $('#dia_options_2').show();
  }else{
    if($(e).attr('id') == 'diacomp_01'){
      $('#stonespacing, #s_spacing').show();
    }else{
      $('#stonespacing, #s_spacing').hide();
    }
    $('#dia_options_2').hide();
    $('#dia_options_1').show();
  }
  var selected = $(e).attr('id');
  selected = parseFloat(selected.substr(9));
  
  //alert(selected);
  if(setGender == 'pairring'){
    SetItemValue('femalering','diamond_style',selected);
    GetAvalibleItems('femalering','pseudo_stonetypecarat',ShowAvalibleType);
    GetAvalibleItems('femalering','diamond_count',ShowAvalibleCount);
  }else{
    SetItemValue(setGender,'diamond_style',selected);
    GetAvalibleItems(setGender,'pseudo_stonetypecarat',ShowAvalibleType);
    GetAvalibleItems(setGender,'diamond_count',ShowAvalibleCount);
  }
  ReloadCollageImage();
}
// SET DIAMOND TYPE
function setStoneType(e){
  var text = $('img', e).attr('alt');
  var carat = $(e).text();
  carat = carat.split(',');
  carat = carat[0]+'.'+carat[1];
  carat = carat.substring(0, carat.indexOf(" ct"));
  carat = parseFloat(carat);
  var stonetype = $('img', e).attr('class');
  //alert('carat: '+carat+' | text: '+text);
  if(stonetype == 'bri'){
    var stoneimg = 'includes/steps/images/diamonds/img_bri.png';
    $('#q_lr, #q_vs').show();
    $('#q_vvs').hide();
    var newQuality = $('#stone_quality a.jqTransformRadio.jqTransformChecked').parent().parent().attr('id').substr(2);
    if(setGender == 'pairring'){
      SetItemValue('femalering','diamond_quality',newQuality);
      //GetAvalibleItems('femalering','pseudo_stonetypecarat',ShowAvalibleType);
    }else{
      SetItemValue(setGender,'diamond_quality',newQuality);
      //GetAvalibleItems(setGender,'pseudo_stonetypecarat',ShowAvalibleType);
    }
    
  }else if(stonetype == 'bagh'){
    var stoneimg = 'includes/steps/images/diamonds/img_bagh.png';
    $('#q_lr, #q_vs').hide();
    $('#q_vvs').show();
    $('#q_vvs a').addClass('jqTransformChecked');
    if(setGender == 'pairring'){
      SetItemValue('femalering','diamond_quality','vvs');
    }else{
      SetItemValue(setGender,'diamond_quality','vvs');
    }
  }else if(stonetype == 'bagv'){
    var stoneimg = 'includes/steps/images/diamonds/img_bagv.png';
    $('#q_lr, #q_vs').hide();
    $('#q_vvs').show();
    $('#q_vvs a').addClass('jqTransformChecked');
    if(setGender == 'pairring'){
      SetItemValue('femalering','diamond_quality','vvs');
    }else{
      SetItemValue(setGender,'diamond_quality','vvs');
    }
  }else if(stonetype == 'pri'){
    var stoneimg = 'includes/steps/images/diamonds/img_pri.png';
    $('#q_lr, #q_vs').hide();
    $('#q_vvs').show();
    $('#q_vvs a').addClass('jqTransformChecked');
    if(setGender == 'pairring'){
      SetItemValue('femalering','diamond_quality','vvs');
    }else{
      SetItemValue(setGender,'diamond_quality','vvs');
    }
  }

  $('#table_stones a').removeClass('selected');
  $(e).addClass('selected');
  $('#stonesize > div > a.jqTransformSelectOpen').html('<img src="' + stoneimg + '" />' + text);

  if(setGender == 'pairring'){
    SetItemValue('femalering','diamond_carat', carat);
    SetItemValue('femalering','diamond_type',stonetype);
    GetActiveItem('femalering','diamond_x',ShowActiveX);
    GetAvalibleItems('femalering','diamond_count',ShowAvalibleCount);
    GetActiveItem('femalering','diamond_count',ShowActiveCount);
  }else{
    //alert('setGender: '+setGender);
    SetItemValue(setGender,'diamond_carat', carat);
    SetItemValue(setGender,'diamond_type',stonetype);
    GetActiveItem(setGender,'diamond_x',ShowActiveX);
    GetAvalibleItems(setGender,'diamond_count',ShowAvalibleCount);
    GetActiveItem(setGender,'diamond_count',ShowActiveCount);
  }
  diaSlider();
  ReloadCollageImage();

  //alert('hideFading5');
  $('#container_configurator .fadingStones').hide().attr('class', 'fading');
  $('#diamondslayer_add').remove();
};

// SET DIAMOND QUALITY
function setStoneQuality(e){
  var test = $('a', e).attr('class');
  if(test == 'jqTransformRadio jqTransformChecked'){
    var selected = $('input', e).val();
    if(setGender == 'pairring'){
      SetItemValue('femalering','diamond_quality',selected);
    }else{
      SetItemValue(setGender,'diamond_quality',selected);
    }
  }
};
// SET DIAMOND COUNT
function setStoneCount(e){
  var value = e.html();
  value = value.split(' ');
  value = value[0];
  if(value === 'no'){
    if(setGender == 'pairring'){
      SetItemValue('femalering', 'diamond_count', 0);
    }else{
      SetItemValue(setGender, 'diamond_count', 0);
    }
  }else if(value.indexOf('roundabout') >= 0){
    if(setGender == 'pairring'){
      SetItemValue('femalering', 'diamond_count', -1);
      //SetItemValue('femalering', 'diamond_count', availableMaxC);
    }else{
      SetItemValue(setGender, 'diamond_count', -1);
      //SetItemValue(setGender, 'diamond_count', availableMaxC);
    }
  }else{
    if(setGender == 'pairring'){
      SetItemValue('femalering', 'diamond_count', value);
    }else{
      SetItemValue(setGender, 'diamond_count', value);
    }
  }
  //CHANGED SCRIPT FROM THE JQTRANSFORM, BECAUSE EVENTLISTENER GETS LOST BY DYNAMIC LIST CHANGE
  $('#s_count li a').removeClass('selected');
  $(e).addClass('selected');
  $('#s_count .jqTransformSelectWrapper span').html(e.html());
  $('#s_count ul').hide();
  return false;
}
// SET DIAMOND SPACING
function setStoneSpacing(e){
  //alert(e.html());
  //var selected = $(e).html();
  var space = parseFloat($('#stone_count #s_spacing ul a').index(e));
  //alert(space);
//  alert(selected);
  if(setGender == 'pairring'){
    SetItemValueWithCallback('femalering', 'diamond_spacing', space, function(data) {
        GetAvalibleItems('femalering','diamond_count',function(data) {
            ShowAvalibleCount(data);
            GetActiveItem('femalering','diamond_count',ShowActiveCount);
        });
    });
  }else{
    SetItemValueWithCallback(setGender, 'diamond_spacing', space, function(data) {
        GetAvalibleItems(setGender,'diamond_count', function(data) {
            ShowAvalibleCount(data);
            GetActiveItem(setGender,'diamond_count',ShowActiveCount);
        });
    })

  }
  //CHANGED SCRIPT FROM THE JQTRANSFORM, BECAUSE EVENTLISTENER GETS LOST BY DYNAMIC LIST CHANGE
  $('#s_spacing li a').removeClass('selected');
  $(e).addClass('selected');
  $('#s_spacing .jqTransformSelectWrapper span').html(e.html());
  $('#s_spacing ul').hide();
  return false;
}

// DIAMOND POSITION SLIDER
function diaSlider(){
  
  if($("#slider").length != 0){ // CHECK IF SLIDER IS FOUND
    $('#slider').slider( 'destroy' );
    $('#slider div').unbind().remove();
  //alert("diaSlider");
    $(function() {
      if(setGender == 'pairring'){
        GetAvalibleItems('femalering','pseudo_getdiamondmargin', ShowDiaMargin);
      }else{
        GetAvalibleItems(setGender,'pseudo_getdiamondmargin', ShowDiaMargin);
      }
      var range;
      $('#slider').slider({
        value:posX,  // VALUE TO START WITH
        min: -3,  // MINIMUM VALUE
        max: 3, // MAXIMUM VALUE
        step: 0.1, // SIZE OF SLIDER STEPS
        start: function( event, ui ){
          range = $('#min_range span').text();
          range = parseFloat(range);
          $( "#slider" ).slider( "option", "min", -range );
          $( "#slider" ).slider( "option", "max", range );
        },
        create: function(event, ui){
          $('<div id="ringPos" class="ringPos"></div>').html('<span class="label"><span>'+$('#slider').slider('value')+' mm' + '</span></span>').appendTo('#slider .ui-slider-handle'); // APPEND POSITION VALUE LABEL
        },
        slide: function( event, ui ) {  // DO IF SLIDER IS MOVED
          if(ui.value < -(range-diamargin)){
            return false;
          }else if(ui.value > range-diamargin){
            return false;
          }
          $('#ringPos .label span').html(ui.value+' mm');
        },
        change: function(event, ui) { // DO IF SLIDER IS RELEASED
          //alert('change');
          if(setGender == 'pairring'){
            SetItemValue(setGender,'diamond_x', ui.value);
          }else{
            SetItemValue(setGender,'diamond_x', ui.value);
          }
          ReloadCollageImage();
        }
      });
    });
  }
}


// FREE DIAMONDS 
var dias;
var ringdiameterheight;
function initFreeDias(){
//alert('init');
  if(setGender == 'pairring'){
    GetActiveItem('femalering','width', actualWidth);
  }else{
    GetActiveItem(setGender,'width', actualWidth);
  }
  ringdiameterheight=300;    // should not be changed - all the profile background images are optimized for this value
};

function reinitFreeDias(){
//  alert('reinit');
  if(setGender == 'pairring'){
    GetActiveItem('femalering','width', actualWidth);
  }else{
    GetActiveItem(setGender,'width', actualWidth);
  }
  ringdiameterheight=300;    // should not be changed - all the profile background images are optimized for this value
}
var ringwidth;
function actualWidth(data){
//alert('actualWidth');
  ringwidth=data.value*10;
  if(setGender == 'pairring'){
    GetAvalibleItems('femalering','pseudo_getopendiamonds', createDiaArray);
  }else{
    GetAvalibleItems(setGender,'pseudo_getopendiamonds', createDiaArray);
  }
};
function createDiaArray(data){
  $('#free_stones tbody').html('');
  if(!(data.any)){
    if(data.items != ''){
      //dias = new Array();
      if(dias != 'undefined'){
        dias = [];
      }else{

      }
      $.each(data.items, function(i,item){
        for(i = 0; i < item.length; i++){
          dias[i]=[];
          var minusPos = (ringwidth/10)/2;
          diaWidth = (item[i]['width']/10)/2;
          diaPadding = item[i]['padding']/2;
          diaPadding = parseFloat(diaPadding);
          var posx = item[i]['posx']/10;
          var posy = item[i]['posy']/10;
          var carat = item[i]['carat']+' ct';
          var caratimg = item[i]['carat'];
          caratimg = caratimg.split('.');
          caratimg = caratimg[0]+caratimg[1];
          
          dias[i]['carat'] = item[i]['carat'];
          dias[i]['width'] = item[i]['width'];
          dias[i]['padding'] = item[i]['padding'];
          dias[i]['border'] = item[i]['border'];
          dias[i]['posx'] = item[i]['posx'];
          dias[i]['posy'] = item[i]['posy'];
          
          $('<tr id="drag'+i+'"><td><a href="#" class="edit_stone"><img src="includes/steps/images/diamonds/img_bri_'+caratimg+'.png" alt="" class="stoneimage" />'+carat+'</a></td><td>'+posy+' mm</td><td>'+(Math.round((posx-minusPos+diaWidth)*10)/10)+' mm</td><td class="delete"><a href="#"><img src="includes/steps/images/diamonds/btn_delete.png" alt="" /></a></td></tr>').appendTo('#free_stones tbody');
        };
      });
      diaDrag();
    }else{
      dias = [];
      diaDrag();
    }
  }
}
/*
function isArray(testObject) {   
  alert(testObject && !(testObject.propertyIsEnumerable('length')) && typeof testObject === 'object' && typeof testObject.length === 'number');
}
*/
function diaDrag(){
    // *********************************************************
    // now the real script ;)
    // not really perfect, but it works
    // *********************************************************
    var startPosX;
    var startPosY;
    var collision = false;

    $(function() {
        // First create the holder-DIV with the profile background image
        $( "#diafreewraper div, #ringholder div" ).remove();
        $( "#diafreewraper" ).append('<div style="background:url(includes/steps/images/diamonds/free_dias/profilebg_w'+ringwidth+'.png) no-repeat; position:relative; width:117px; height:350px;"><div style="position:absolute; left:12px; top:31px; width:'+ringwidth+'px; height:300px;" id="ringholder"></div></div>');

        // Now create all the diamond drag-Objects
        for (i=0; i<dias.length; i++){
            $( "#draggable"+i ).unbind('dragstop').unbind('mouseover').unbind('mouseout').unbind('mousedown').draggable( 'destroy' ).remove();
        }
        for (i=0; i<dias.length; i++){
            var diacarat = dias[i]["carat"];
            diacarat = diacarat.split('.');
            diacarat = diacarat[0]+diacarat[1];
            $( "#ringholder" ).append('<div id="draggable'+i+'"></div>');
            $( "#draggable"+i ).css( { "background": "url(includes/steps/images/diamonds/free_dias/diafree_"+diacarat+".png) 0px 50px repeat-y" } );
            $( "#draggable"+i ).css( { "width": dias[i]["width"]+"px" } );
            $( "#draggable"+i ).css( { "height": dias[i]["width"]+"px" } );
            $( "#draggable"+i ).css( { "position": "absolute" } );
            $( "#draggable"+i ).css( { "left": dias[i]["posx"]+"px" } );
            $( "#draggable"+i ).css( { "top": dias[i]["posy"]+"px" } );

            //$( "#draggable"+i ).draggable( {collide: 'block', id:i} );
            $( "#draggable"+i ).draggable();
            // START
            $('#draggable'+i).bind( "dragstart", function(event, ui) {
                var $t = $(this), widget = $t.data("draggable");
                widget.peers = $t.siblings();
                //widget.mode = widget.options.collide;
                widget.id = widget.options.id;

                $("#ringholder div").css( { "background-position": "0px 50px" } );

                $(this).css( { "background-position": "0px 0px" } );
                $(this).css( { "z-index": "999" } );
                startPosX = $(this).position().left;
                startPosY = $(this).position().top;
            });
            // DRAG
            $('#draggable'+i).bind( "drag", function(event, ui) {
                var $t = $(this), widget = $t.data("draggable");
                widget.peers = $t.siblings();
                //widget.mode = widget.options.collide;
                //widget.id = widget.options.id;

                overlapp=false;
                var tID = $(this).attr('id');
                tID = tID.substr(9);
                //tID=widget.id;

            for (i=0; i<dias.length; i++){
                if (i!=tID){
                    $p=$("#draggable"+i);

                    peer_diaPadding=parseFloat(dias[i]["padding"]);
                    diaPadding=parseFloat(dias[tID]["padding"]);
                    diaFramepadding=parseFloat(dias[tID]["border"]);

                    if ( peer_diaPadding>diaPadding ){
                        diaPadding=peer_diaPadding;
                    }

                    var w1 = $t.width();
                    var r1 = w1/2+diaPadding;
                    var x1p = ui.position.left;
                    var x1 = x1p+r1;
                    var y1 = ui.position.top+r1;
                    var w2 = $p.width();
                    var r2 = w2/2+diaPadding;
                    var x2p = $p.position().left;
                    var x2 = x2p+r2;
                    var y2 = $p.position().top+r2;

                    xd=Math.abs(x1-x2);
                    yd=Math.abs(y1-y2);
                    d=Math.sqrt(xd*xd+yd*yd);

                    // Check overlapping with other diamonds
                    if (d < (r1+r2)){
                      overlapp=true;
                    }

                    // check the frameborder-safe areas
                    if ( (x1p-(dias[tID]["width"]/2))<=diaFramepadding ){
                      ui.position.left=diaFramepadding+(dias[tID]["width"]/2);
                    }else if ( (x1p+w1+(dias[tID]["width"]/2))>=(ringwidth-diaFramepadding) ){
                      ui.position.left=ringwidth-diaFramepadding-w1-(dias[tID]["width"]/2);
                    }
            
                    if ( (y1-r1)<=0 ){
                      ui.position.top=0;
                    }else if ( (y1+r1)>=(ringdiameterheight) ){
                      ui.position.top=ringdiameterheight-w1;
                    }
                }else{
                    $p=$("#draggable"+i);

                    peer_diaPadding=parseFloat(dias[i]["padding"]);
                    diaPadding=parseFloat(dias[tID]["padding"]);
                    diaFramepadding=parseFloat(dias[tID]["border"]);

                    if ( peer_diaPadding>diaPadding ){
                        diaPadding=peer_diaPadding;
                    }

                    var w1 = $t.width();
                    var r1 = w1/2+diaPadding;
                    var x1p = ui.position.left;
                    var x1 = x1p+r1;
                    var y1 = ui.position.top+r1;
                    var w2 = $p.width();
                    var r2 = w2/2+diaPadding;
                    var x2p = $p.position().left;
                    var x2 = x2p+r2;
                    var y2 = $p.position().top+r2;

                    xd=Math.abs(x1-x2);
                    yd=Math.abs(y1-y2);
                    d=Math.sqrt(xd*xd+yd*yd);

                    //check the frameborder-safe areas
                    /*
                    if( (x1p)<=diaFramepadding ){
                      ui.position.left=diaFramepadding;
                    }else if( (x1p+w1)>=(ringwidth-diaFramepadding) ){
                      ui.position.left=ringwidth-diaFramepadding-w1;
                    }
                    */
                    if( (x1p-(dias[tID]["width"]/2))<=diaFramepadding ){
                      //ui.position.left=diaFramepadding;
                      ui.position.left=diaFramepadding+(dias[tID]["width"]/2);
                      //$('#testarea #dragValue').html(Math.round((diaFramepadding+(dias[tID]["width"]/2))*10)/10);
                    }else if( (x1p+w1+(dias[tID]["width"]/2))>=(ringwidth-diaFramepadding) ){
                      //ui.position.left=ringwidth-diaFramepadding-w1;
                      ui.position.left=ringwidth-diaFramepadding-w1-(dias[tID]["width"]/2);
                      //$('#testarea #dragValue').html(Math.round((ringwidth-diaFramepadding-w1-(dias[tID]["width"]/2))*10)/10);
                    }
                    if ( (y1-r1)<=0 ){
                      ui.position.top=0;
                    }else if ( (y1+r1)>=(ringdiameterheight) ){
                      ui.position.top=ringdiameterheight-w1;
                    }
                }
            };

            if (overlapp){
              $(this).css( { "background-position": "0px 100px" } );
              collision = true;
            }else{
              collision = false;
              $(this).css( { "background-position": "0px 0px" } );
            }
        });
        // STOP
        $('#draggable'+i).bind( "dragstop", function(event, ui) {
            $(this).css( { "background-position": "0px 50px" } );
            $(this).css( { "z-index": "1" } );
            if(collision == true){
                $(this).css('left', startPosX+'px');
                $(this).css('top', startPosY+'px');
            }else{
                $('#free_stones tr').removeClass('selected');
                var item = $(this).attr('id');
                item = item.substr(9);
                var posY = ui.position.top/10;
                var posX = ui.position.left/10;
                var minusPos = (ringwidth/10)/2;
                $('#drag'+item).addClass('selected');
          
                var posVal = posX-minusPos;
                var diaWidth = (dias[item]['width']/10)/2;
          
                $('#drag'+item+' td:eq(1)').html(Math.round((posY+diaWidth)*10)/10+' mm');
                $('#drag'+item+' td:eq(2)').html(Math.round((posX-minusPos+diaWidth)*10)/10+' mm');
          
                var diavalues = new Array();
                item = parseFloat(item);
          
                for (i=0; i<dias.length; i++) {
                    diavalues[i]=new Array();
                    diavalues[i][0] = i;
                    diavalues[i][1] = dias[i]['carat'];
                    diavalues[i][2] = dias[i]['width'];
                    diavalues[i][3] = dias[i]['border'];
                    diavalues[i][4] = dias[i]['padding'];
                    diavalues[i][5] = Math.round((posX)*10);
                    diavalues[i][6] = Math.round((posY*10)*10)/10;
                }
                if(setGender == 'pairring'){
                    SetItemValue('femalering', 'diamond_open', diavalues[item]);
                }else if(setGender == 'femalering' ){
                    SetItemValue('femalering', 'diamond_open', diavalues[item]);
                }else if(setGender == 'malering'){
                    SetItemValue('malering', 'diamond_open', diavalues[item]);
                }
            }
        });

        $( "#draggable"+i ).mouseover( function(){ $(this).css( { "background-position": "0px 150px" } ); } );
        $( "#draggable"+i ).mouseout( function(){ $(this).css( { "background-position": "0px 50px" } ); } );
        $( "#draggable"+i ).mousedown( function(){ $(this).css( { "background-position": "0px 0px" } ); } );
        }
  });
}