function addCloseAndMinIcons(box) {
	var icons = new Array(
			"<a href='#' class='btn btn-minimize btn-round'><i class='icon-chevron-up'></i></a>",
			"<a href='#'class='btn btn-close btn-round'><i class='icon-remove'></i></a>");
	addBoxIcons(box,icons);
}
function addId(box, id) {
	box.attr("id", id);
	return box;
}
function addBoxIcons(box, boxIcons) {
	var boxHeader = box.children('.box-header');
	for ( var i = 0; i < boxIcons.length; i++) {
		boxHeader.children('.box-icon').append(boxIcons[i]);
		boxHeader.children('.box-icon').append("  ");
	}
}
function createBox(size, title) {
	var box = $("<div class='box'></div>");
	size = 'span' + size;
	box.addClass(size);
	box.addClass("center");
	var boxHeader = $("<div class='box-header well'><h2>"
			+ "<i class='icon-th'></i></h2><div class='box-icon'>"
			+ "</div></div>");
	boxHeader.children("h2").text(title);
	box.append(boxHeader);
	var boxContent = $("<div class='box-content'></div>");
	box.append(boxContent);
	return box;
}
function createTable(id, tableClass, model) {
	var table = $("<table></table>");
	table.attr("id", id);
	table.addClass(tableClass);
	table.append(createTableHead(model));
	return table;
}
function createTableHead(model) {
	var thead = $("<thead></thead>");
	var tr = $("<tr></tr>");
	for ( var i = 0; i < model.length; i++) {
		tr.append("<th>" + model[i] + "</th>");
	}
	thead.append(tr);
	return thead;
}
function createUl(ulClass) {
	var ul = $("<ul></ul>");
	ul.addClass(ulClass);
	return ul;
};

// will be unused
function createLi(tagTxt, txt, txtColor, iconClass) {
	var a = $("<a ></a>");
	var li = $("<li></li>");
	var i = $("<i ></i>");
	i.addClass(iconClass);
	a.append(i);
	var span = $("<span></span>");
	span.addClass(txtColor);
	span.text(tagTxt);
	a.append(span);
	a.append(txt);
	li.append(a);
	return li;
}
function setTable(table) {
	table
			.dataTable({
				"sDom" : "<'row-fluid'<'span6'l>>t<'row-fluid'<'span12 center'p>>",
				"sPaginationType" : "bootstrap",
				"oLanguage" : {
					"sLengthMenu" : "_MENU_ records per page"
				}
			});
}

function createAddIcon(id) {
	var btn =$( "<a href='#' class='btn btn-minimize btn-round'><i"
			+ " class='icon-plus'></i></a>");
	btn.attr("id",id);
	return btn;
}
function createDelIcon(id) {
	var btn =$( "<a href='#' class='btn btn-minimize btn-round'><i"
			+ " class='icon-minus'></i></a>");
	btn.attr("id",id);
	return btn;
}
function createChartBox(id, size, title) {

	var box = createBox(size, title);
	var boxIcons = new Array(createAddIcon("addBtn"), createDelIcon("delBtn"));
	addId(box, id);
	addBoxIcons(box, boxIcons);
	addCloseAndMinIcons(box);
	$("body").children('.container-fluid').append(createModal(id+"AddModal","Add Graph"));
	$("body").children('.container-fluid').append(createModal(id+"DelModal","Delete Graph"));
	return box;
}
function createSelect(options) {
	var select = $("<select ></select>");
	select.addClass("form-control");
	for ( var i = 0; i < options.length; i++) {
		var option = $("<option></option>");
		option.text(options[i]);
		select.append(option);
	}
	return select;
}
function createSingleList(text,options) {
	var div=$("<div></div>");
	div.addClass("control-group");
	var lable=$("<lable></lable>");
	lable.addClass("control-label");
	lable.text(text);
	var divContent=$("<div></div>");
	divContent.addClass("controls");
	divContent.append(createSelect(options));
	div.append(lable);
	div.append(divContent);
	return div;
}

function createModal(id,title) {
	var mainDiv = $("<div></div>");
	mainDiv.addClass("modal hide fade");
	mainDiv.attr("id", id);
	mainDiv.append(createModalHeader());
	mainDiv.append(createModalBody());
	mainDiv.append(createModalFooter);
	setModalTitle(mainDiv,title);
	return mainDiv;
}
function createModalHeader() {
	var header = $("<div></div>");
	header.addClass("modal-header");
	var closeButton = $("<button type='button' class='close' data-dismiss='modal'>x</button>");
	header.append(closeButton);
	var h = $("<h3></h3>");
	header.append(h);
	return header;
}
function createModalBody() {
	var div = $("<div></div>");
	div.addClass("modal-body");
	return div;
}
function createModalFooter() {
	var div = $("<div></div>");
	div.addClass("modal-footer");
	div.append(createModalButton("ok"));
	div.append(createModalButton("cancel"));
	return div;
}
function createModalButton(text) {
	var button = $("<button></button>");
	button.attr("id",text);
	button.attr("type", "button");
	button.addClass("btn btn-primary");
	button.attr("data-dismiss", "modal");
	button.text(text);
	return button;
}
function setModalTitle(modal,title){
	var header=modal.children(".modal-header").children("h3");
	header.text(title);
}