//select
$.fn.jdrop = function() {
    
    // Invisibly create a jDrop div for the purposes of checking wheather a CSS width has been set      
    $('body').append('<div class="jDrop" style="display:none"></div>')

    // Loop through each <SELECT> instance and create the drop-down jDrop select DIVs. ( The drop-down menu is not created at this stage, which dramatically reduces load-speed for pages with lots of jDrop replacements. ) 
    this.each(function(intIndex){               
        // Bring the drop down menu into existence
        $(this).after('<div class="jDrop" title="'+$(this).attr('name')+'"><div class="sel_frame"><div class="sel">'+$(this).children('option:selected').includeHTML()+'</div></div><div class="button"></div><div class="op_frame"></div></div>').hide();
       
    })
    
    // When the jDrop sel_frame (<SELECT>) or button (down-arrow) are clicked do the following...    
    $('.sel_frame, .button').click(function(){                            
        // Store the INDEX value of the current drop-down for repeated use ( this saves SELECTING the index everytime you want to opperate which would take up more clicks or force you to add un-needed classes like... jDrop-001 etc. )  
        if( $('.sel_frame').index(this) != -1){var jDropIndex = $('.sel_frame').index(this)} else {var jDropIndex = $('.button').index(this)}        
        // Create the jDropOptions variable to be filled with the <SELECT>'s options ( Doing this "onClick" of it's parent is much tidier than processing all the select's options at script initialisation time. Originaly jDrop did everything at initilasation, which caused 10+ second load-times with older machines when using 40+ jDrop instances. It's a Tug'o'War between Initialisation and onClick but ultimately you want the page to load faster, and not worry too much about onClick as the amount of data being processed is small. However, IE6 with throw up the timer cursor briefly as the <OPTION>'s HTML is included as the images are being loaded on-the-fly. Unfortunately the custom HTML attribute of the <OPTION> is not visible to the browser's cache engine. )
        var jDropOptions='';                      
        // Populate the drop-down menu before creating the select
        $('select:eq('+jDropIndex+')').children('option').each(function(intIndex){
            jDropOptions=jDropOptions+'<div class="op">'+$(this).includeHTML()+'</div>';                              
        })
        
        // Insert the recently populated drop-down menu ".op_frame" into the ".jDrop" <DIV>
        $('.jDrop:eq('+jDropIndex+')').children('.op_frame').html(jDropOptions)

        // Calculate the VERTICAL dimensions of the window, mouse and drop-down                                                 
        var jDropTop = $(this).parent().offset().top-$(this).parent().offsetParent().offset().top; // I'm offsetParent in case your form is within an absolutely positioned element. 
        var dropDownTop = jDropTop + $(this).parent().height()+1;        
        var dropDownHeight=$('.jDrop:eq('+jDropIndex+') .op_frame').height();  
        var winHeight=$(window).height();                                      
        var docScrollTop=$(document).scrollTop();
        var dropDownYSpace=dropDownTop+dropDownHeight + $(this).parent().offsetParent().offset().top;
        
        // Calculate the HORIZONTAL dimensions of the window, mouse and drop-down
        var jDropLeft = $(this).parent().offset().left - $(this).parent().offsetParent().offset().left; // Again, offsetParent in case your form is within an absolutely positioned element, careful!
        var dropDownLeft=jDropLeft-1;
        var dropDownWidth=$('.jDrop:eq('+jDropIndex+') .op_frame').width();         
        var jDropWidth = $(this).parent().outerWidth();
        var winWidth=$(window).width();
        var docScrollLeft=$(document).scrollLeft();
        var dropDownXSpace=dropDownLeft+dropDownWidth+ $(this).parent().offsetParent().offset().left;                      
        
        if (dropDownYSpace>winHeight+docScrollTop){dropDownTop=jDropTop-dropDownHeight-1}
        //if (dropDownXSpace>winWidth+docScrollLeft){dropDownLeft=docScrollLeft+winWidth-dropDownWidth-$(this).parent().offsetParent().offset().left-3;}

        // Apply the width/height calculations...
        $('.jDrop:eq('+jDropIndex+') .op_frame').css({top: dropDownTop, left: dropDownLeft })   

        // Fade in the newly created drop-down in it's correct window position
        $(this).parent().children('.op_frame').fadeIn(50,function(){            
            // Set the fadeout of the drop-down based on the .jDrop parent
            $(this).parent().hover(function(){},function(){$(this).children('.op_frame').hide()}),
            // IE6-Friendly hover for the <option> ( <DIV class=".op" > )
            $(this).children('.op').hover(function(){$(this).addClass('hover')}, function(){$(this).removeClass('hover')})
            // When the user clicks on one of the options...
            $(this).children('.op').click(function(){
                // Change the value of the original <SELECT> form element. This makes the data POST'able on submit, integrating seamlessly with your existing forms. 
                $("select[name='"+ $(this).parent().parent().attr('title')+"']").val($(this).text())
                // Update the sel DIV with the HTML from the option you just clicked so the user knows the form value has been changed
                $(this).parent().parent().children('.sel_frame').children('.sel').html($(this).html()).parent().parent().children('.op_frame').hide()})
        })
          
    })
    $('.sel_frame').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')})
};
$.fn.includeHTML = function () {
      var thisHTML = $(this).attr('html');
      if (thisHTML){
          return thisHTML + $(this).text() }
      else{
          return $(this).html()
      }
};

//file
(function($){$.fn.filestyle=function(options){var settings={width:250};if(options){$.extend(settings,options);};return this.each(function(){var self=this;var wrapper=$("<div>").css({"width":settings.imagewidth+"px","height":settings.imageheight+"px","background":"url("+settings.image+") left top no-repeat","display":"inline","position":"absolute","overflow":"hidden"});var filename=$('<input class="file">').addClass($(self).attr("class")).css({"display":"inline","width":settings.width+"px"});$(self).before(filename);$(self).wrap(wrapper);$(self).css({"position":"relative","height":settings.imageheight+"px","width":settings.width+"px","display":"inline","cursor":"pointer","opacity":"0.0"});if($.browser.mozilla){if(/Win/.test(navigator.platform)){$(self).css("margin-left","-142px");}else{$(self).css("margin-left","-168px");};}else{$(self).css("margin-left",settings.imagewidth-settings.width+"px");};$(self).bind("change",function(){filename.val($(self).val());});});};})(jQuery);