// Custom size flag slider.

function checkString(value, size, min, max) {
  if (typeof value != 'string') value = value.toString();
  switch(value) {
    case 'up' :
      value = size/multiplier+increment;
      if(value>max) value = max;
      break;
    case 'down' :
      value = size/multiplier-increment;
      if(value<min) value = min;
      break;
    default:
      value = value.toLowerCase().replace('cm', '');
  }
  return Math.round(value);
}

function widthSlide(value) {
  value = checkString(value, $('#flag').width(), minWidth, maxWidth);
  if(value>=minWidth && value<=maxWidth) {
    $('#flag-slider .width .bar').slider('option', 'value', value);
    $('#flag').css('width', value*multiplier); 
    $('#flag-slider .width .field').val(value+'cm');
  } else {
    $('#flag-slider .width .field').val(checkString($('#flag').width()/multiplier)+'cm');
  }
}

function heightSlide(value) {
  value = checkString(value, $('#flag').height(), minHeight, maxHeight);
  if(value>=minHeight && value<=maxHeight) {
    $('#flag-slider .height .bar').slider('option', 'value', value)
    $('#flag')
        .css('height', value*multiplier)
    	.css('margin-top', 20+(maxHeight-value)*multiplier/2)
    	.css('margin-bottom', (maxHeight-value)*multiplier/2);
    $('#flag-slider .height .field').val(value+'cm');
  } else {
    $('#flag-slider .height .field').val(checkString($('#flag').height()/multiplier)+'cm');
  }
}

$(document).ready(function(){
  $('#flag')
    .css('width', midWidth*multiplier)
  	.css('height', midHeight*multiplier)
  	.css('margin-top', 20+(maxHeight-midHeight)*multiplier/2)
  	.css('margin-bottom', (maxHeight-midHeight)*multiplier/2);

  $('#flag-slider .width .field').val(midWidth+'cm');
  $('#flag-slider .height .field').val(midHeight+'cm');
  
  $('#flag-slider .width .bar').slider({
    min: minWidth, max: maxWidth, value: midWidth, // step: increment,
    slide: function(event, ui) { widthSlide(ui.value) }
  });
  $('#flag-slider .height .bar').slider({
    min: minHeight, max: maxHeight, value: midHeight, // step: increment,
    slide: function(event, ui) { heightSlide(ui.value) }
  });
  
  // bind up the dom elements
  $('#step1_decrease_height').bind('click', function () { heightSlide('down'); });
  $('#step1_increase_height').bind('click', function () { heightSlide('up'); });
  $('#step1_decrease_width').bind('click', function () { widthSlide('down'); });
  $('#step1_increase_width').bind('click', function () { widthSlide('up'); });

  $('.height input').bind('change', function (e) { heightSlide(this.value); });
  $('.width input').bind('change', function (e) { widthSlide(this.value); });
  
});


// End custom size flag slider.