var pageBrowser_enableDebug = true;

function pageBrowser_getBrowserInfo(el) {
	var info = {};
	info.browserRoot = pageBrowser_getBrowserRoot(el);
	debugPrint('info.browserRoot='+info.browserRoot, 'pageBrowser');
	if(!info.browserRoot) return null;

	info.tabRoot = pageBrowser_getTabRoot(info.browserRoot);
	debugPrint('info.tabRoot='+info.tabRoot, 'pageBrowser');
	if(!info.tabRoot) return null;
	info.browserName = info.browserRoot.getAttribute('name');
	debugPrint('info.browserName='+info.browserName, 'pageBrowser');
	if(!info.browserName) return null;

	info.viewRoot = pageBrowser_getViewRoot(info.browserName);
	debugPrint('info.viewRoot='+info.viewRoot, 'pageBrowser');
	if(!info.viewRoot) return null;

	info.views = pageBrowser_getViews(info.viewRoot);
	if(!info.views) return null;

	info.browsers = [];

	var browserElements = [];
	// let's try the preferred native way first
	if(document.querySelectorAll) {
//		debugPrint('using querySelectorAll', 'pageBrowser');
		browserElements = document.querySelectorAll(".pageBrowser[name="+info.browserName+"]");
	}
	// this is a lame way to do this,
	// but using selector libraries to get certain elements from the whole document is just too slow on IE,
	// hence the marker hack
	if(!info.browsers.length) {
		var markers = document.getElementsByTagName('wertti_pageBrowser_marker_for_old_ie');
//		debugPrint('using wertti_pageBrowser_marker_for_old_ie', 'pageBrowser');
		for(var m = 0; m < markers.length; m++) {
			var browser = markers[m].nextSibling;
			if(browser) {
				if(browser.getAttribute('name') == browserName) browserElements.push(browser);
			}
		}
	}

	for(var i = 0; i < browserElements.length; i++) {
		var temp = {browserRoot:browserElements[i], name:browserElements[i].getAttribute('name'), edgeOffset:Number(browserElements[i].getAttribute('edgeoffset'))};
		temp.strip = pageBrowser_getStrip(browserElements[i]);
		temp.max = 0;
		temp.visibleCount = 0;
		for(var n = 0; n < temp.strip.length; n++) {
			if(temp.strip[n].number!=null && temp.strip[n].number > temp.max) temp.max = temp.strip[n].number;
			if(temp.strip[n].active) {
				temp.active = temp.strip[n].number;
				info.active = temp.strip[n].number;
			}
			if(!temp.strip[n].hidden && !temp.strip[n].blank) temp.visibleCount++;
		}
		info.max = temp.max;
		temp.links = pageBrowser_getLinks(browserElements[i]);
		info.browsers.push(temp);
	}

	return info;
}

function pageBrowser_getStrip(browserElement) {
	var tabRoot = pageBrowser_getTabRoot(browserElement);
	var strip = [];
	for(var i = 0; i < tabRoot.childNodes.length; i++) {
		if(tabRoot.childNodes[i].nodeType == Node.ELEMENT_NODE) {
			if(css_hasClass(tabRoot.childNodes[i],'number')) {
				var temp = {element:tabRoot.childNodes[i],name:'', blank:0, hidden:0, active:0, number:null};
				if(tabRoot.childNodes[i].getAttribute('name')) temp.name = tabRoot.childNodes[i].getAttribute('name');
				if(css_hasClass(tabRoot.childNodes[i],'blank')) temp.blank = 1;
				if(css_hasClass(tabRoot.childNodes[i],'hidden')) temp.hidden = 1;
				if(css_hasClass(tabRoot.childNodes[i],'active')) temp.active = 1;
				if(tabRoot.childNodes[i].innerHTML) temp.number = Number(tabRoot.childNodes[i].innerHTML);
				strip.push(temp);
			}
		}
	}
	return strip;
}

function pageBrowser_clearActive(browser) {
	for(var i = 0; i < browser.strip.length; i++) {
		if(browser.strip[i].active) css_removeClass(browser.strip[i].element, 'active');
	}
}

function pageBrowser_setActive(browser, num) {
	var activeIndex = 0;
	for(var i = 0; i < browser.strip.length; i++) {
		if(browser.strip[i].number != null) {
			if(browser.strip[i].number == num) {
				css_addClass(browser.strip[i].element, 'active');
				activeIndex = i;
				break;
			}
		}
	}

	for(var i = 0; i < browser.strip.length; i++) {
		if((i >= activeIndex - browser.edgeOffset) && (i <= activeIndex + browser.edgeOffset)) {
			css_removeClass(browser.strip[i].element, 'outOfView');
		} else {
			css_addClass(browser.strip[i].element, 'outOfView');
		}
	}
	return browser.strip[activeIndex];
}

function pageBrowser_previousPage(el) {
	var info = pageBrowser_getBrowserInfo(el);
	if(info.active > 1) {
		pageBrowser_clickTab(el, info.active-1);
	}

	if(document.documentElement && document.documentElement.scrollTop) {
		document.documentElement.scrollTop = 0;
	} else if (document.body && document.body.scrollTop) {
		document.body.scrollTop = 0;
	}

	return false;
}

function pageBrowser_nextPage(el) {
	var info = pageBrowser_getBrowserInfo(el);
	if(info.active < info.max) {
		pageBrowser_clickTab(el, info.active+1);
	}

	if(document.documentElement && document.documentElement.scrollTop) {
		document.documentElement.scrollTop = 0;
	} else if (document.body && document.body.scrollTop) {
		document.body.scrollTop = 0;
	}

	return false;
}

function pageBrowser_clickTab(el, num) {
	var info = pageBrowser_getBrowserInfo(el);
	var active = null;
	for(var i = 0; i < info.browsers.length; i++) {
//		showProps(info.browsers[i]);
		pageBrowser_clearActive(info.browsers[i]);
		active = pageBrowser_setActive(info.browsers[i], num);
	}

	for(var i = 0; i < info.browsers.length; i++) {
		if(active.number == 1) {
			css_addClass(info.browsers[i].links['prev'], 'disabled');
		} else {
			css_removeClass(info.browsers[i].links['prev'], 'disabled');
		}
		if(active.number == info.browsers[i].max) {
			css_addClass(info.browsers[i].links['next'], 'disabled');
		} else {
			css_removeClass(info.browsers[i].links['next'], 'disabled');
		}
	}

	for(var i in info.views) {
		if(i == active.name) {
			css_addClass(info.views[i].element, 'active');
		} else {
			css_removeClass(info.views[i].element, 'active');
		}
	}

//	showProps(info.links);

	return false;
/*
	var thisBrowser = pageBrowser_getBrowser(el);
	if(!thisBrowser) return false;

	var tabRoot = pageBrowser_getTabsRoot(thisBrowser);
	if(!tabRoot) return false;

	var tabs = pageBrowser_getEffectiveTabs(tabRoot);;
	if(!tabs) return false;

//	debugPrint("clickTab("+num+"): thisBrowser="+thisBrowser+" tabs="+tabs+" tab="+tab, 'pageBrowser');

	var tab = pageBrowser_getTab(tabs, num);
	if(!tab) return false;

	var browserName = thisBrowser.getAttribute('name');
	var tabName = tab.getAttribute('name');
	var views = document.getElementById('pageBrowser_views');

	var browsers = [];
	// let's try the preferred native way first
	if(document.querySelectorAll) {
//		debugPrint('using querySelectorAll', 'pageBrowser');
		browsers = document.querySelectorAll(".pageBrowser[name="+browserName+"]");
	}
	// this is a lame way to do this,
	// but using selector libraries to get certain elements from the whole document is just too slow on IE,
	// hence the marker hack
	if(!browsers.length) {
		var markers = document.getElementsByTagName('wertti_pageBrowser_marker_for_old_ie');
//		debugPrint('using wertti_pageBrowser_marker_for_old_ie', 'pageBrowser');
		for(var m = 0; m < markers.length; m++) {
			var browser = markers[m].nextSibling;
			if(browser) {
				if(browser.getAttribute('name') == browserName) browsers.push(browser);
			}
		}
	}

	for(var b = 0; b < browsers.length; b++) {
		var tabRoot = pageBrowser_getTabsRoot(browsers[b]);
		var tabs = pageBrowser_getEffectiveTabs(tabRoot);

//		debugPrint('browser=thisBrowser:'+(browsers[b]==thisBrowser)+' tabName='+tabName+" tabs="+tabs+" views="+views, 'pageBrowser');
		for(var i = 0; i < tabs.length; i++) {
			var thisTabName = tabs[i].getAttribute('name');
			if(thisTabName) {
				var view = pageBrowser_getView(views, thisTabName);
				if(thisTabName == tabName) {
					css_addClass(tabs.childNodes[i], 'active');
					if(browsers[b]==thisBrowser) css_addClass(view, 'active');	// viewin class-päivitys vain oman browserin kohdalla
				} else {
					css_removeClass(tabs.childNodes[i], 'active');
					if(browsers[b]==thisBrowser) css_removeClass(view, 'active');	// viewin class-päivitys vain oman browserin kohdalla
				}
			}
		}
	}

	return false;
//	debugPrint("clickTab("+num+"): thisBrowser="+thisBrowser+" tabs="+tabs+" tab="+tab, 'pageBrowser');
//	return false;	
*/
}
/*
function pageBrowser_clickTab(tab) {
	var clickedTabName = tab.getAttribute('name');
	var thisBrowser = pageBrowser_getBrowser(tab);
	var browserName = thisBrowser.getAttribute('name');
	var views = document.getElementById('pageBrowser_views');

	var browsers = [];

	// let's try the preferred native way first
	if(document.querySelectorAll) {
		debugPrint('using querySelectorAll', 'pageBrowser');
		browsers = document.querySelectorAll(".pageBrowser[name="+browserName+"]");
	}

	// this is a lame way to do this,
	// but using selector libraries to get certain elements from the whole document is just too slow on IE,
	// hence the marker hack
	if(!browsers.length) {
		var markers = document.getElementsByTagName('wertti_pageBrowser_marker_for_old_ie');
		debugPrint('using wertti_pageBrowser_marker_for_old_ie', 'pageBrowser');
		for(var m = 0; m < markers.length; m++) {
			var browser = markers[m].nextSibling;
			if(browser) {
				if(browser.getAttribute('name') == browserName) browsers.push(browser);
			}
		}
	}

	for(var b = 0; b < browsers.length; b++) {
		var tabs = pageBrowser_getTabs(browsers[b]);
//		debugPrint('browser=thisBrowser:'+(browsers[b]==thisBrowser)+' clickedTabName='+clickedTabName+" tabs="+tabs+" views="+views, 'pageBrowser');
		for(var i = 0; i < tabs.childNodes.length; i++) {
			if(tabs.childNodes[i].nodeType == Node.ELEMENT_NODE) {
				var tabName = tabs.childNodes[i].getAttribute('name');
				if(tabName) {
					var view = pageBrowser_getView(views, tabName);
//					debugPrint('clickedTabName='+clickedTabName+" tabName="+tabName+" view="+view, 'pageBrowser');
					if(tabName == clickedTabName) {
						css_addClass(tabs.childNodes[i], 'active');
						if(browsers[b]==thisBrowser) css_addClass(view, 'active');	// viewin class-päivitys vain oman browserin kohdalla
					} else {
						css_removeClass(tabs.childNodes[i], 'active');
						if(browsers[b]==thisBrowser) css_removeClass(view, 'active');	// viewin class-päivitys vain oman browserin kohdalla
					}
				}
			}
		}
	}

	return false;
}
*/

function pageBrowser_getBrowserRoot(el) {
	var browser = null;
	var safe = 256;
	while(el && safe--) {
		if(el.nodeType == Node.ELEMENT_NODE) {
			if(css_hasClass(el,'pageBrowser')) {
				browser = el;
				break;
			}
		}
		el = el.parentNode;
	}
	return browser;
}

function pageBrowser_getRoot(el) {
	var root = null;
	var safe = 256;
	while(el && safe--) {
		if(el.nodeType == Node.ELEMENT_NODE) {
			if(css_hasClass(el,'pageBrowser_root')) {
				root = el;
				break;
			}
		}
		el = el.parentNode;
	}
	return root;
}

function pageBrowser_getTabRoot(root) {
	var tabs = null;
	if(root && root.childNodes) {
		for(var i = 0; i < root.childNodes.length; i++) {
			var check = root.childNodes[i];
			if(check.nodeType == Node.ELEMENT_NODE) {
				if(css_hasClass(check,'numbers')) {
					tabs = check;
					break;
				} else {
					if(check.hasChildNodes() && pageBrowser_getTabRoot(check)) {
						tabs = pageBrowser_getTabRoot(check);
						break;
					}
				}
			}
		}
	}
	return tabs;
}
/*
function pageBrowser_getTab(tabs, num) {
	var tab = null;
	if(tabs && tabs.childNodes) {
		var tabIndex = 0;
		for(var i = 0; i < tabs.childNodes.length; i++) {
			var check = tabs.childNodes[i];
			if(check.nodeType == Node.ELEMENT_NODE) {
				if(check.getAttribute('name')) {
					if(css_hasClass(check, 'number')) {
	//					debugPrint("check="+check, 'pageBrowser');
						tabIndex++;
						if(tabIndex == num) {
							tab = check;
							break;
						}
					}
				}
			}
		}
	}
	return tab;
}
*/
/*
function pageBrowser_getActiveTab(tabs) {
	var tab = null;
	if(tabs && tabs.childNodes) {
		var tabIndex = 0;
		for(var i = 0; i < tabs.childNodes.length; i++) {
			var check = tabs.childNodes[i];
			if(check.nodeType == Node.ELEMENT_NODE) {
				if(check.getAttribute('name')) {
					if(css_hasClass(check, 'number') && css_hasClass(check, 'active')) {
						tab = check;
						break;
					}
				}
			}
		}
	}
	return tab;
}
*/
/*
function pageBrowser_getEffectiveTabs(tabs) {
	var effectiveTabs = [];
	for(var i = 0; i < tabs.childNodes.length; i++) {
		if(tabs[i].nodeType == Node.ELEMENT_NODE) {
			if(!css_hasClass(tabs[i],'hidden')) {
				if(tabs[i].getAttribute('name')) {
					effectiveTabs.push(tabs[i]);
				}
			}
		}
	}
	return effectiveTabs;
}
*/

function pageBrowser_getViewRoot(name) {
	var views = document.getElementById(name+"_views");
	return views;
}

function pageBrowser_getViews(viewRoot) {
	var views = {};
	if(viewRoot && viewRoot.childNodes) {
		for(var i = 0; i < viewRoot.childNodes.length; i++) {
			var checkView = viewRoot.childNodes[i];
			if(checkView.nodeType == Node.ELEMENT_NODE) {
				if(css_hasClass(checkView, 'page')) {
					var checkViewName = checkView.getAttribute('name');
					if(checkViewName) {
						var temp = {element:checkView, name:checkViewName};
						views[checkViewName] = temp;
					}
				}
			}
		}
	}
	return views;
	
}

function pageBrowser_getLinks(root) {
	var links = {};
//	debugPrint('pageBrowser_getLinks'+root, 'pageBrowser');
	if(root && root.childNodes) {
		for(var i = 0; i < root.childNodes.length; i++) {
			var check = root.childNodes[i];
			if(check.nodeType == Node.ELEMENT_NODE) {
				if(css_hasClass(check,'link')) {
					var linkName = check.getAttribute('name');
//					debugPrint('found link: '+linkName, 'pageBrowser');
					links[linkName] = check;
				} else {
					if(check.hasChildNodes()) {
						var childLinks = pageBrowser_getLinks(check);
						if(childLinks) {
							for(var j in childLinks) links[j] = childLinks[j];
						}
					}
				}
			}
		}
	}
	return links;
}

/*
function pageBrowser_getView(views, viewName) {
	var view = null;
	if(views && views.childNodes) {
		for(var i = 0; i < views.childNodes.length; i++) {
			var checkView = views.childNodes[i];
			if(checkView.nodeType == Node.ELEMENT_NODE) {
				if(css_hasClass(checkView, 'view')) {
					var checkViewName = checkView.getAttribute('name');
					if(checkViewName == viewName) {
						view = checkView;
						break;
					}
				}
			}
		}
	}
	return view;
}
*/