// styled browse button
/*
@BEGIN - YOU CAN CHANGE THIS
*/
var sbb_input_class   = 'styledbtn';       // define the class for the input you whant to style
var sbb_big_div       = 'brwbutton';       // define the class for the big div
var sbb_big_div_input = 'brwbutton_input'; // define the class for the input
var brwbutton_file    = 'brwbutton_file';  // define the class for the file info
/*
@END - YOU CAN CHANGE THIS
*/

// let`s start
$(document).ready(function(){


	// file styled
	$('.'+sbb_input_class).wrap("<div class='"+sbb_big_div+"'><div class='"+sbb_big_div_input+"'></div></div>").bind("change",function(){

		// set some vars
		var button = $(this);
		var parent = button.parent();

		// check fine length
		var fileName = button.val();
		fileName = (fileName.length>=25)?fileName.substr(0,25)+' ...':fileName;

		// add the file name
		if(parent.next().is('div')) parent.next().html('<span>'+fileName+'</span><a>Remove</a>');
		else parent.after('<div style="display:none" class="'+brwbutton_file+'"><span>'+fileName+'</span><a>Remove</a></div>');
		parent.next().fadeIn('fast');

		// create remove link
		var remove = $('a',parent.next());
		remove.click(function(){

			var me = $(this).parent();

			me.fadeOut('fast',function(){

				$(button).val('');
				me.remove();

			});

		});

	});

});