<commit_before>
(function(sprite, document, window, undefined) {
	
var elements = sprite.elements = {
	fileInput: '#fileInput',
	fileInputShortcut: '#fileInputShortcut',
	fileSamples: '#fileSamples',
	dropbox: '#source',
	spriteContainer: '#sprite',
	fileContainer: '#files',
	addedFiles: '#added-files',
	fileWarnings: '#file-warnings',
	imageload: '#imageload',
	exportCss: '#exportCss',
	exportHtml: '#exportHtml',
	exportImageNewWindow: '#openInNewWindow',
	preview: '#preview',
	result: '#result',
	cssTemplateInputs: '#css-template input',
	classPrefix: '#class-prefix',
	spriteClassName: '#sprite-classname',
	filenameMatch: '#filename-match',
	classSuffix: '#class-suffix',
	cssPrefix: '#css-prefix',
	options: '#options',
	optionOffset: '#offset',
	optionDirection: ':radio[name=direction]',
	optionExport: ':radio[name=export]',
	sections: 'section',
	app: '#app',
	noapp: '#noapp',
	progress: '#progress',
	intro: '#intro'
};

var settings = sprite.settings = {
	enabled: (function() {
		return FileReaderJS.enabled;
	})(),
	thumbnailWidth: 20,
	thumbnailHeight: 20,
	maxImageSize: 512000,
	canExportGif: (function() {
		var c = document.createElement("canvas");
		try {
			c.width = 1;
			c.height = 1;
			c.toDataURL("image/gif");
			return true;
		} catch(e) { }
		return false;
	})(),
	canImportTiff: (function() {
		return !$.browser.mozilla;
	})(),
	sampleImages: [
		{ src: 'styles/icons/comments.png', extra: { nameNoExtension: 'comments', prettySize: '557.00 bytes' }, name: 'comments.png', type: 'image/png' },
		{ src: 'styles/icons/group.png', extra: { nameNoExtension: 'group', prettySize: '753.00 bytes' }, name: 'group.png', type: 'image/png' },
		{ src: 'styles/icons/help.png', extra: { nameNoExtension: 'help', prettySize: '786.00 bytes' }, name: 'help.png', type: 'image/png' },
		{ src: 'styles/icons/delete.png', extra: { nameNoExtension: 'delete', prettySize: '715.00 bytes' }, name: 'delete.png', type: 'image/png' },
		{ src: 'styles/icons/computer_add.png', extra: { nameNoExtension: 'computer_add', prettySize: '781.00 bytes' }, name: 'help.png', type: 'image/png' }
	]
};

var resultCanvas = document.createElement("canvas"),
	resultBase64,
	loadingfiles = 0;

var templates = {
	'loadedImage': '<li class="clearfix"><div class="controls"><span class="remove">✖</span></div><canvas></canvas><span class="name">${name}</span><input class="hide" value="${extra.nameNoExtension}" /> <span class="details"><strong>type:</strong> ${type} | <strong>size:</strong> ${extra.prettySize}</span>',
	'fileNotImage': '<li><div class="controls"><span class="remove">✖</span></div>The file "${name}" is not identified as an image.  It\'s type is: ${type || "unknown"}.  Skipping the file.  If you think this is in error, please leave <a href="feedback/" target="_blank" class="normal">feedback</a> telling me what happened.</li>',
	'fileTooBig': '<li><div class="controls"><span class="remove">✖</span></div>The file "${name}" is too big (${extra.prettySize}).  Spriting work best with small images (like icons or buttons).</li>',
	'duplicate': 'You have two images with the same name (${name}).  The class names are automatically generated based on your file name (but you can change them later).  It will be easier if you get rid of any duplicate images.'
};

var templateHelpers = {
	loadedImage: function(canvas, file) {
		var tmpl = $.tmpl( "loadedImage", file );
		
		// generate thumbnail, show in list
        var ratio = 1, 
        	maxWidth = settings.thumbnailWidth, 
        	maxHeight = settings.thumbnailHeight;
        	thumbnailCanvas = tmpl.find("canvas")[0],
        	thumbnailContext = thumbnailCanvas.getContext("2d");

        if(canvas.width > settings.thumbnailWidth) {
            ratio = maxWidth / canvas.width;
        }
        else if(canvas.height > maxHeight) {
            ratio = maxHeight / canvas.height;
		}
		
		// only allow letters, numbers, dashes, and underscores in the selector
		// should this come through in the FileReaderJS extra prop?
		canvas.fileName = file.extra.nameNoExtension.replace(/[^_a-zA-Z0-9-]/g, '');
		thumbnailCanvas.originalCanvas = canvas;
        thumbnailCanvas.width = canvas.width * ratio;
        thumbnailCanvas.height = canvas.height * ratio;
        
        thumbnailContext.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, thumbnailCanvas.width, thumbnailCanvas.height);
        
        return tmpl;
	}
};

sprite.shrinkdropbox = function() {
	elements.dropbox.removeClass("full").removeAttr("style");
	elements.spriteContainer.addClass("active");
	elements.intro.slideUp();
};

sprite.loadimage = function(src, file) {
	var img = document.createElement("img");
	
	img.onload = function() {
		var canvas = document.createElement("canvas"),
	    	ctx = canvas.getContext('2d');
	    
	    canvas.width = img.width;
	    canvas.height = img.height;
	    ctx.drawImage(img, 0, 0);
	    
	    elements.addedFiles.append(templateHelpers.loadedImage(canvas, file));
	    
	    $(img).remove();
	    
	    delay(sprite.sortthumbnails, 100);
	    delay(sprite.mergefiles, 100);
	};
	
	sprite.shrinkdropbox();
	img.src = src;
	elements.imageload.append(img);
};

sprite.fileReaderOpts = {
	dragClass: 'drag',
	on: {
		load: function(e, file) {
			sprite.loadimage(e.target.result, file);
		},
		loadstart: function(e, file) {
			loadingfiles++;
		},
		loadend: function(e, file) {
			loadingfiles--;
		},
		beforestart: function(file) {
		
			var cantLoad = !settings.canImportTiff && file.type == 'image/tiff';
			if (cantLoad) {
				alert("Your browser does not support loading files of type: " + file.type);
			}
			
			if (!file.type.match(new RegExp("image/*")) || cantLoad) {
				elements.fileWarnings.append($.tmpl( "fileNotImage", file ));
				return false;
			}
			if (file.size > settings.maxImageSize) {
				elements.fileWarnings.append($.tmpl( "fileTooBig", file ));
				return false;
			}
		},
		progress: function(e) {
			//log("progress", e)
		},
		error: function() {
		<commit_msg>add in simple view for FileReader error handling<commit_after>
(function(sprite, document, window, undefined) {
	
var elements = sprite.elements = {
	fileInput: '#fileInput',
	fileInputShortcut: '#fileInputShortcut',
	fileSamples: '#fileSamples',
	dropbox: '#source',
	spriteContainer: '#sprite',
	fileContainer: '#files',
	addedFiles: '#added-files',
	fileWarnings: '#file-warnings',
	imageload: '#imageload',
	exportCss: '#exportCss',
	exportHtml: '#exportHtml',
	exportImageNewWindow: '#openInNewWindow',
	preview: '#preview',
	result: '#result',
	cssTemplateInputs: '#css-template input',
	classPrefix: '#class-prefix',
	spriteClassName: '#sprite-classname',
	filenameMatch: '#filename-match',
	classSuffix: '#class-suffix',
	cssPrefix: '#css-prefix',
	options: '#options',
	optionOffset: '#offset',
	optionDirection: ':radio[name=direction]',
	optionExport: ':radio[name=export]',
	sections: 'section',
	app: '#app',
	noapp: '#noapp',
	progress: '#progress',
	intro: '#intro'
};

var settings = sprite.settings = {
	enabled: (function() {
		return FileReaderJS.enabled;
	})(),
	thumbnailWidth: 20,
	thumbnailHeight: 20,
	maxImageSize: 512000,
	canExportGif: (function() {
		var c = document.createElement("canvas");
		try {
			c.width = 1;
			c.height = 1;
			c.toDataURL("image/gif");
			return true;
		} catch(e) { }
		return false;
	})(),
	canImportTiff: (function() {
		return !$.browser.mozilla;
	})(),
	sampleImages: [
		{ src: 'styles/icons/comments.png', extra: { nameNoExtension: 'comments', prettySize: '557.00 bytes' }, name: 'comments.png', type: 'image/png' },
		{ src: 'styles/icons/group.png', extra: { nameNoExtension: 'group', prettySize: '753.00 bytes' }, name: 'group.png', type: 'image/png' },
		{ src: 'styles/icons/help.png', extra: { nameNoExtension: 'help', prettySize: '786.00 bytes' }, name: 'help.png', type: 'image/png' },
		{ src: 'styles/icons/delete.png', extra: { nameNoExtension: 'delete', prettySize: '715.00 bytes' }, name: 'delete.png', type: 'image/png' },
		{ src: 'styles/icons/computer_add.png', extra: { nameNoExtension: 'computer_add', prettySize: '781.00 bytes' }, name: 'help.png', type: 'image/png' }
	]
};

var resultCanvas = document.createElement("canvas"),
	resultBase64,
	loadingfiles = 0;

var templates = {
	'loadedImage': '<li class="clearfix"><div class="controls"><span class="remove">✖</span></div><canvas></canvas><span class="name">${name}</span><input class="hide" value="${extra.nameNoExtension}" /> <span class="details"><strong>type:</strong> ${type} | <strong>size:</strong> ${extra.prettySize}</span>',
	'fileNotImage': '<li><div class="controls"><span class="remove">✖</span></div>The file "${name}" is not identified as an image.  It\'s type is: ${type || "unknown"}.  Skipping the file.  If you think this is in error, please leave <a href="feedback/" target="_blank" class="normal">feedback</a> telling me what happened.</li>',
	'fileLoadError': '<li><div class="controls"><span class="remove">✖</span></div>Error loading file</li>',
	'fileTooBig': '<li><div class="controls"><span class="remove">✖</span></div>The file "${name}" is too big (${extra.prettySize}).  Spriting work best with small images (like icons or buttons).</li>',
	'duplicate': 'You have two images with the same name (${name}).  The class names are automatically generated based on your file name (but you can change them later).  It will be easier if you get rid of any duplicate images.'
};

var templateHelpers = {
	loadedImage: function(canvas, file) {
		var tmpl = $.tmpl( "loadedImage", file );
		
		// generate thumbnail, show in list
        var ratio = 1, 
        	maxWidth = settings.thumbnailWidth, 
        	maxHeight = settings.thumbnailHeight;
        	thumbnailCanvas = tmpl.find("canvas")[0],
        	thumbnailContext = thumbnailCanvas.getContext("2d");

        if(canvas.width > settings.thumbnailWidth) {
            ratio = maxWidth / canvas.width;
        }
        else if(canvas.height > maxHeight) {
            ratio = maxHeight / canvas.height;
		}
		
		// only allow letters, numbers, dashes, and underscores in the selector
		// should this come through in the FileReaderJS extra prop?
		canvas.fileName = file.extra.nameNoExtension.replace(/[^_a-zA-Z0-9-]/g, '');
		thumbnailCanvas.originalCanvas = canvas;
        thumbnailCanvas.width = canvas.width * ratio;
        thumbnailCanvas.height = canvas.height * ratio;
        
        thumbnailContext.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, thumbnailCanvas.width, thumbnailCanvas.height);
        
        return tmpl;
	}
};

sprite.shrinkdropbox = function() {
	elements.dropbox.removeClass("full").removeAttr("style");
	elements.spriteContainer.addClass("active");
	elements.intro.slideUp();
};

sprite.loadimage = function(src, file) {
	var img = document.createElement("img");
	
	img.onload = function() {
		var canvas = document.createElement("canvas"),
	    	ctx = canvas.getContext('2d');
	    
	    canvas.width = img.width;
	    canvas.height = img.height;
	    ctx.drawImage(img, 0, 0);
	    
	    elements.addedFiles.append(templateHelpers.loadedImage(canvas, file));
	    
	    $(img).remove();
	    
	    delay(sprite.sortthumbnails, 100);
	    delay(sprite.mergefiles, 100);
	};
	
	sprite.shrinkdropbox();
	img.src = src;
	elements.imageload.append(img);
};

sprite.fileReaderOpts = {
	dragClass: 'drag',
	on: {
		load: function(e, file) {
			sprite.loadimage(e.target.result, file);
		},
		loadstart: function(e, file) {
			loadingfiles++;
		},
		loadend: function(e, file) {
			loadingfiles--;
		},
		beforestart: function(file) {
		
			var cantLoad = !settings.canImportTiff && file.type == 'image/tiff';
			if (cantLoad) {
				alert("Your browser does not support loading files of type: " + file.type);
			}
			
			if (!file.type.match(new RegExp("image/*")) || cantLoad) {
				elements.fileWarnings.append($.tmpl( "fileNotImage", file ));
				return false;
			}
			if (file.size > settings.maxImageSize) {
				elements.fileWarnings.append($.tmpl( "fileTooBig", file ));
				return false;
			}
		},
		progress: function(e) {
			//log("progress", e)
		},
		error: function(e) {
			elements.fileWarnings.append($.tmpl( "fileLoadError", e ));
{'fraction_non_alphanumeric': 0.16901639344262295, 'fraction_numerical': 0.009508196721311476, 'mean_word_length': 4.1459299873471105, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 75, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3194455', 'n_tokens_mistral': 4235, 'n_tokens_neox': 3925, 'n_words': 916}