/*
	THIS CODE WILL HELP (IT'S NECESSARY) TO CREATE THE "FLOWCHART VIEW" STYLE
	ON THE LIST WITH "FLOWCHART" STYLE SELECTED.
*/
$(document).ready(function(){

	// THIS FUNCTION ALLOW IE TO DEAL WITH "GET ELEMENTS BY CLASS NAME"
	function getElementsByClassName(node, classname) {
		var a = [];
		var re = new RegExp('(^| )'+classname+'( |$)');
		var els = node.getElementsByTagName("*");
		for(var i=0,j=els.length; i<j; i++)
			if(re.test(els[i].className))a.push(els[i]);
		return a;
	}

	// this variable will just check if we are on a template with a flowchart inside.
	var flowcharts = getElementsByClassName(document.body,'flowchart');  // no document
	
	// IN CASE THERE IS A FLOWCHART LIST, THE FUN WILL START
	if($(flowcharts).html() != undefined){
	// FIRSTLY IT'S COUNTED HOW MANY FLOWCHART ARE THERE
	for(var m = 0; m < flowcharts.length; m++){
			var tempFlowchart = flowcharts[m];
	        var collapseOption = ''; // THIS VARIABLE WILL BE USED AS A SETTING TO FOLD OR NOT THE FLOWCHART
			
			// UMBRACO RETURN THE TEXT INSIDE "LI" WITHOUT "P", SO WE NEED TO GET ALL OF THEM AND MAKE IT PROPERLY
			var paragraphsList = tempFlowchart.getElementsByTagName('li');
			for(var i = 0; i < paragraphsList.length; i++){
				var tempParagraph = paragraphsList[i];
                
				// NEXT CONDITION WILL LOOK FOR THE SETTING TO FOLD OR UNFOLD THE FLOWCHART
                if(collapseOption === ''){
				// IF THE WORD COLLAPSE IS IN THE FIRST PARAGRAPH BETWEEN '*' ...
                var settingsRemoved = $(tempParagraph).html(),
					settings = settingsRemoved.split('*');
				// ...WE TAKE IT OUT FROM THE TEXT, AND SAVE IT FOR LATER IN A VARIABLE
                collapseOption = settings[1];
				// THE ORIGINAL HTML IS OVERWRITTEN WITH THE NEW ONE, WITHOUT "COLLAPSE" ON IT
                $(tempParagraph).html(settings[2]);
                }
				
				// THIS FUNCTION WILL CUT OUT ANY TEXT BETWEEN [ AND ], AND IT WILL BE ADDED AS "TITLE" TO THE PARAGRAPH
				var html = $(tempParagraph).html(),
                    lText = html.split('['),
					rText = html.split(']');
					
				if (typeof rText[0] === "undefined")
					{rText[0] = ""}  
				if (typeof rText[1] === "undefined")
					{rText[1] = ""}  
				if (typeof lText[0] === "undefined")
					{lText[0] = ""} 
				if (typeof lText[1] === "undefined")
					{lText[1] = ""}
					
				var titleText = lText[1].split(']');
				$(tempParagraph).attr({ title: titleText[0] });
				$(tempParagraph).html(lText[0]+rText[1]);
                
				var finalParagraph = $(tempParagraph).html();
                
                // IF THERE IS NOT CHILDS, IN WON'T HAVE FOLDED MENU ICON
                if($(tempParagraph).next('ul').text() == ''){
					$(tempParagraph).text('');
					if($(tempParagraph).parent().prop("class") === 'flowchart'){
						$(tempParagraph).append("<p class='finalLink firstLevel'>"+ finalParagraph +"</p>");
					}else if($(tempParagraph).parent().parent().prop("class") === 'flowchart'){
						$(tempParagraph).append("<p class='finalLink secondLevel'>"+ finalParagraph +"</p>");
					}else{
						$(tempParagraph).append("<p class='finalLink thirstLevel'>"+ finalParagraph +"</p>");
					}
				}else // IT WILL HAVE FOLDED MENU ICON IF THERE IS CHILDS
                {
                    $(tempParagraph).text('');
                    if(collapseOption =="collapse"){
                        $(tempParagraph).append("<div class='menuBox'><span class='notclicked'></span></div><p>"+ finalParagraph +"</p>");
                    }else{
                        $(tempParagraph).append("<div class='unfoldArrow'></div><p>"+ finalParagraph +"</p>");
                    }
                }
			};
			
			// WITH THE NEXT CLASSES WE WILL ADD A LINE AT LEFT SIDE IN CASE THERE IS MORE SECTIONS IN THE SAME LEVEL
			var list = tempFlowchart.getElementsByTagName('ul');
			for(var i = 0; i < list.length; i++){
				var temp = list[i];
                if($(temp).next('li').text() != ''){
					// LONGER WILL ADD THE LINE
				   $(temp).addClass('longer');
                }else{
					// SHORT WON'T ADD THE LINE
                    $(temp).addClass('short');
                }
			}
			
				// CREATE A NEW DIV WITH A CLASS CALLED "FLOWCHART"
			$(tempFlowchart).before("<div class='flowchart flowchartSerial_" + (m+1) + "'></div>");
				// SAVE THE CONTENT OF OUR NEW DIV
			var flowChartDiv = $('div.flowchartSerial_'+ (m+1));
			$(flowChartDiv).append($(tempFlowchart));
			
			// IF 'COLLAPSE' WAS WRITTEN AT THE BEGINNIG OF THE FLOWCHART, IT WILL BE COLLAPSED
            if(collapseOption == "collapse"){
				$(flowChartDiv).children('ul').children('ul').addClass('opened');
				$(flowChartDiv).children('ul').children('ul').slideToggle(350);
				$(flowChartDiv).children('ul').children('li').children('.menuBox').children('span').toggleClass("clicked");
				$(flowChartDiv).children('ul').children('li').children('.menuBox').children('span').toggleClass("notclicked");
                flowchartSlideTest(flowChartDiv);
			// OTHERWISE, IT WILL BE NO COLLAPSED
            }else{
				// THE CLASSES LONGER AND SHORT HAVE A DISPLAY:NONE PROPERTY
				// SO THIS WILL OVERWRITE THAT PROPERTIES AND WILL EXPAND ALL
				$(flowChartDiv).find('.longer').show();
				$(flowChartDiv).find('.short').show();
            }
		}
    }
});

function flowchartSlideTest(variable){

$(variable).find('.menuBox').click(function(event){
    var div = $(this).parent('li').next('ul');
    
    if($(div).html() != undefined){
        var open = $(variable).children('ul').children('ul').find('.opened');
		// IF WE OPENED ANOTHER SECTION BEFORE, IT WILL BE CLOSED BEFORE OPENING THE NEW ONE
        if($(open).html() != $(div).html()){
            if(!$(this).parent().parent().hasClass('opened')){
                $(open).each(function() {
                $(this).toggleClass("opened");
                $(this).slideToggle(350);
                $(this).prev('li').children().children().toggleClass("clicked");
                $(this).prev('li').children().children().toggleClass("notclicked");
            });
            }
        }
        
        $(div).each(function(i) {
            $(div).slideToggle(350);
            $(div).toggleClass("opened");
        });
        
        $(this).children().toggleClass("clicked");
        $(this).children().toggleClass("notclicked");
    };

$(variable).children('ul').children('ul').removeClass('opened');
});
};