/**
 * @author ruiter
 */

// define pointers
var Ghost
var GhostClone
var Container
var ContainerItems		
var Crumb
var BreadCrumb
var crumbIndex = 0

var parent
var navigationPath = new Array()
var page
var currentResponse
var currentBreadcrumbResponse
var NavigationPathIndex = 0

// debug purposes..
var prefix = "" //"http://regiocollege.daidalos.nl"
var debugMode = false


// when breadcrumb query parameter is set, query contains all parameters to render interface state
var query
var stopSign = "~"

var blockHTML

// set default pagesize
var pageSize = 12


//set default mode
var mode = "tab" 
  
  	$(document).ready(function(){

	// set pointers
	Ghost = $('#ghost')
	Container = $('#blokken')
				
	//Crumb = $('#container span')
	BreadCrumb = $('#breadcrumb_grafisch')
	
	// check for query parameters and parse information
	parseQuery()
	
	if (mode=="tab") setup()
				
})


function setup () {
	
	$.ajax({
            url: "/_layouts/SpCursussen.aspx",
            dataType: 'json',
    		success: function(data) {
				clearBreadCrumb()
				renderResponse(data)
    		},
   			error: function (XMLHttpRequest, textStatus, errorThrown) {
	            ajaxError()
            }
    }); 
}

function parseQuery () {
	
	query = false
	if (!!$.jqURL.get('breadcrumb')) query = $.jqURL.get('breadcrumb').split(stopSign)
	
	if (query) {
		mode = "query"
		NavigationPathIndex = 1
		// label refers to choosen query..
		currentParent = query[0]
		
		// check if query contains a path at all, or just the tab..
		if (query.length > 0) {
			// fill navigationPath
			for (var i=0;i<query.length;i++) navigationPath.push(query[i])
			
			getFirstCrumb()
		}
	}
}


function ajaxError () { 
  log("<b>Er is een fout opgetreden!</b>"); 
}

function log (message) {
	var oldMessage 

	if (!debugMode) {
		oldMessage = ""
	} else {
		oldMessage = $("#opmerking").html() + "<br/>"
	}	
		
	$("#opmerking").html(oldMessage + message)
}

function renderBCResponse (newResponse) {
	
	// update response
	currentBreadcrumbResponse = newResponse
	
	renderBreadcrumbs()
	
	// update crumblabel
	$("#breadcrumb_grafisch div.label").remove()
	if (mode="query") 
		BreadCrumb.append("<div class='label'>" + unescape(navigationPath[navigationPath.length-1]) + "</div>")
	else
		BreadCrumb.append("<div class='label'>" + unescape(currentParent) + "</div>")
		
	//addEvents();
}

function getFirstCrumb () {
	
	$.ajax({
            url: "/_layouts/SpCursussen.aspx",
            dataType: 'json',
			data: {},
    		success: function(data) {
				renderBCResponse(data)
				
				for (var i=1;i<query.length-1;i++) {
					currentParent = query[i]
					getNewCrumbs()
				}
				
				getNewBlocks(query[query.length-1])

	   		},
   			error: function (XMLHttpRequest, textStatus, errorThrown) {
	            ajaxError()
            }
    }); 
}

function getNewCrumbs () {
	
	$.ajax({
            url: prefix + "/_layouts/SpCursussen.aspx",
            dataType: 'json',
			data: {Parent: unescape(currentParent)},
    		success: function(data) {
				renderBCResponse(data)
    		},
   			error: function (XMLHttpRequest, textStatus, errorThrown) {
	            ajaxError()
            }
    }); 
}


function renderBreadcrumbs() {
	// init page
	page = 1
	
	//add crumbcontainer
	NavigationPathIndex++
	addNewCrumbContainer()
	
	Container = $("#breadcrumb_grafisch a:last")
	
	numberOfItems = currentBreadcrumbResponse.Items.length;
	maxPages = Math.ceil(numberOfItems /pageSize)
	
	var matchFound = false  
	
	while (!matchFound && page <= maxPages) {
	
		// render whole page
		for (var i = (page-1)*pageSize;i<page*pageSize;i++) {
		
			var item = currentBreadcrumbResponse.Items[i]
			
			// check if page > #items
			if (i<numberOfItems) {
				if (item.Opleiding) {
					Container.append("<span class='actief'></span>")
				} else {
					var className = ""
					if (query.find(item.Titel)) {
						className = "actief"
						matchFound = true
					}	
					Container.append("<span class='" + className + "'></span>")
				}
			// fill rest of page with empty blocks	
			} else {
				Container.append("<span class='leeg'></span>")
			}			
		}
		
		// clear breadcrumb only if no match found
		if (!matchFound) Container.html("")
		
		// skip to next page
		page++
	}
}

function addNewCrumbContainer () {
	
	// add placeholder for new breadcrumb 
	BreadCrumb.append("<div><a href='javascript:navigateBack(" + (NavigationPathIndex-1) + ")' onmouseover='showHover(" + (NavigationPathIndex-1) + ")' onmouseout='resetHover()'></a></div>")
	
}

function clearBreadCrumb() {
	$("#breadcrumb_grafisch a, #breadcrumb_grafisch div").remove();
	NavigationPathIndex = 0
	crumbIndex = 0
	navigationPath = new Array()
}

function translatePage (pageNumber) {
	switch(pageNumber) {
		case 1:
		  return "one"
		  break;    
		case 2:
		  return "two"
		  break;
		case 3:
		  return "three"
		  break;
		case 4:
		  return "four"
		  break;
 		case 5:
		  return "five"
		  break;
		case 6:
		  return "six"
		  break;
		case 7:
		  return "seven"
		  break;
		default:
	}
}

function renderPager () {
	
	numberOfItems = response.Items.length;
	maxPages = Math.ceil(numberOfItems /pageSize)
	
	// empty pager
	$("#paginering span").remove()
	$("#paginering a").remove()
	$("#paginering").html("")
	
	for (var i=1;i<=maxPages;i++) {
		if (i == page) {
			$("#paginering").append("<span class='" + translatePage(i) + "'></span>") 
		} else {
			$("#paginering").append("<a class=" + translatePage(i) + " href='javascript:getNewPage(" + i + ")'></a>")
		}
	}	
}

function getNewPage (newPage) {
	page = newPage
	renderBlocks ()
	addEvents()
}

function renderBlocks () {
	
	// start with empty container
	$("#blokken span").remove();
		
	renderPager() 
	
	for (var i = (page-1)*pageSize;i<page*pageSize;i++) {
	
		var item = response.Items[i]
		
		if (i<numberOfItems) {
			if (item.Opleiding) {
				
				var breadcrumbPath = ""
				
				for (var j = 0;j<navigationPath.length; j++) {
					breadcrumbPath += navigationPath[j] + stopSign
				}
				
				var args = "?breadcrumb=" + breadcrumbPath + item.Titel

				$('#blokken').append("<span class='url'><a class='url' href='" + item.Url + args + "'><span class='normal'>" + item.Titel + "</span></a></span>")
	
			} else {
				$('#blokken').append("<span class='category'><a class='actief' href='javascript:void(0)'>" + item.Titel + "</a></span>")
			}
		} else {
			$('#blokken').append("<span class='leeg'><a href='javascript:void(0)'></a></span>")
		}			
	}
}

function updateRemarks () {
	log(response.Opmerkingen)
}


function renderResponse (newResponse, status) {
	
	log("renderResponse")
	
	// update response
	response = newResponse
	
	// reset page
	page = 1
	
	renderBlocks()
	
	addEvents();
	
	updateRemarks();
}

function getNewBlocks (parent) {
	
	// set empty response
	response = {"Aantal" : "0","Opmerkingen" : "","Items" : []}
	renderPager()
	
	$.ajax({
            url: prefix + "/_layouts/SpCursussen.aspx",
            dataType: 'json',
			data: {Parent: unescape(parent)},
    		success: function(data) {
                renderResponse(data)
				// check for proper response, show message when zero results
				if (data.Aantal < 1) { log("<b>Er zijn geen cursussen of trainingen met dit profiel beschikbaar.</b>"); } 
    		},
   			error: function (XMLHttpRequest, textStatus, errorThrown) {
	            ajaxError()
            }
    }); 
}


function animationReady () {
  	// get and set containerdata
	getNewBlocks (Parent)
	
	// remove GhostClone
	GhostClone.remove()
	
}

function updateNavigationPath (block) {
	
	// set label pressed block
	Parent = block.text()
		
	// add choosen block to navigationPath
	navigationPath.push(Parent)
	
	//log(navigationPath)
	
}

function updateCrumbLabel (block) {
	$("#breadcrumb_grafisch div.label").remove()
	BreadCrumb.append("<div class='label'>" + unescape(block.text()) + "</div>")
}		

function navigateBack (index) {
	// remove hover
	$("#breadcrumb_grafisch div.hover").remove()
	// get rid of label
	$("#breadcrumb_grafisch div.label").remove()
	
	var navigationPathSize = navigationPath.length
	
	// get rid of rest of breadcrumb and navigationPath
	for (var i=index; i<navigationPathSize; i++) {
		$("#breadcrumb_grafisch div:last").remove()
		// pop last element [delete and return last element]
		navigationPath.pop()
	}
	
	// update crumblabel
	BreadCrumb.append("<div class='label'>" + unescape(navigationPath[index-1]) + "</div>")
	
	// update crumbIndex
	crumbIndex = index
	
	// get 'new' blocks
	if (index > 1) {
	    getNewBlocks(navigationPath[index-1])
	} else {
	    setup()
	}    
}

function showHover (index) {
	
	if (index != navigationPath.length) {
		// hide label
		$("#breadcrumb_grafisch div.label").hide()
		
		// remove existing hover
		$("#breadcrumb_grafisch div.hover").remove()
		// add hover
		BreadCrumb.append("<div class='hover'>" + navigationPath[index-1] + "</div>")
	}
}

function resetHover () {
	// remove hover
	$("#breadcrumb_grafisch div.hover").remove()
	// show label
	$("#breadcrumb_grafisch div.label").show()
}

function addNewCrumb () {
	
	crumbIndex++
	
	var cssClass = ""
	var imageTag = ""
	
	// skip arrow for first block only	
	if (crumbIndex > 1) {
		imageTag = "<img src='/Style%20Library/Images/gedeeld/breadcrumb_pijl.gif' />"
		cssClass = " class='arrow'"
	}
	
	// add placeholder for new breadcrumb 
	BreadCrumb.append("<div" + cssClass + ">" + imageTag + "<a href='javascript:navigateBack(" + (navigationPath.length) + ")' onmouseover='showHover(" + navigationPath.length + ")' onmouseout='resetHover()'></a></div>")
	
	// set clone and copy to breadcrumb
	Crumb = ContainerItems.clone()
	// get rid of text
	Crumb.empty()
	// set invisible, fadein later
	Crumb.toggle()
	// use of prepend or append.. [prepend to use reverse order..
	$('#breadcrumb_grafisch a:last').append(Crumb)
	// fadein breadcrumb
	Crumb.fadeIn('slow');
}

function addEvents () {

	// set container items after updating container
	ContainerItems = $('#blokken span')
	ContainerLinkItems = $('#blokken span a.url')
	// fadeIn container after updating
	Container.fadeIn()				
	
	
	// hover effect
	ContainerItems.hover(
		function (){ $(this).addClass("actief")},
		function (){ $(this).removeClass("actief")}
	)
	
	
	
	// move effect blocks to breadcrumb
	$("#blokken span a.actief").bind('click',function(event){
	
		// remove handler
		$("#blokken span a.actief").unbind('click')
		
		// update navigationPath
		updateNavigationPath($(this))
		
		// update breadcrumb
		addNewCrumb()
		
		// update label for breadcrumb
		updateCrumbLabel($(this))
		
		// create clone of ghost 
		GhostClone = Ghost.clone()
		// make clone visable
		GhostClone.toggle()
		// add clone to document
		GhostClone.appendTo("#blokkencontainer")
		// set height same as container
		GhostClone.height(Container.height())
		
		// fadeout container, replace with new one later
		Container.fadeOut();
		
		// move clone
		GhostClone.animate({ 
		    width: "55px",
			height: "30px",
	        opacity: "0",
			left: "5px",
			top: "75px"

	      }, 500, "linear", animationReady );
		
	});

}

// new prototype to find elements in array
// NB: match is made case insensitive!
Array.prototype.find = function(searchStr) {
	var returnArray = false;  
	for (var i=0; i<this.length; i++) {    
		if (typeof(searchStr) == 'function') {
			if (searchStr.test(this[i])) {
				if (!returnArray) { returnArray = [] }
				returnArray.push(i);
			}
		} else {
			if (this[i].toLowerCase() == searchStr.toLowerCase()) {
			    if (!returnArray) { returnArray = [] }
				returnArray.push(i);
			}
		}
	}
	return returnArray;
}