<?php
	// ini_set("display_errors", 1);
	include_once(PATH_TO_ROOT."/webcati/_plugins/imageval/class/class.imageval.plugin.php");
    $data = new Imageval($db);
    $data->load($projectId, $q->id);
	
	$tbl = "";
	
	$config = $data->getData();
	$dragValues = array();
	$pluginMustCondition = array();
	
	// legend array
	$legArr = $q->answerToArray($q->display->readRequiredQuestionVariables($q->leg_sql));
	
	$qName = $q->q_name;
	
	// reverse answers array (start at first item)
	// $ansArr = array_reverse($ansArr);
	
	// feldValues .. question already answered, but back button clicked
	$fields = $q->getStructureFields();
	
	$containerBg = "background-color:".$config['bgColor'].";";
	
	$itemBg = "background-color:".$config['itemBgColor'].";";
	$itemActiveBg = "background-color:".$config['itemActiveBgColor']." !important;";
	$itemRoundCorners = "-webkit-border-radius:".$config['itemRoundCorners']."px;-moz-border-radius:".$config['itemRoundCorners']."px;border-radius:".$config['itemRoundCorners']."px;";
	$itemBorderColor = "border:1px solid ".$config['itemBorderColor'].";";
	$itemPadding = "padding:".$config['itemPadding']."px;";
	
	$tbl .= '<style>
		#evalContainer { position:relative;'.$containerBg.'overflow:hidden; }
		#evalImage { position: absolute; }
		.answer { position:absolute;cursor:pointer;'.$itemBg.$itemBorderColor.$itemRoundCorners.$itemPadding.' }
		.ui-selected { '.$itemActiveBg.' }
		.image { '.$config['imagePadding'].'left:10px;position:absolute; }
	</style>';
	
	$tbl .= '<div id="evalContainer">
	<div id="evalImage">'.$q->display->readRequiredQuestionVariables($config['image']).'</div>';
	
	foreach ($legArr as $legKey => $legVal) {
		$label = $q->display->readRequiredQuestionVariables($legVal[1]);
		$currKey = $legKey + 1;
		
		$active = ($fieldsValues[$qName . "_" . $currKey] == "" or $fieldsValues[$qName . "_" . $currKey] == "0") ? "inactive" : "ui-selectee ui-selected";
		
		$tbl .= '<div class="answer '.$active.'">' . $label . '<input id="answer_'.$legVal[0].'" type="hidden" value="'.$fieldsValues[$qName . "_" . $currKey].'" name="answers['.$qName.'_'.$currKey.']"></div>';
		
		$pluginMustCondition[] = '$'.$qName.'_'.$currKey.' > 0 ';
	}
	
	$tbl .= '</div>';
	
	$tbl .= '<script>
		var restricted = [];
		var padding = '.$config['itemPadding'].';
		var offset = '.$config['offset'].';
		
		var Img = {
			width: "'.$config['imgWidth'].'",
			height: "'.$config['imgHeight'].'",
			valign: "'.$config['valign'].'",
			halign: "'.$config['halign'].'"
		};
		
		var Container = {
			width: "'.$config['width'].'",
			height: "'.$config['height'].'"
		};
		
		function BBox(sX, sY, eX, eY) {
			this.sX = sX;
			this.sY = sY;
			this.eX = eX;
			this.eY = eY;
		};
		
		BBox.prototype.getBox = function() {
			return [this.sX, this.sY, this.eX, this.eY];
		}
		
		BBox.prototype.toString = function() {
			return "(" + this.sX + " " + this.sY + "," + this.eX + " " + this.eY + ")";
		}
		
		BBox.prototype.contains = function(box) {
			// Za vsako točko this boxa praverimo če je znotraj
			if (this.sX >= box.sX && this.sX <= box.eX && this.sY >= box.sY && this.sY <= box.eY || this.sX <= box.sX && this.sX >= box.eX && this.sY <= box.sY && this.sY >= box.eY) {
				return true;
			} else if (this.sX >= box.sX && this.sX <= box.eX && this.eY >= box.sY && this.eY <= box.eY || this.sX <= box.sX && this.sX >= box.eX && this.eY <= box.sY && this.eY >= box.eY) {
				return true;
			} else if (this.eX >= box.sX && this.eX <= box.eX && this.sY >= box.sY && this.sY <= box.eY || this.eX <= box.sX && this.eX >= box.eX && this.sY <= box.sY && this.sY >= box.eY) {
				return true;
			} else if (this.eX >= box.sX && this.eX <= box.eX && this.eY >= box.sY && this.eY <= box.eY || this.eX <= box.sX && this.eX >= box.eX && this.eY <= box.sY && this.eY >= box.eY) {
				return true;
			} else return false;
		};
		
		$("#evalContainer").bind("mousedown", function(e) {
	    	e.metaKey = true;
		}).selectable({
			filter: ".answer",
			selecting: function( event, ui ) {
				$(ui.selecting).children().first().val($(ui.selecting).children().first().attr("id").split("_")[1]);
			},
			unselecting: function( event, ui ) {
				$(ui.unselecting).children().first().val("");
			}
		});
		
		$("#evalImage > img").load(function() {
			setUpImagePosition(Img);
		});
		
		function setUpImagePosition(image) {
			if (!isNaN(image.width) && parseInt(image.width) > 0) {
				$("#evalImage").width(image.width);
				$("#evalImage > img").width(image.width);
			}
			if (!isNaN(image.height) && parseInt(image.height) > 0) {
				$("#evalImage").height(image.height);
				$("#evalImage > img").height(image.height);
			}
			
			if (image.halign === "left") $("#evalImage").css({ left: 0 });
			else if (image.halign === "right") $("#evalImage").css({ left: $("#evalContainer").width() - $("#evalImage").width() });
			else if (image.halign === "center") $("#evalImage").css({ left: ($("#evalContainer").width() - $("#evalImage").width()) / 2 });
			else $("#evalImage").hide();
			
			if (image.valign === "top") $("#evalImage").css({ top: 0 });
			else if (image.valign === "bottom") $("#evalImage").css({ top: $("#evalContainer").height() - $("#evalImage").height() });
			else if (image.valign === "middle") $("#evalImage").css({ top: ($("#evalContainer").height() - $("#evalImage").height()) / 2 });
			else $("#evalImage").hide();
			
			var left = parseInt($("#evalImage").css("left"));
			var top = parseInt($("#evalImage").css("top"));
			var right = parseInt($("#evalImage").css("left")) + $("#evalImage").width();
			var bottom = parseInt($("#evalImage").css("top")) + $("#evalImage").height();
			
			restricted.push(new BBox(left, top, right, bottom));
			
			setTimeout(function() {
				setItems();
			}, 100);
		};
			
		function setUpContainer(container) {
			if (!isNaN(container.width) && parseInt(container.width) > 0) {
				$("#evalContainer").width(container.width);
			} else if (container.width == "fit") {
				$("#evalContainer").width("100%");
			}
			if (!isNaN(container.height) && parseInt(container.height) > 0) {
				$("#evalContainer").height(container.height);
			} else if (container.width == "fit") {
				$("#evalContainer").height($(document).height());
			}
		};
		
		function setItems() {
			var pad = (padding * 2 + offset * 2) + 10;
			var po = padding + offset + 10;
			
			$(".answer").each(function(index) {
				var end = false;
				
				while (!end) {
					
					var left = Math.floor((Math.random() * ($("#evalContainer").width() - $(this).width() - pad)) + 1);
					var top = Math.floor((Math.random() * ($("#evalContainer").height() - $(this).height() - pad)) + 1);
					
					var current = new BBox(left - po, top - po, (left + $(this).width() + po), (top + $(this).height() + po));
					var contains = false;
					
					for (var i=0; i<restricted.length; i++) {
						if (current.contains(restricted[i]) || restricted[i].contains(current)) {
							contains = true;
						}
					}
					
					if (!contains) {
						$(this).css({"left": left + "px"}).css({"top": top + "px"});
						restricted.push(current);
						
						end = true;
						
					}
				}
				
				checkItems();
			});
		};
		
		/* BUG in IE? */
		function checkItems() {
			$(".answer").each(function(index) {
				if ($(this).css("left") == 0) {
					setItems();
				}
			});
		};
		
		setUpContainer(Container);
	</script>';
    
$html .= $tbl;	

if ($q->must_answer &&  $pluginMustCondition) $_SESSION['mustAnswerCondition'] = implode(" OR ",$pluginMustCondition);

/*echo "<pre>";
var_dump($legArr);
echo "</pre>";*/

?>