ninja_cat.js

$(document).ready(function(){
	$('#images_list').sortable().on('click', 'img', function(event) {
		var target = $(this), src = target.attr('src');
		target.attr('src', /cat/.test(src) ? src.replace('cat', 'ninja') : src.replace('ninja', 'cat'));
	});
    /* 	line 1: sortable() is for the pictures to be dragged from one position to the other; and a trigger when the image is clicked
    	line 2: assigning values to variables target and src to make line 3 less confusing and short
    	line 3: short cut form of if/else statement
    		considering that the image file names used is cat1.jpg,cat2.jpg.. and respective partner picture file names are ninja1.jpg, ninja2.jpg..
    		when the image is clicked...
    		if the src attribute of #image_list (which is the img tag) has /cat/ string/word on it
    		then the src string/word which has a value of 'cat' will be replaced with 'ninja' (cat1.jpg will be replaced with ninja1.jpg)
    		else the src string/word which has a value of 'ninja' will be replaced with 'cat'
    */
});