// maximum cameras to compare
var MAX_CHECKED = 5;

// attempt to disable / display the cameras
var cameras  = {};
var filterdelay = null;

// id of the link, true to enable
function enableDisableLink(id, enable) {
	var d = document.getElementById(id);

	if(enable) {
		--MAX_CHECKED;
		/*d.onclick = function() { return true; };
		d.className = "";*/
	}
	else {
		++MAX_CHECKED;
		/*d.onclick = function() { return false; };
		d.className = "disabled";*/
	}

	// disable all other checkboxes
	if(MAX_CHECKED == 0) {
		enableDisableCheckboxes(true);
	}
	else {
		enableDisableCheckboxes(false);
	}
}

// disable checkboxes with an id starting with cb_
function enableDisableCheckboxes(disable) {
	var cbs = document.getElementsByTagName("input");

	for(var i = 0; i < cbs.length; i++) {
		// we only want checkboxes with an id that starts with cb_
		if(cbs[i].type == "checkbox" && /^cb_/.test(cbs[i].name)) {
			if(!cbs[i].checked) cbs[i].disabled = disable;
		}
	}
}

// force browser to not retain the state of the checkboxes
window.onload = function() {
	var cbs = document.getElementsByTagName("input");

	for(var i = 0; i < cbs.length; i++) {
		// we only want checkboxes with an id that starts with cb_
		if(cbs[i].type == "checkbox" && (/^cb_/.test(cbs[i].name) || /^cf_/.test(cbs[i].id))) {
			cbs[i].checked  = false;
			cbs[i].disabled = false;
		}
	}
};

// returns the index position of an element or -1
Array.prototype.indexOf = function(item) {
	for(var i = 0; i < this.length; i++) {
		if(this[i] == item) return i;
	}
	return -1;
};

// does this array contain all elements of the supplied array?
Array.prototype.contains = function(arr) {
	var match = 0;

	for(var i = 0; i < arr.length; i++) {
		if(this.indexOf(arr[i]) != -1) match++;
	}

	return match == arr.length;
}

// disable or enable the view of the cameras
function disableEnableCamera() {
	var checked = [];
	var fm      = document.forms["filter"];

	for(var i = 0; i < fm.elements.length; i++) {
		var elm = fm[i];

		if(elm.checked) checked[checked.length] = elm.name;
	}

	for(var i in cameras) {
		var camera = cameras[i];
		var div    = document.getElementById(i);
		if(!div) continue;

		if(!camera.contains(checked)) {
			setElementOpacity(div, 0.4);
			div.className = "disabled";
			storeAndDisableClick(div);
		}
		else {
			setElementOpacity(div, 1);
			div.className = "";
			enableClick(div);
		}
	}
}

// disable any onclick handlers of child elements, storing them for later
function storeAndDisableClick(elm) {
	var kids = (document.all) ? elm.all : elm.getElementsByTagName("*");

	for(var i = 0; i < kids.length; i++) {
		// give anchors a return true onclick - does nothing to the anchor but makes the code
		// work with disabled anchor tags
		if(kids[i].nodeName.toUpperCase() == "A" && kids[i].onclick == null) {
			kids[i].onclick = function() {
				return true;
			};
		}

		if(kids[i].onclick != null && kids[i].OLDCLICK==null) {
			kids[i].OLDCLICK = kids[i].onclick;
			kids[i].onclick  = function() {
				return false;
			};
		}
	}
}

// re-enable any stored 
function enableClick(elm) {
	var kids = (document.all) ? elm.all : elm.getElementsByTagName("*");

	for(var i = 0; i < kids.length; i++) {
		if(kids[i].OLDCLICK != null) {
			kids[i].onclick  = kids[i].OLDCLICK;
			kids[i].OLDCLICK = null;
		}
	}
}

// hide the element with the supplied id
function hideOverlay(id) {
	var div = document.getElementById(id);

	if(!div) return;

	div.style.visibility = "hidden";

	hideArrowImage();
}

function showFilter(event, id, offset) {
	if(filterdelay != null) {
		clearTimeout(filterdelay);	
		filterdelay=null;
	}
	filterdelay = setTimeout(function () { actualShowFilter(id, offset)},200);
}

function timerHideOverlay(id) {
	if(filterdelay != null) {
		clearTimeout(filterdelay);	
		filterdelay=null;
	}
	hideOverlay(id);
}


function actualShowFilter(id, offset) {

	var yadd = 0;
	if(document.all) {
		yadd += ((navigator.appVersion.indexOf("6.") > 0) ? 2 : 4)
	}

	if(!offset)
		offset = 20;

	var div = document.getElementById(id);
	var cb  = document.getElementById(id.replace('ol_', 'cf_'));
	
	var box = findObDimensions(cb);

	if(!div)
		return;

	//var top   = document.documentElement.scrollTop + cb.offsetTop + offset;
	var top = box[1];
	var right = 0;
	div.style.top        = (top - 120 - yadd) + "px";
	div.style.right      = right + "px";
	div.style.visibility = "visible"
	
	positionArrowImage(top-120-yadd, right+400, div.offsetWidth);
	
	// close the camera overlay, if it's open
	if(current && current != div) {
		current.style.visibility = 'hidden';
	//	current = null;
	}	
}



// show the element with the supplied id and position it around where the cursor is
function showOverlay(event, id, offset) {
	if(!offset) offset = 20;

	var div = document.getElementById(id);

	if(!div) return;
	if(!event) event = window.event;

	var top  = document.documentElement.scrollTop + event.clientY + offset;
	var left = event.clientX - (div.offsetWidth / 2);

	div.style.top        = top + "px";
	div.style.left       = left + "px";
	div.style.visibility = "visible";

	positionArrowImage(top, left, div.offsetWidth);

	// close the camera overlay, if it's open
	if(current && current != div) {
		current.style.visibility = 'hidden';
	//	current = null;
	}
}

// is one open?
var current = null;

// show or hide the camera overlay, depending on its state and hide any opened one
function showHideCamOverlay(event, id) {
	var elm = document.getElementById(id);

	if(!elm) return;

	if(elm.style.visibility == 'visible') {
		hideOverlay(id);
	}
	else {
		showOverlay(event, id, 40);
	}

	if(current && current != elm) {
		current.style.visibility = 'hidden';
	}

	current = elm;
}

// store it
var arrowImage = null;

// display the arrow image near the cursor and overlay
function positionArrowImage(top, left, width) {
	if(!arrowImage) arrowImage = document.getElementById("arrow_image");
	if(!arrowImage) return;

	arrowImage.style.visibility = "visible";
	arrowImage.style.top        = (top - arrowImage.offsetHeight + 2) + "px"; // make it sit just over the border
	arrowImage.style.left       = (left + (width / 3)) + "px";
}

// and hide it again
function hideArrowImage() {
	if(!arrowImage) arrowImage = document.getElementById("arrow_image");
	if(!arrowImage) return;

	arrowImage.style.visibility = "hidden";
}

// where we are in the gallery array
var currentIdx = 0;

// show or hide the large image on the design tab
function showHideGalleryOverlay(event, img) {
	var id  = 'gallery';
	var elm = document.getElementById(id);

	if(!elm) return;

	if(elm.style.visibility == 'visible') {
		hideGalleryOverlay();
	}
	else {
		// should the next / back buttons be displayed?
		var idx = galleryImages.indexOf(img);

		hideShowBackNext(idx);

		// sort out displaying the main image
		document.images['gallery_image'].src = img;
		showOverlay(event, id);

		elm.style.top  = "0px";
		elm.style.left = "0px";

		currentIdx = idx;
	}
}

// shift the gallery image to the next or previous
// if dir is greater than 0 it shifts it forwards
// else it shifts it back
function galleryShift(dir) {
	if(dir > 0) {
		currentIdx++;
	}
	else if(dir < 0) {
		currentIdx--;
	}

	if(currentIdx < 0) currentIdx = 0;
	if(currentIdx > galleryImages.length - 1) currentIdx = galleryImages.length - 1;

	document.images['gallery_image'].src = galleryImages[currentIdx];

	hideShowBackNext(currentIdx);
}

// hide or show the next / back images for the gallery
function hideShowBackNext(idx) {
	document.images['gallery_back'].style.visibility = (idx == 0) ? 'hidden' : 'visible';
	document.images['gallery_next'].style.visibility = (idx >= (galleryImages.length - 1)) ? 'hidden' : 'visible';
}

// for some reason hiding the main div doesn't hide the back / next images...
function hideGalleryOverlay() {
	hideOverlay('gallery');

	document.images['gallery_back'].style.visibility = 'hidden';
	document.images['gallery_next'].style.visibility = 'hidden';
}