/* 
 * SI Files (0.1)
 * by Sagie Maoz (n0nick.net)
 * n0nick@php.net
 *
 * A jQuery implementation of the SI Files JS lib by Shaun Inman
 * See <http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom>
 *
 * Copyright (c) 2009 Sagie Maoz <n0nick@php.net>
 * Licensed under the GPL license, see http://www.gnu.org/licenses/gpl-3.0.html 
 *
 *
 * NOTE: This script requires jQuery to work.  Download jQuery at www.jquery.com
 *
 */

(function($) {
  $.fn.si_files = function(options)
  {
    var settings = {
      pointer:    true,
      width:      270,
      button:      {
        src:  '/pics/btn/btn-browse.gif',
        width:  70,
        height:  20
      },
      label:      true,
      label_class:  'file_label',
      cabinet_class:  'file_cabinet',
      debug:      false
    };
    if (options)
    {
      $.extend(settings, options);
    }
    
    return this.each(function()
    {
      
      // file input CSS
      var opacity = settings.debug? '0.5' : '0';
      $(this).css({
        'position':   'relative',
        'width':    'auto',
        'opacity':    opacity,
        '-moz-opacity':  opacity,
        'filter':    'progid:DXImageTransform.Microsoft.Alpha(opacity='+opacity+')'
      });
      if (settings.pointer)
      {
        $(this).css('cursor', 'pointer');
      }
      
      // file input wrapper (cabinet)
      $(this).wrap('<div class="'+settings.cabinet_class+'"></div>');      
      var cabinet = $(this).parent()[0];
      
      $(cabinet).css({
          'width':      settings.width +'px',
          'height':      settings.button.height +'px',
          'background':    'url("'+settings.button.src+'") top right no-repeat',
          'display':      'block',
          'overflow':      'hidden',
          'position':      'relative',
          'right':      '0px',
          'top':      '0px'
      });
      if (settings.pointer)
      {
        $(cabinet).css('cursor', 'pointer');
      }
      cabinet.file_input = $(this);
      
      // calculate cabinet's dimensions
      cabinet.min_x   = $(cabinet).offset()['left'];
      cabinet.min_y   = $(cabinet).offset()['top'];
      cabinet.file_w  = $(this).width();
      cabinet.file_h  = $(this).height();
      
      cabinet.file_input.css({'cursor':'pointer', 'top':'0px'});
      
      if (settings.label)
      {
        $(cabinet).append('<div style="width: 190px; position: absolute; left: 0px; top: 0px;"><div class="inputCorner"></div><input class="inputText" type="text" style="width:170px;" value="..." /><div class="inputCorner right"></div></div>');
        var inputField = $(cabinet).find('input.inputText');
        
        $(this).change(function(e)
        {
          $(inputField).attr('value',$(this).val());
        });
      }
    
    });
    };
})(jQuery);