conord/Kaplan.html

## Kaplan.html
<!DOCTYPE html>
<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" />

	<script type="text/javascript">

		if (typeof Object.create !== 'function') {
		    Object.create = function (o) {
		        function F() {}
		        F.prototype = o;
		        return new F();
		    };
		}

		// setup the base class
		var base = {

			init : function(parent,text,data) {


				this.parent 		= parent;
				this.text 			= text;
				this.data 			= data;


				this.createContainer();
				this.createHeader();
				this.createList();

				return this;

			},

			createContainer : function() {
				$('body').append('<div id="' + this.parent + '" class="list-container ui-widget ui-reset"></div>');
				return this;
			},

			createHeader : function() {
			 	$('#'+this.parent).append('<h1>'+this.text+'</div>');
			 	return this;
			},

			createList : function() {
				$('#'+this.parent).append('<ul></ul>');

				for(i=0; i<this.data.length; i++) {

					var entry = this.data[i];

					var completed_class 	= (entry.completed == true) ? 'completed' : '';
					var description_class	= (true === this.description) ? 'description' : '';


					$item = $('<li class="list-item '+completed_class + ' '+ description_class +'" data-index="'+i+'">'+entry.name+'</li>');

					var parent = $('#'+this.parent).find('ul')[0];
					$(parent).append($item);

				};
					return this;
			},

			toggleComplete : function(ele) {
				if ($(ele).hasClass('completed')) {
					$(ele).removeClass('completed');
				} else {
					$(ele).addClass('completed');
				}
				return this;
			},

			setEvents : function() {
				$('.list-item').unbind('click');
				$('.list-item').on('click',function(e) {
					base.toggleComplete($(this));
				});
				return this;
			},

			_cleanUp : function() {
				this.parent = '';
				this.text = '';
				this.data = '';
				return this;
			}
	};

	// secondary class
	var toDo = 	 {

			addHref : function() {
				var elements = $('#'+this.parent).find('li');

				$(elements).each(function(index,item) {
					var text = $(item).text();
					$(item).text('');
					$(item).append('<a href="#">'+text+'</a>');
				});
				return this;
			},

			setToggle : function() {
				$('.description > a').on('click',function(e) {
					toDo.toggleDescription($(this));
				});
				return this;
			},


			toggleDescription : function(ele) {
				var parent 		= $(ele).parent();
				var index 		= $(parent).data('index');
				var description = taskData[index].description;


				var close = $('<div />').html(description+'<hr>').append(
					$('<span class="ui-button-text" style="float:right;">Close</span>').button().click(function() {
						if (dialog) {
							dialog.dialog('close');
						}
					}));


				var dialog = $('<div/>').append(close).dialog({
					autoOpen : true,
					title: taskData[index].name
				});


				return this;

			},

	};

// create the lists on page load
$('document').ready(function() {
		var baseObj = Object.create(base);

		baseObj.init('holiday','Christmas List',holidayData).setEvents();

		var toDoObj = Object.create(toDo);
		var combinedObj = $.extend(baseObj,toDoObj);

		combinedObj.description = true;
		combinedObj.init('todo','To-Do List',taskData).addHref().setToggle().setEvents();

	});


var taskData = [
    {
        name: 'Buy Groceries',
        description: 'Go to the store and get some milk and peanut butter for the children.',
        completed: true
    },
    {
        name: 'Pick up the Kids',
        description: 'Drop by the middle school and pick up the children.',
        completed: true
    },
    {
        name: 'Change the Car Oil',
        description: 'The SUV needs an oil change. Rotate the tires as well.',
        completed: false
    },
    {
        name: 'Attend a Company Gathering',
        description: 'The company is meeting up at 8:00 PM to discuss the new contract.',
        completed: false
    },
    {
        name: 'Meet up for Dinner',
        description: 'Meet up with the wife around 9:00 PM for some late dinner. Bring a flower.',
        completed: false
    }
];

var holidayData = [
    {
        name: 'John Klide',
        completed: true
    },
    {
        name: 'Joe Simpson',
        completed: false
    },
    {
        name: 'Anna Montanna',
        completed: true
    },
    {
        name: 'Teddy Barry',
        completed: true
    },
    {
        name: 'Allan Johnson',
        completed: false
    }
];
</script>

<style type="text/css">
body {
	font-size:12px;
	line-height:14px;
}
div.list-container {
	border:1px solid #aaa;
	padding:0;
	margin:30px 0;
	width:300px;
}
div.list-container h1 {
	padding:0 0 0 15px;
	margin:0;
	line-height:38px;
	border-collapse: collapse;
	border-bottom:1px solid #aaa;
	font-size:18px;
	background-image: -moz-linear-gradient(top, #FFFFFF 0%, #D6D6D6 100%);
	background-image: -o-linear-gradient(top, #FFFFFF 0%, #D6D6D6 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #D6D6D6));
	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #D6D6D6 100%);
	background-image: linear-gradient(to bottom, #FFFFFF 0%, #D6D6D6 100%);
}

div.list-container ul {
	list-style-type:none;
	padding:0;
	margin:10px 0 0px 8px;
}
div.list-container li {
	list-style-type:none;
	padding:5px 0 5px 25px;
	background:url(https://uploads.interviewstreet.com/questions/50944fdb8c965b898.png) no-repeat 0px -13px;
	border-collapse:collapse;
	border-bottom:1px solid #f2eded;
}
div.list-container li:last {
	border:none;
}
div.list-container li:hover {
	background-color:#f9f9f9;
}
div.list-container li.incomplete {

}
div.list-container ul li.completed {
	background:url(https://uploads.interviewstreet.com/questions/50944fdb8c965b898.png)  no-repeat 0 6px;
}

div.list-container ul li a, div.list-container ul li a:visited {
	color:#0754c8;
}
</style>

</head>

<body>

	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" />

	<script type="text/javascript">

	if (typeof Object.create !== 'function') {
	Object.create = function (o) {
	function F() {}
	F.prototype = o;
	return new F();
	};
	}

	// setup the base class
	var base = {

	init : function(parent,text,data) {


	this.parent = parent;
	this.text = text;
	this.data = data;


	this.createContainer();
	this.createHeader();
	this.createList();

	return this;

	},

	createContainer : function() {
	$('body').append('<div id="' + this.parent + '" class="list-container ui-widget ui-reset"></div>');
	return this;
	},

	createHeader : function() {
	$('#'+this.parent).append('<h1>'+this.text+'</div>');
	return this;
	},

	createList : function() {
	$('#'+this.parent).append('<ul></ul>');

	for(i=0; i<this.data.length; i++) {

	var entry = this.data[i];

	var completed_class = (entry.completed == true) ? 'completed' : '';
	var description_class = (true === this.description) ? 'description' : '';


	$item = $('<li class="list-item '+completed_class + ' '+ description_class +'" data-index="'+i+'">'+entry.name+'</li>');

	var parent = $('#'+this.parent).find('ul')[0];
	$(parent).append($item);

	};
	return this;
	},

	toggleComplete : function(ele) {
	if ($(ele).hasClass('completed')) {
	$(ele).removeClass('completed');
	} else {
	$(ele).addClass('completed');
	}
	return this;
	},

	setEvents : function() {
	$('.list-item').unbind('click');
	$('.list-item').on('click',function(e) {
	base.toggleComplete($(this));
	});
	return this;
	},

	_cleanUp : function() {
	this.parent = '';
	this.text = '';
	this.data = '';
	return this;
	}
	};

	// secondary class
	var toDo = {

	addHref : function() {
	var elements = $('#'+this.parent).find('li');

	$(elements).each(function(index,item) {
	var text = $(item).text();
	$(item).text('');
	$(item).append('<a href="#">'+text+'</a>');
	});
	return this;
	},

	setToggle : function() {
	$('.description > a').on('click',function(e) {
	toDo.toggleDescription($(this));
	});
	return this;
	},


	toggleDescription : function(ele) {
	var parent = $(ele).parent();
	var index = $(parent).data('index');
	var description = taskData[index].description;


	var close = $('<div />').html(description+'<hr>').append(
	$('<span class="ui-button-text" style="float:right;">Close</span>').button().click(function() {
	if (dialog) {
	dialog.dialog('close');
	}
	}));


	var dialog = $('<div/>').append(close).dialog({
	autoOpen : true,
	title: taskData[index].name
	});


	return this;

	},

	};

	// create the lists on page load
	$('document').ready(function() {
	var baseObj = Object.create(base);

	baseObj.init('holiday','Christmas List',holidayData).setEvents();

	var toDoObj = Object.create(toDo);
	var combinedObj = $.extend(baseObj,toDoObj);

	combinedObj.description = true;
	combinedObj.init('todo','To-Do List',taskData).addHref().setToggle().setEvents();

	});



	var taskData = [
	{
	name: 'Buy Groceries',
	description: 'Go to the store and get some milk and peanut butter for the children.',
	completed: true
	},
	{
	name: 'Pick up the Kids',
	description: 'Drop by the middle school and pick up the children.',
	completed: true
	},
	{
	name: 'Change the Car Oil',
	description: 'The SUV needs an oil change. Rotate the tires as well.',
	completed: false
	},
	{
	name: 'Attend a Company Gathering',
	description: 'The company is meeting up at 8:00 PM to discuss the new contract.',
	completed: false
	},
	{
	name: 'Meet up for Dinner',
	description: 'Meet up with the wife around 9:00 PM for some late dinner. Bring a flower.',
	completed: false
	}
	];

	var holidayData = [
	{
	name: 'John Klide',
	completed: true
	},
	{
	name: 'Joe Simpson',
	completed: false
	},
	{
	name: 'Anna Montanna',
	completed: true
	},
	{
	name: 'Teddy Barry',
	completed: true
	},
	{
	name: 'Allan Johnson',
	completed: false
	}
	];
	</script>

	<style type="text/css">
	body {
	font-size:12px;
	line-height:14px;
	}
	div.list-container {
	border:1px solid #aaa;
	padding:0;
	margin:30px 0;
	width:300px;
	}
	div.list-container h1 {
	padding:0 0 0 15px;
	margin:0;
	line-height:38px;
	border-collapse: collapse;
	border-bottom:1px solid #aaa;
	font-size:18px;
	background-image: -moz-linear-gradient(top, #FFFFFF 0%, #D6D6D6 100%);
	background-image: -o-linear-gradient(top, #FFFFFF 0%, #D6D6D6 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #D6D6D6));
	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #D6D6D6 100%);
	background-image: linear-gradient(to bottom, #FFFFFF 0%, #D6D6D6 100%);
	}

	div.list-container ul {
	list-style-type:none;
	padding:0;
	margin:10px 0 0px 8px;
	}
	div.list-container li {
	list-style-type:none;
	padding:5px 0 5px 25px;
	background:url(https://uploads.interviewstreet.com/questions/50944fdb8c965b898.png) no-repeat 0px -13px;
	border-collapse:collapse;
	border-bottom:1px solid #f2eded;
	}
	div.list-container li:last {
	border:none;
	}
	div.list-container li:hover {
	background-color:#f9f9f9;
	}
	div.list-container li.incomplete {

	}
	div.list-container ul li.completed {
	background:url(https://uploads.interviewstreet.com/questions/50944fdb8c965b898.png) no-repeat 0 6px;
	}

	div.list-container ul li a, div.list-container ul li a:visited {
	color:#0754c8;
	}
	</style>

	</head>

	<body>

	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
	</body>
	</html>