//global constants
//used for adjusting the # of sets
var MAX_SETS = 10;
var MIN_SETS = 1;
var setsDisplay = $('setsValue');
var setsHiddenValue = $('s');
	
var TOTAL_EXERCISES = 0;
	
	

function muscleListTransistion(parentElement,mainElement)
{
	var	effectDuration 			= ".25";//duration of the transition
	var selectedParentClass 	= "activeMuscleGroup";//the class applied to the muscle group whose muscles are visible (ex, arms)
	var visibleClass 			= "visibleMuscleGroup";//the class applied to the muscle group muscles that are visible (ex, biceps, triceps)
	var visibleElementsArray	= document.getElementsByClassName(visibleClass);//get an array of elements that have the class (visibleClass)
	var selectedParentArray 	= document.getElementsByClassName(selectedParentClass);//get an array of elements that have the class (selectedParentClass)

	
	if(selectedParentArray.length > 0)
	{
		var selectedParent = selectedParentArray[0];//there should only be one element, the selected parent

		if(selectedParent == parentElement)
		{
			return;//we clicked the active muscle group so do nothing
		}
		else
		{
			var visibleElement = visibleElementsArray[0];//get the first element (there should only be one)
			visibleElement.removeClassName(visibleClass);//the currently visible element will become 'not visible'
            selectedParent.removeClassName(selectedParentClass);//the currently active muscle group will become 'not active'
			mainElement.addClassName(visibleClass);//attach the class to say these muscles are now visible
			parentElement.addClassName(selectedParentClass);//attach the class to say this muscle group is now visible
			Effect.toggle(mainElement, 'BLIND',{duration:effectDuration,queue: 'end'});//show the muscles in the muscle group
            Effect.toggle(visibleElement, 'BLIND',{duration:effectDuration, queue: 'front'});//hide the currently visible element			
		}
	}
	else//no muslces groups have been selected yet
	{
			mainElement.addClassName(visibleClass);//attach the class to say these muscles are now visible
			parentElement.addClassName(selectedParentClass);//attach the class to say this muscle group is now visible
			Effect.toggle(mainElement, 'BLIND',{duration:effectDuration,queue: 'end'});//show the muscles in the muscle group
	}
}

//#########################################################################################

function updateExercises(ele,m)
{
    var effectDuration = 0.5;                   //duration of the effect
	var loadingEle = $('loading_exercises');
    var url = "get_exercise_list.php?m=" + m;   //submit url
    var selectedMuscleClass = "activeMuscle";   //class attached to the active muscle
    var selectedMuscleArray = document.getElementsByClassName(selectedMuscleClass);//get an array of elements that have the class (selectedMuscleClass)
    var activeMuscleElement = selectedMuscleArray[0];
    
    if(activeMuscleElement == ele)
    {
        return;//the active muscle was clicked
    }
    	
    if(selectedMuscleArray.length > 0)
    {
        activeMuscleElement.removeClassName(selectedMuscleClass);
    }
    
	loadingEle.setStyle({visibility:'visible'});	//show the loading indicator
    ele.addClassName(selectedMuscleClass);
	updateMuscleImage(m);
    Effect.BlindUp("exercise_list",{    //blind the effect_list up
        duration:effectDuration,
        queue: 'front',
        afterFinish: function(element)  //once the blind up effect is done
        {   
            new Ajax.Request(url,{      //submit the muscle id
                method: 'get',
                onSuccess:function(transport)  //once the response is received
                {   
                    var exercises = $('exercise_list');
                    exercises.update(transport.responseText);   //update the exercise list
                    Effect.BlindDown("exercise_list",{
						duration:effectDuration,
						queue: 'end',
						afterFinish: function(element)
						{
							loadingEle.setStyle({visibility:'hidden'});	//hide the loading indicator
						}
					});//blind the list down
                    registerDraggablesByClass("draggable");     //register the exerises as draggable   
                }
            });
        }
    });
}

//#########################################################################################

function updateMuscleImage(m)
{
	var url = "get_picture.php?m=" + m;   //submit url
	var imageDiv = "muscleImage";
	var effectDuration = 0.5;

	Effect.Fade(imageDiv,{
		duration:effectDuration,
		//queue:'end',
		afterFinish:function(element)
		{
			new Ajax.Request(url,{
				method:'get',
				onSuccess:function(transport)
				{
					var imageEle = $(imageDiv);
					imageEle.update(transport.responseText);
					Effect.Appear(imageDiv,
					{
						duration:effectDuration//,
						//queue:'end'
					});
				}
			});
		}
	});
}

//#########################################################################################

function registerDraggablesByClass(classname)
{
	var eles = document.getElementsByClassName(classname);
	for (var i = 0; i < eles.length; i++) {
		var d = new Draggable(eles[i],{revert: true,ghosting:false});
	}
}

//#########################################################################################

function addListItem(parentNode, listItem, inputName)
{
	var newListItem = Builder.node('li');							//create the new list item
	newListItem.innerHTML = listItem.innerHTML;						//copy the innerHTML
	//newListItem.className = "toDelete";								//set the class name so this can be deleted in the future
	var d = new Draggable(newListItem,{revert: true,ghosting: false, constraint:'vertical'});	//register the new list item as draggable
		
	var inputs = newListItem.getElementsByTagName('input');			//get an array of input elements. array length should be 1
	var originalInputElement = inputs[0];							//get the first (and only) input element
		
	var newInput = Builder.node('input',{type:'hidden',name:inputName,value:originalInputElement.value});//create a new input element (only the name changes)
        
	var delButton = Builder.node('div',{className:'deleteExercise', onclick:'removeExercise(this)'});
		
	newListItem.removeChild(originalInputElement);					//remove the original input element
	newListItem.appendChild(newInput);								//add the new input (with the fixed name) element 
    newListItem.appendChild(delButton);
        
	parentNode.appendChild(newListItem);							//add the new list item to the parent node
		
	//get the resize button and set its style
	var resizeEle = parentNode.parentNode.getElementsByClassName('resize');
	resizeEle[0].setStyle({display:'block'});

	TOTAL_EXERCISES++;
}

//#########################################################################################

function removeExercise(exercise)
{
    var exerciseLI = exercise.parentNode;
	var exerciseUL = exerciseLI.parentNode;
	exerciseUL.removeChild(exerciseLI);
	if(exerciseUL.innerHTML == "")
	{
		var resizeEle = exerciseUL.parentNode.getElementsByClassName("resize");
		resizeEle[0].setStyle({display:'none'});
	}
	TOTAL_EXERCISES--;
}

//#########################################################################################

function toggleResizeButton(ele)
{
	if(ele.hasClassName("shrink"))
	{
		ele.removeClassName("shrink");
		ele.addClassName("grow");
	}
	else
	{
		ele.removeClassName("grow");
		ele.addClassName("shrink");
	}	
}

//#########################################################################################

function toggleExerciseList(ele)
{
	toggleResizeButton(ele);

	var effectDuration = 0.25;
	new Effect.toggle(ele.nextSibling,'BLIND',{duration:effectDuration,transition:Effect.Transitions.linear});
//	alert(ele.previousSibling.parentNode);
}

//#########################################################################################

function toggleDay(ele, eleToToggle)
{
	toggleResizeButton(ele)
	var effectDuration = 0.25;
	new Effect.toggle(eleToToggle,'BLIND',{duration:effectDuration,transition:Effect.Transitions.linear});
}

//#########################################################################################

function increaseSets()
{
	var v = parseInt(setsHiddenValue.value);
	if((v+1) <= MAX_SETS)
	{
		setsHiddenValue.value = ++v;
		//alert(setsHiddenValue.value);
		setsDisplay.update(v);
	}
}

//#########################################################################################

function decreaseSets()
{
	var v = parseInt(setsHiddenValue.value);
	if((v-1) >= MIN_SETS)
	{
		setsHiddenValue.value = --v;
		setsDisplay.update(v);
	}
}

//#########################################################################################

function validateSubmit()
{
	if(TOTAL_EXERCISES <= 0)	
	{
		alert("You must add an exercise\nto generate a schedule");
		return false;
	}
	//loadSchedule();
	return true;
}

//#########################################################################################

function loadSchedule()
{
	var theForm = document.days;
	var inputs = theForm.getElementsByTagName("input");
	var qs = "?";
	alert(inputs.length);
	for(var i = 0; i < inputs.length; i++)
	{
		if(inputs[i].type == "hidden")	
		{
			qs += inputs[i].name + "=" + inputs[i].value + "&";	
		}
	}
	alert(qs);
}

function countLoadedExercises(ele)
{
	for(var i = 0; i < ele.childNodes.length; i++)
	{
		TOTAL_EXERCISES++;
	}
}

//#########################################################################################

window.onload = function()
{
    //register days of the week as sortable
 	Sortable.create('sundaylist',{tag:'li', dropOnEmpty:true});
	Sortable.create('mondaylist',{tag:'li', dropOnEmpty:true});
    Sortable.create('tuesdaylist',{tag:'li', dropOnEmpty:true});
	Sortable.create('wednesdaylist',{tag:'li', dropOnEmpty:true});
    Sortable.create('thursdaylist',{tag:'li', dropOnEmpty:true});
	Sortable.create('fridaylist',{tag:'li', dropOnEmpty:true});
    Sortable.create('saturdaylist',{tag:'li', dropOnEmpty:true});
    
    //register the days of the week as droppable
    Droppables.add('sunday', {accept: 'draggable',onDrop: function(element)
    {
		addListItem($('sundaylist'), element, 'dowSUN[]');
    }
	});
    Droppables.add('monday', {accept: 'draggable',onDrop: function(element)
    {
		addListItem($('mondaylist'), element, 'dowMON[]');
    }
	});
    Droppables.add('tuesday', {accept: 'draggable',onDrop: function(element)
    {
		addListItem($('tuesdaylist'), element, 'dowTUE[]');
    }
	});
    Droppables.add('wednesday', {accept: 'draggable',onDrop: function(element)
    {
		addListItem($('wednesdaylist'), element, 'dowWED[]');
    }
	});
    Droppables.add('thursday', {accept: 'draggable',onDrop: function(element)
    {
		addListItem($('thursdaylist'), element, 'dowTHU[]');
    }
	});
    Droppables.add('friday', {accept: 'draggable',onDrop: function(element)
    {
		addListItem($('fridaylist'), element, 'dowFRI[]');
    }
	});
    Droppables.add('saturday', {accept: 'draggable',onDrop: function(element)
    {
		addListItem($('saturdaylist'), element, 'dowSAT[]');
    }
	});
	
	countLoadedExercises($('sundaylist'));
	countLoadedExercises($('mondaylist'));
	countLoadedExercises($('tuesdaylist'));
	countLoadedExercises($('wednesdaylist'));
	countLoadedExercises($('thursdaylist'));
	countLoadedExercises($('fridaylist'));
	countLoadedExercises($('saturdaylist'));
	
	Effect.Fade("loading",{duration:1});
}