$(function() {
  var updateEngravingPreview = function() {
    var t = $(this);
    var name = t.attr('name').replace(/-[0-9]+/gm, '');
    var img = $('img#'+name+'-preview');
    var urlBase = $('input#edit-'+name+'-preview-url');
    var size = $('.fs-size input[name="size"]:checked');
    
    var font = $('.fs-font input[name="font"]:checked');
    var fontId = 0;
    if( font.length) {
      fontId = font.val();
    }
    
    if( img.length && urlBase.length ) {
      var v = t.val();
      v = encodeURIComponent(v)
      v = v.replace(/%/gm,':');
      
      var sizeVal = 0;
      if(size.length) {
        sizeVal = size.val();
      }
      img.attr('src', urlBase.val()+'/'+sizeVal+'/'+v+'/'+fontId );
    }
  };
  var updateEngravingPreviewBySize = function() {
    var size = $(this);
    if( size.attr('checked') ) {
      var img = $('img.engraving-preview');
  
      img.each(function() {
        var i = $(this);
        var url = i.attr('src');
        var urlBase = $('input#edit-'+i.attr('id')+'-url');
        var u = url.substring(urlBase.val().length);
        if( u.charAt( 0 ) == '/' ) {
          u = u.substring( 1 );
        }
  
        var args = u.split('/');
        if( args.length ) {
          args[0] = size.val();
        }
        var newUrl = urlBase.val() + '/' + args.join('/');
        i.attr('src',newUrl);
      });
    }
  };
  var updateEngravingPreviewByFont = function() {
    var font = $(this);
    if( font.attr('checked') ) {
      var img = $('img.engraving-preview');
  
      img.each(function() {
        var i = $(this);
        var url = i.attr('src');
        var urlBase = $('input#edit-'+i.attr('id')+'-url');
        var u = url.substring(urlBase.val().length);
        if( u.charAt( 0 ) == '/' ) {
          u = u.substring( 1 );
        }
  
        var args = u.split('/');
        if( args.length >= 2 ) {
          args[2] = font.val();
        }
        var newUrl = urlBase.val() + '/' + args.join('/');
        i.attr('src',newUrl);
      });
    }
  };

  $('textarea[name^="engraving"]').livequery('keyup', function() { $(this).stopTime(); $(this).oneTime( 1000, updateEngravingPreview ); } );
  $('.fs-size input[name="size"]').livequery('click', function() { $(this).stopTime(); $(this).oneTime( 1000, updateEngravingPreviewBySize ); } );
  $('.fs-font input[name="font"]').livequery('click', function() { $(this).stopTime(); $(this).oneTime( 1000, updateEngravingPreviewByFont ); } );
});