#!/usr/bin/perl -w

$VERSION="CURRENT";

use Switch;

# Location vars
$CGI_DIR = "cgi-bin/ris";
$DEMO_DIR= "ris";
$PUB_PATH="/~josecp";
$IMG_SRC_PATH="$PUB_PATH/src_imgDB";

# Path and other variables
$HOME = $ENV{'HOME'};
@INC = (@INC, "$HOME/public_html/$CGI_DIR");

# External functions
require "ris_utils.pl";


# PARAMETERS
my $NUM_ARTICLES = 10;
my $CELLS = 5;
my $ROWS = 3;

# IMG width and height (GLOBAL vars)
$IMG_W=200;
$IMG_H=180;

# GLOBAL vars
my $TAG_IMG = "image";
my $DB_TOTAL_DOCS = 0;
my $DOC_DIRECTORY = "";
my %ARTICLE_SAMPLE = ();




#-----------------------------------------------------------------------
#-----------------------------------------------------------------------
#-----------------------------------------------------------------------
&populateQueryFields;


# ===============================================================================================
# ===============================================================================================
# ===============================================================================================
# ===============================================================================================

# some GLOBAL vars
$dataset_pub_path="";
$DB=$queryString{"db"};
$DATASET=$queryString{"dataset"};
if ($queryString{"page"} eq "") {
	$PAGE=0;
}
else {
	$PAGE=$queryString{"page"};
}

%IMAGE_MASTER=();
# NOT NEEDED ?
#$query=$queryString{"query"};
#$mturkID=$queryString{"assignmentId"};

# some LOCAL vars
my ($imglist,$annot_file);
my ($line, $foo);
$imglist="$DB";
$foo="$DB";
$foo=~m/(.*)\/(.*)$/;
$annot_file="$1/annotations";
$dataset_pub_path="$IMG_SRC_PATH/$DATASET/$DATASET";

#-----------------------------------------------------------------------
#-----------------------------------------------------------------------
print "Content-type: text/html\n\n";

print "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n" ;
print "<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\">\n" ;
print "<head>\n" ;
## the following line screws up when using the form with IE8
#print "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE7\" />\n" ;
print "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />\n" ;
print "<title>Browsing ImgDB $DATASET</title>\n" ;

#print("<link rel=\"stylesheet\" media=\"all\" type=\"text/css\" href=\"css/cssplay_default.css\" />\n");
#print("<link rel=\"stylesheet\" type=\"text/css\" href=\"/~josecp/cgi-bin/css/plusimageviewer.css\" />");

print "<style type=\"text/css\">\n";


#========= show on center  ================
#========= left images ================
#========= right images ================

#-- Main styles
print "body { \n";
#print " font-family: Arial, Helvetica; font-size: 9pt; }\n";
print "	margin: 0;	padding: 0; \n";
print "	font: normal 10px Verdana, Arial, Helvetica, sans-serif; \n";
print "	line-height: 1.8em; \n";
#print "	background: #1d1d1d url(bg.jpg) repeat; \n";
print "} \n";
print "td {font-family: Arial; font-size: 9pt;}\n" ;
print "h1 { \n";
print "	font-family:Georgia, \"Times New Roman\", Times, serif; \n";
print "	text-align: center; \n";
print "	font-weight: normal; \n";
print "	font-size: 4em; \n";
print "	line-height: 1.2em; \n";
print "	margin: 0; padding: 20px 0; \n";
print "} \n";
print "h1 small { \n";
print "	display: block; \n";
print "	font-size: 0.5em; \n";
print "	color: #999; \n";
print "} \n";
print "img {border: none;} \n";

#-- Column Styles
print "ul.columns { \n";
#print "	width: 960px; \n";
print "	list-style: none; \n";
print "	margin: 0 auto; padding: 0; \n";
print "} \n";
print "ul.columns li { \n";
print "	width: ".$IMG_W."px; \n";
print "	float: left; display: inline; \n";
print "	margin: 10px; padding: 0; \n";
print "	position: relative; \n";
print "} \n";
print "ul.columns li:hover {z-index: 99;} \n";
#-- Thumbnail Styles
print "ul.columns li img { \n";
print "	position: relative; \n";
print "	filter: alpha(opacity=100); \n";
print "	opacity: 1; \n";
print "	-ms-filter: \"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)\"; \n";
print "} \n";
print "ul.columns li:hover img{ \n";
#print "	filter: alpha(opacity=30); \n";
#print "	opacity: 0.3; \n";
#print "	-ms-filter:\"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)\"; \n";
print "	z-index: 999; \n";
print "}  \n";
#-- Details Style
print "ul.columns li .info { \n";
print "	position: absolute; \n";
print "	left: -10px; top: -10px; \n";
print "	padding: ".($IMG_W-10)."px 10px 20px; \n";
print "	width: ".$IMG_W."px; \n";
print "	display: none; \n";
print "	background: #fff; \n";
print "	font-size: 1.2em; \n";
print "	-webkit-border-radius: 1em; \n";
print "	-moz-border-radius: 1em; \n";
print "	border-radius: 1em; \n";
print " border-style:solid; \n";
print " border-color:red; \n";
print " border-width:2px; \n";
print "} \n";
print "ul.columns li:hover .info {display: block;} \n";

print "ul.columns li h2 { \n";
print "	font-size: 1.2em; \n";
print "	font-weight: normal; \n";
print "	text-transform: uppercase; \n";
print "	margin: 0; padding: 10px 0; \n";
print "} \n";
#print "ul.columns li p {padding: 0; width: 500px; height: 500px; margin: 0; font-size: 0.9em;} \n";
print "ul.columns li p {padding: 0; margin: 0; font-size: 0.9em;} \n";


#======== div info settings ============
#print "#info {\n";
#print "   z-index:100;\n";
##print "   overflow:auto;\n";
##print "   overflow-x:hidden;\n";
##print "   height:300px; width:400px;\n";
#print "}\n";
print "</style>\n";

#======== body & table settings ===============
#print "        <style type=\"text/css\">\n" ;
#print "        <!--\n" ;
#print "        body { font-family: Arial, Helvetica; font-size: 9pt; }\n";
#print "        td{font-family: Arial; font-size: 9pt;}\n" ;
#print "        --->\n" ;
#print "        </style>\n" ;

#======== some javascript functions ============
print "<script type=\"text/javascript\">\n";
print "function image_selected(image,article)\n";
print "{\n";
#print "	  alert('image ' + image + ' clicked!')\n";
print "   location.replace('/cgi-bin/submit_human_eval.pl?img='+image+'&txt='+article+'&db=$db&query=$query')\n";
print "}\n\n";
print "function submit_eval(image)\n";
print "{\n";
print "	  alert('image ' + image + ' clicked!')\n";
print "   var img_sel = document.forms['form1'].elements['img'];\n";
print "   img_sel.value = image;\n";
print "   document.form1.submit();\n";
print "}\n";
#-----------------
print "function load(img,txt,dataset) {\n";
#print "	  alert('smn ' + img + ' from ' + dataset + ' will be shown')\n";
print "   var load = window.open('http://www.svcl.ucsd.edu/~josecp/$CGI_DIR/smn.pl?";
print "b=/home/josecp/public_html/src_imgDB/'+dataset+'&";
print "f1=img_'+dataset+'&";
print "s='+img+'&";
print "t='+txt+'&";
print "a=annotations'";
print ",'','scrollbars=yes,menubar=no,height=320,width=440,resizable=no,toolbar=no,location=no,status=no');\n";
print "}\n";
#-----------------
print "</script>\n";
print("<script type=\"text/javascript\" src=\"/~josecp/cgi-bin/js/jquery-1.4.js\"></script>\n");
print("<script type=\"text/javascript\" src=\"/~josecp/cgi-bin/js/plusimageviewer.js\"></script>\n");



print "</head><body>\n" ;

#print "<h2 align=center>$DATASET</h2>\n";
#print "<p><b>INSTRUCTIONS</b> - moving the mouse over the thumbnails should allow you to view a magnified version of the respective image.\n";
#print " Please click on the picture (large or thumbnail) that  you're absolutely sure of your choice</p>\n";

#print "\n<div id=\"info\">\n";
print "<table border=0>\n";


## populate the hash array with the images
%IMAGE_MASTER= &create_hash_array_of_image_location($imglist);
@ANNOTATIONS= &read_annotations($annot_file);
$PREVIOUS=$PAGE-($CELLS*$ROWS);
$NEXT=$PAGE+($CELLS*$ROWS);
if ($PREVIOUS<0) {$PREVIOUS=keys(%IMAGE_MASTER)-($CELLS*$ROWS);}
if ($NEXT>=keys(%IMAGE_MASTER)) {$NEXT=0;}
#print ", previous=$PREVIOUS\n";
#print " and next=$NEXT\n";
# ===============================================================
#$PUB_PATH="/~josecp";
#$IMG_SRC_PATH="$PUB_PATH/src_imgDB";
$DB =~ m/(.*)\/(.*)$/;
$test_set=$2;
print "<tr><td align=center colspan=$CELLS><b>$DATASET</b></td></tr>\n";
#print "<tr><td align=center colspan=$CELLS><b>$DATASET</b> &nbsp ($IMG_SRC_PATH/$DATASET/$test_set)</td></tr>\n";
print "<tr><td colspan=$CELLS><br></td></tr>\n";
## print (top) previous & next buttons
print "<tr><td align=center>\n";
	print("<a href=\"$PUB_PATH/$CGI_DIR/browse_$VERSION.pl\?db=$DB\&dataset=$DATASET\&page=$PREVIOUS\" alt=\"\" />Previous</a>\n");
print "</td>\n";
print "<td align=center colspan=".($CELLS-2).">\n";
	print("<a href=\"$PUB_PATH/$CGI_DIR/browse_$VERSION.pl\?db=$DB\&dataset=$DATASET\&page=0\" alt=\"\" />Home</a>\n");
print "</td>\n";
print "<td align=center>\n";
	print("<a href=\"$PUB_PATH/$CGI_DIR/browse_$VERSION.pl\?db=$DB\&dataset=$DATASET\&page=$NEXT\" alt=\"\" />Next</a>\n");
print "</td></tr>\n";
#print "<tr><td align=center colspan=$CELLS>@ANNOTATIONS</td></tr>\n";
#print "<tr><td align=center colspan=$CELLS>".$ANNOTATIONS[0]."</td></tr>\n";


## start pictures table...
print "<tr>\n";
my $col_count=0;
my $threshold = $CELLS-int($CELLS/2);
my $p_class="p1";

#foreach $key ( keys %IMAGE_MASTER ) {
for($i=$PAGE;$i<($PAGE+$CELLS*$ROWS);$i++) {
    $key="$i";

    if ($key<keys(%IMAGE_MASTER)) {
	## grab an image...
	$tmpImg=$IMAGE_MASTER{$key}{img};
	## determine the image path and class
	($img,$location) = &getImageInfo($tmpImg);
	## grab corresponding text
	$tmpTxt=$IMAGE_MASTER{$key}{txt};
	$DB =~ m/(.*)\/(.*)$/;
	$txtFile="$1/$DATASET.TXT/$tmpTxt";
	open(AUX, "<$txtFile");
	@txt = <AUX>;
	## get category information
	$tmpCat=$IMAGE_MASTER{$key}{cat};
	$class=@ANNOTATIONS[$tmpCat-1];

	## formating and displaying the images
	$col_count++;
	if ($col_count > $threshold) { 
		$p_class="p2";
	}
	else { 
		$p_class="p1";
	};

# changed here (remove one comment symbol)
        print("<td align=center>\n");
	print "<ul class=columns>\n";
	print("<li>\n");
	# $key should start at 1 for display purposes...
	$foo=$key+1;
	#print("<a href=\"javascript: submit_eval('$txtFile')\"><img src=\"$img\" style=\"width:".$IMG_W."px;height:".$IMG_H."px\" alt=\"\" />\n");
	print("<a href=\"javascript: load('$foo','$test_set','$DATASET')\"><img src=\"$img\" style=\"width:".$IMG_W."px;height:".$IMG_H."px\" alt=\"\" />\n");
	print("<div class=info>\n");
	print("<h2>$foo -- $class</h2>\n");
	print("<p align=left>$tmpTxt</p>\n");
	print("</div>\n");
	print("</li>\n");
	print "</ul>\n";
	print("<\/td>");
	if ($col_count == $CELLS) {
		print "</tr>\n";
		print "<tr><td colspan=$CELLS><br></td></tr>\n";
		$col_count=0;
	}
    }

}
#---------------------------------------

if ($col_count > 0) {
        print "<td colspan=".($CELLS-$col_count)."><br></td></tr>\n";
}

### print (bottom) previous & next buttons
print "<tr><td align=center>\n";
	print("<a href=\"$PUB_PATH/$CGI_DIR/browse_$VERSION.pl\?db=$DB\&dataset=$DATASET\&page=$PREVIOUS\" alt=\"\" />Previous</a>\n");
print "</td>\n";
print "<td align=center colspan=".($CELLS-2).">\n";
	print("<a href=\"$PUB_PATH/$CGI_DIR/browse_$VERSION.pl\?db=$DB\&dataset=$DATASET\&page=0\" alt=\"\" />Home</a>\n");
print "</td>\n";
print "<td align=center>\n";
	print("<a href=\"$PUB_PATH/$CGI_DIR/browse_$VERSION.pl\?db=$DB\&dataset=$DATASET\&page=$NEXT\" alt=\"\" />Next</a>\n");
print "</td></tr>\n";


#==============================================
#========== HTML FORM definitions =============
#==============================================
#print "<form name=\"form1\" method=\"post\" action=\"submit.pl\">\n";
#print "   <input type=\"hidden\"  name=\"db\"       value=\"$db\">              <br>\n";
#print "   <input type=\"hidden\"  name=\"query\"    value=\"$query\">           <br>\n";
#print "   <input type=\"hidden\"  name=\"article\"  value=\"$doc\">             <br>\n";
#print "   <input type=\"hidden\"  name=\"img\"      value=\"\">                 <br>\n";
#print "</form>\n";

print "</table>\n";
#print "\n</div> <!-- end of info -->\n";

# some useful info
print "size of hash:  " . keys( %IMAGE_MASTER ) . " and page=".(1+$PAGE/($CELLS * $ROWS))." (images ".($PAGE+1)."..".($PAGE+$CELLS*$ROWS).").\n";

print "</body></html>\n";


#-----------------------------------------------------------------------
#-----------------------------------------------------------------------

