$(function(){
	
	// this part of the code deals with modal msg window.
	$("#modalmsg").showModalBox();
	
	$("#modal_ok").click(function(){
		$("#modalmsg").removeModalBox();
	});
	
	
	
	
	
	// this part of the code deals with the Ghost Boxes seen on the dashboard..
	
	$(".ghost").each(function(index){
		
		$(this).ghostBox(true);
	});

	
	
	
	// this part is for enabling or disabling table of input field via checkbox.
	$(".enable_disable").each(function(){
		
		if($.browser.msie){
			chk_id = this.id;			
		}else{
			chk_id = $(this).find("input:first-child").attr("id");			
		}
		EnableDisable(chk_id);		
	});	
	
});

function hey(this_id){
	alert("hey: " + this_id);
}

function EnableDisable(chk_id){
	/* RULE: for making this work a checkbox needs to have a onclick handler set to EnableDisable("checkbox_id") and a class named 'enable_disable'. 
	 * then it will be able to activate or deactive the immediate follwing table. this could be achieved by adding a parameter 'enable_disable'=>1 
	 * upon the creation of the checkbox. and the whole table needs to
	 * be under a div which should have a class called "fade_area".
	 */
	div = $("#" + chk_id).parent().parent().find("div.fade_area");
	
	chkbox = $("#" + chk_id);
	
	if( !chkbox.is(':checked')){
		div.ghostBox(true);
	}else{
		div.ghostBox(false);
	}
}



jQuery.fn.ghostBox = function (fade_visible){

	if(fade_visible){
		$(this).css("position", "relative").css("opacity", 0.3);
		var winW 	= $(this).width();
		var winH 	= $(this).height();
		
		var fade = $("<div class='fade'></div>");
		fade.css("position", "absolute").css("top",0).css("left", 0).css("height", winH).css("width", winW ).css("z-index", 9999).css("opacity", 0.5);
		$(this).append(fade);
	}else{
		$(this).css("opacity", "1");
		$(this).find(".fade").remove();
	}
}




////////////////////////////////// Modal Box Function ///////////////////////////////////////////////////////
jQuery.fn.showModalBox = function(){
	// Making the MaskBox for the modal box//////////
	if($(this).size() == 0){
		return false;	// no object has been found so nothing is done.
	}
	var mask 	= $("<div id='mask'></div>");
	var winW 	= $(window).width();
	var winH 	= $(window).height();
	mask.css("position", "absolute").css("background-color", "#000").css("top",0).css("left", 0).css("height", winH).css("width", winW ).css("z-index", 9999).css("opacity", 0.4).css("display", "none");
	
	
	
	
	//cloning the THIS Object and then removing it.......
	$(this).addClass("jquery_modal");
	var div_id = $(this).attr("id");
	var div_modal = $(this).clone();
	$(this).remove();
	
	w = div_modal.css("width") == "" ? "auto" : div_modal.css("width");
	h = div_modal.css("height") == "" ? "auto" : div_modal.css("height");
	

	
	div_modal.css("width", w).css("height", h).css("background", "url(images/new/modal_background.png) repeat-x top center").css("background-color", "#d8d8d8").css("display", "none").css("position", "absolute").css("z-index", 9999).css("padding","0 10px").css("border", "2px solid #fff").css({"-moz-border-radius": "15px", "-webkit-border-radius": "15px", "border-radius": "15px", "-moz-box-shadow": "5px 5px 5px #333333", "-webkit-box-shadow": "5px 5px 5px #333333", "box-shadow": "5px 5px 5px #333333"});
	var modalL 	= winW / 2;
	var modalT 	= winH / 2;

	
	
	
	
	//appending and showing all the divs...
	$("body").append(mask);
	$("body").append(div_modal);
	$("#mask").fadeIn(500);
	$("#" + div_id).fadeIn(500);
	
	//putting the div in the middle
	var modalW	= $("#" + div_id).width();
	var modalH	= $("#" + div_id).height();
	modalL		= parseInt(modalL - (modalW / 2)) + "px";
	modalT		= parseInt(modalT - (modalH / 2)) + "px";
	$("#" + div_id).css("top", modalT).css("left", modalL);
	dojo.parser.parse(dojo.byId(div_id));
	$("#" + div_id).move();
}



///// Removing Any Modal Box ////////////////////
jQuery.fn.removeModalBox = function( callback_function ){
	$(this).fadeOut(500);
	$("#mask").fadeOut(500, function(){
		$("#mask").remove();
		if( typeof(callback_function) != 'undefined' ){
			callback_function();
		}
	});
}







////////// Some Other Common Function /////////



// this function is to select a value for a SELECT TAG.
jQuery.fn.select = function( select ){
	
	this_id = $(this).attr("id");
	
	$("#" + this_id + " option").removeAttr("selected");
	//$("#" + this_id + 'option[value=" + training_type + "]').attr("selected", "selected"); this is supposed to work.. but somereason this doesnt.. so i changed to the following way....
	$("#" + this_id + " option[value=" + select + "]").attr("current","selected");

	var list_html 	= $("#" + this_id).html();
	list_html 		= list_html.replace(new RegExp( "current", "g" ), "selected");
	$("#" + this_id).html(list_html);
}








///////////// This Function Makes Any Window Move /////////////////////////

jQuery.fn.move = function(){

	//getting id, height, width and src....
	var this_id		= $(this).attr("id");	



	//setting all the variables....
	mouseState = "up";
	mouseX		= 0;
	mouseY		= 0;
	startX		= 0;
	startY		= 0;
	sTop		= 0;
	sLeft		= 0;
	

	$("#" + this_id).mousedown(function(e){	
		mouseState 	= (mouseState == 'up') ? "down" : mouseState;
		startX 		= e.pageX;
		startY 		= e.pageY;
		sTop		= parseInt($("#" + this_id).css("top"));
		sLeft		= parseInt($("#" + this_id).css("left"))

		$(document).css("cursor", "move");		
				
	});
	
	
	// put nodragg class on object which should not be dragble
	$("#" + this_id + " input, #" + this_id + " textarea, #" + this_id + " button, .nodrag").mousedown(function(e){
		mouseState = "ontextbox";
	});
	
	$(document).mousemove(function(e){
		
		if(mouseState == "down"){
			
			//rettriving values.....
			mouseX 	= e.pageX;
			mouseY 	= e.pageY;
			
			
			//calculating values....
			disX	= mouseX - startX;
			disY	= mouseY - startY;
			
			currX 	= sLeft + disX;
			currY 	= sTop + disY;
			
			$("#" + this_id).css("top", parseInt(currY) + "px").css("left", parseInt(currX) + "px");

			
		}
	});

	$(document).mouseup(function(){
		mouseState	= "up";
		$("#" + this_id).css("cursor", "default");
	});

}