/**
 * @author Martin de Ruiter :: Daidalos 2008
 */

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

var parent
var navigationPath = new Array()
var leerweg
var page
var currentResponse
var currentBreadcrumbResponse
var currentTab
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')
	Tabs = $('#tabs ul')
				
	//Crumb = $('#container span')
	BreadCrumb = $('#breadcrumb_grafisch')
	
	// check for query parameters and parse information
	parseQuery()
	
	// set leerweg value
	leerweg = $("input[@name='leerweg']:checked").val()
		
	
	$.ajax({
            url: prefix + "/_layouts/SpOpleidingen.aspx",
            dataType: 'json',
    		success: function(tabData) {
	
				renderTabs(tabData)
				// if a query is parsed, get latest blocks
				if (mode == "query")
					if (navigationPath.length > 0) {
						getNewBlocks(query[query.length-1])
					} else {
						getBlocks()
				} else {
					// set introduction message
					log("Klik hierboven om een beroepsopleiding te vinden");		
				}		
    		},
   			error: function (XMLHttpRequest, textStatus, errorThrown) {
	            ajaxError()
            }
    }); 
		
	// make form for leerweg work
	$("input[@name='leerweg']").click(function(){
		// set back to default mode
		mode = "tab" 
		// update leerweg value
		leerweg = $("input[@name='leerweg']:checked").val()
		
		// only make request when some tab is chosen
		if (currentTab) {
			// get new blocks from server
			getBlocks()
			// reset breadcrumb
			clearBreadCrumb()
		}	
	});
	
				
})


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

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 + html_decode(message))
}

function renderTabs (tabResponse) {
	
	// remove dummy tabs
	$('#tabs ul li').remove()
				
	for (var item in tabResponse.Items) {
		
		var item = tabResponse.Items[item]
		
		if (typeof(item) != 'function') {
			Tabs.append("<li><a id=\"" + item.Titel + "\" href='javascript:tabClick(this, \"" + item.Titel + "\")'>" + item.Description + "</a></li>");
		}	
	}
	
	// use add events for activetab event events
	addTabEvents()
	
	// set active tab, works only when currentTab is set
	$("#tabs a").removeClass("active")
	$("#tabs a#" + currentTab).addClass("active")

}

function renderBCResponse (newResponse) {
	
	//console.log("renderBCResponse" + newResponse.toString() + " - " + mode)
	
	// 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 () {
	
	//console.log("getFirstCrumb-" + currentTab)
	
	$.ajax({
            url: prefix + "/_layouts/SpOpleidingen.aspx",
            dataType: 'json',
			data: {Type: currentTab ,Leerweg: leerweg},
    		success: function(data) {
				//console.log("getFirstCrumb - succes" + data)
				
				renderBCResponse(data)
				
				//console.log("getFirstCrumb - query.length: " + query.length)

				for (var i=2;i<query.length-1;i++) {
					currentParent = query[i]
					getNewCrumbs()
				}
	   		},
   			error: function (XMLHttpRequest, textStatus, errorThrown) {
	            ajaxError()
            }
    }); 
}

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


function renderBreadcrumbs() {
	
	//console.log("RenderBreadCrumbs " + NavigationPathIndex)
	
	// init page
	page = 1
	
	//add crumbcontainer
	NavigationPathIndex++

	addNewCrumbContainer()
	
	Container = $("#breadcrumb_grafisch a:last")
	
	numberOfItems = currentBreadcrumbResponse.Items.length;
	maxPages = Math.ceil(numberOfItems /pageSize)
	
	//console.log("RenderBreadCrumbs - numberOfItems - " + numberOfItems)
	
	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]
			
			//console.log(item)
			
			// 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 () {
	
	// update crumbIndex
	crumbIndex = NavigationPathIndex-1
	
	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(" + (NavigationPathIndex-2) + ")' 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 tabClick (obj, titel) {
		// get label choosen tab
		currentTab = titel
		
		// start with empty breadcrumb
		clearBreadCrumb()
		
		// start with new navigationPath
		navigationPath = new Array()
		
		// get new blocks
		getBlocks()
}

function addTabEvents () {
	$("#tabs a").click(function(){
		// set back to default mode
		mode = "tab" 
		// reset all tabs and set current tab active
		$("#tabs a").removeClass("active")
		$(this).addClass("active")
		
	})
}

function getBlocks () {	
	
	$.ajax({
            url: prefix + "/_layouts/SpOpleidingen.aspx",
            dataType: 'json',
			data: {Type: currentTab ,Leerweg: leerweg},
    		success: function(data) {
                renderResponse(data)
				// check for proper response, show message when zero results
				if (data.Aantal < 1) { log("<b>Er zijn geen opleidingen met dit profiel beschikbaar.</b>"); } 
			}	
    		,
   			error: function (XMLHttpRequest, textStatus, errorThrown) {
	            ajaxError()
            }
    }); 
}

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) {
				
				//navigationPath.toString().replace(",",stopSign) + stopSign
				var breadcrumbPath = ""
				
				for (var j = 0;j<navigationPath.length; j++) {
					breadcrumbPath += navigationPath[j] + stopSign
				}
				
				var args = "?breadcrumb=" + leerweg + stopSign + currentTab + stopSign + breadcrumbPath + item.Titel
				
				//$('#blokken').append("<span><a class='url' name='" + item.Leerweg + "<br/>" + item.Niveau + "<br/>" + item.Lokatie + "' href='" + item.Url + args + "'>" + item.Titel + "</a></span>")
				$('#blokken').append("<span class='container'><a class='url' href='" + item.Url + args + "'><span class='normal'>" + item.Titel + "</span><span class='mouseover'>" + item.Leerweg + "<br/>" + item.Niveau + "<br/>" + item.Lokatie + "</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) {
	
	// update response
	response = newResponse
	
	// reset page
	page = 1
	
	renderBlocks()
	
	addEvents();
	
	updateRemarks();
}

function getNewBlocks (parent) {
	
	// set empty response
	response = {"Aantal" : "0","Opmerkingen" : "","Items" : []}
	renderPager()
	
	//console.log(parent)
	
	$.ajax({
            url: prefix + "/_layouts/SpOpleidingen.aspx",
            dataType: 'json',
			data: {Parent: unescape(parent) ,Leerweg: leerweg},
    		success: function(data) {
                renderResponse(data)
				// check for proper response, show message when zero results
				if (data.Aantal < 1) { log("<b>Er zijn geen opleidingen 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)
	
}

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 crumbIndex
	crumbIndex = index
	
	// get 'new' blocks
	if (index > 0) {
    	// update crumblabel
		BreadCrumb.append("<div class='label'>" + unescape(navigationPath[index-1]) + "</div>")

	    getNewBlocks(navigationPath[index-1])
	} else {
	    getBlocks()
	} 
}

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'>" + unescape(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 -1) + ")' 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')
	ContainerCategoryItems = $('#blokken span.category')
	ContainerLinkItems = $('#blokken span.container')
	// fadeIn container after updating
	Container.fadeIn()				
	
	
	// hover effect for category items
	ContainerCategoryItems.hover(
		function (){ $(this).addClass("actief")},
		function (){ $(this).removeClass("actief")}
	)
	
	/* hover effect for containeritems */
	ContainerLinkItems.css({backgroundPosition: '100% 0px'});
	
	ContainerLinkItems.hover( 
		function(e){
			if (position == "right" || position == "movingright") moveleft(e)
			return false
		},
		function(e){
			if (position == "left" || position == "movingleft") moveright(e)
			return false
		}
	)
	
	// 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 );
		
	});

}

/* code for button animation */

var position = "right"
			
function moveleft (event) {
	
	var element = $(event.target).parent()
	
	// for IE, event.target is different
	if ($.browser.msie) {
		element = $(event.target)
	}
	
	element.stop(true,false)
	
	position = "movingleft"

	element.animate({ 
		backgroundPosition: '(0% 0px)'
  		}, 200, "linear", animationLeftReady );
	
	element.find(".normal").hide()
}

function moveright (event) {
	
	var element = $(event.target).parent()
	
	// for IE, event.target is different
	if ($.browser.msie) {
		element = $(event.target)
	}
	
	element.stop(true,false)
	
	movement = "movingright"
	
	element.animate({ 
		backgroundPosition: '(100% 0px)'
  		}, 200, "linear", animationRightReady );
	
	element.find(".mouseover").hide()
}
			
function animationLeftReady () {
	position = "left"
	$(this).css({backgroundPosition: '0% 0px'})
	$(this).find(".mouseover").show()
}

function animationRightReady () {
	position = "right"
	$(this).css({backgroundPosition: '100% 0px'})
	$(this).find(".normal").show()
}


function html_decode(str) {
  var ta=document.createElement("textarea");
  ta.innerHTML=str.replace(/</g,"&lt;").replace(/>/g,"&gt;");
  return ta.value;
}


/* extension for moving background */

/**
 * @author Alexander Farkas
 * v. 1.02
 */
(function($) {
	$.extend($.fx.step,{
	    backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                if (start) {
					start = toArray(start);
	                fx.start = [start[0],start[2]];
	                var end = toArray(fx.end);
	                fx.end = [end[0],end[2]];
	                fx.unit = [end[1],end[3]];
				}
			}
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
            
           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
	});
})(jQuery);

// 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 (unescape(this[i].toLowerCase()) == unescape(searchStr.toLowerCase())) {
			    if (!returnArray) { returnArray = [] }
				returnArray.push(i);
			}
		}
	}
	return returnArray;
}