function WriteWebsiteTopMenu(){
document.write('<div id="menu-header-wrap">');
document.write('<div id="menu-header">');
document.write('<ul class="menu">');
document.write('<li class="drop"><a href="http://www.feng-gui.com/products.htm">Products</a> <span class="toggle">&nbsp;</span>');
document.write('<ul>');
document.write('<li><a href="http://www.feng-gui.com/products.htm">Overview</a></li>');
document.write('<li><a href="http://www.feng-gui.com/order.htm">Price</a></li>');
document.write('<li><a href="http://www.feng-gui.com/order.htm#order">Order</a></li>');
document.write('</ul>');
document.write('</li>');
document.write('<li class="drop"><a href="http://www.feng-gui.com/faq.htm">&nbsp;&nbsp;Resources&nbsp;&nbsp;&nbsp;</a><span class="toggle">&nbsp;</span>');
document.write('<ul>');
document.write('<li><a href="http://www.feng-gui.com/faq.htm">Attention Analysis</a></li>');
document.write('<li><a href="http://www.feng-gui.com/help.htm">Dashboard Help</a></li>');
document.write('<li><a href="http://www.feng-gui.com/science.htm">Science & Quality</a></li>');
document.write('<li><a href="http://www.feng-gui.com/services.htm">Developers</a></li>');
document.write('</ul>');
document.write('</li>');

document.write('<li class="drop"><a href="http://www.feng-gui.com/clients.htm">Customers</a><span class="toggle">&nbsp;</span>');
document.write('<ul>');
document.write('<li><a href="http://www.feng-gui.com/clients.htm">Customer List</a></li>');
document.write('<li><a href="http://www.feng-gui.com/clients.htm#Testimonials">Testimonials</a></li>');
document.write('<li><a href="http://dashboard.feng-gui.com/">Dashboard Login</a></li>');
document.write('</ul>');
document.write('</li>');

document.write('<li class="drop"><a href="http://www.feng-gui.com/about.htm">Company</a><span class="toggle">&nbsp;</span>');
document.write('<ul>');
document.write('<li><a href="http://www.feng-gui.com/about.htm">About us</a></li>');
document.write('<li><a href="http://blog.feng-gui.com/">Blog</a></li>');
document.write('<li><a href="http://www.feng-gui.com/professionalservices.htm">Professional Services</a></li>');
document.write('<li><a href="http://www.feng-gui.com/research.htm">Research</a></li>');
document.write('</ul>');
document.write('</li>');
document.write('</ul>');
document.write('</div>');
document.write('</div>');
}

function WriteWebsiteBottom(){
document.write('<div class="pnl_down">');
document.write('<center>');
document.write('<div>');
document.write('<div style="height:20px">');
document.write('&copy; 2007-2011 Feng-GUI - Feng Shui for graphic user interfaces.&trade;<br />');
document.write('</div>');
document.write('<div style="width:360px">');
document.write('<div style="float:left">');
document.write('<a href="http://www.linkedin.com/groups/FengGUI-3915779?gid=3915779" target="_blank">');
document.write('<img src="http://www.feng-gui.com/images/linkedin_logo_16x16.jpg" /></a>&nbsp;&nbsp;<a href="http://www.facebook.com/pages/Feng-GUI/181913941851194?sk=wall" ');
document.write('target="_blank"><img src="http://www.feng-gui.com/images/facebook_logo_16x16.gif" /></a>&nbsp;&nbsp;<a href="http://twitter.com/FengGUI" ');
document.write('target="_blank"><img src="http://www.feng-gui.com/images/twitter_logo_16x16.png" /></a>&nbsp;&nbsp;</div> ');
document.write('<div>');
document.write('<a href="http://www.feng-gui.com/terms.htm">Terms of Service</a>&nbsp;-&nbsp;<a href="http://www.feng-gui.com/privacy.htm">Privacy Policy</a>');
document.write('&nbsp;-&nbsp;<a href="http://www.feng-gui.com/sla.htm">Service Level Agreement</a>');
document.write('</div>');
document.write('</div>');
document.write('</div>');
document.write('</center>');
document.write('</div>');
}

// globals
var imgPreloader_width;
var imgPreloader_height;
var imgOrig;var imgAtt;var imgGaze;var imgOp;var imgAOI;
var srcOrig;var srcAtt;var srcGaze;var srcOp;var srcAOI;
var g_loadAjax;

function reloadAOIImage(){
  imgAOI = document.getElementById("imgAOI");
  srcAOI = imgAOI.src;
  if (srcAOI.lastIndexOf('?') > 0)
    srcAOI = srcAOI.substring(0, srcAOI.lastIndexOf('?'));
  srcAOI = srcAOI + "?" + (new Date()).getTime();
  imgAOI.src = srcAOI;
}

// set the main reports for the current thumbnail
function SetMainImage(ThumbImageId, shouldLoadAjax){
if (typeof shouldLoadAjax == 'undefined') g_loadAjax = true;

//using this input to transfer the selected image to the server
document.getElementById("selected_imgImageOrig").value = ThumbImageId;

showProgressDialog('Loading image and reports ...<br/>Please wait. It may take few seconds.', 60);

// set main images
srcOrig = document.getElementById(ThumbImageId).src;
srcOrig = srcOrig.replace("_thumb.png",".png");
srcAtt = srcOrig.replace("files/images/","files/heatmaps/");
srcGaze = srcAtt.replace(".png", "_gazeplot.png");
srcOp = srcAtt.replace(".png", "_opacity.png");
srcAOI = srcAtt.replace(".png", "_aoi.png") + "?" + (new Date()).getTime();

// set the annotation canvas image
var obj_imgImage_Canvas = document.getElementById("image-annotate-canvas");
obj_imgImage_Canvas.style.backgroundImage = "url(" + srcOrig.replace(".png", "_thumb.png") + ")";

imgOrig = document.getElementById("imgImageOrig");
imgAtt = document.getElementById("imgImage");
imgGaze = document.getElementById("imgGazePlot");
imgOp = document.getElementById("imgImageOpacity");
imgAOI = document.getElementById("imgAOI");

imgPreloader = new Image();
imgPreloader.onload = function() {
  imgPreloader_width = this.width;
  imgPreloader_height = this.height;

  thumbRatio = 384 / 256;
  imageRatio = imgPreloader_width / imgPreloader_height;

  //if image is smaller than minimum size, load it as is
  if ((imgPreloader_width <= 384) && (imgPreloader_height <= 256))
  {
    imgOrig.style.height = imgPreloader_height +"px";
    imgAtt.style.height = imgPreloader_height + "px";
    imgGaze.style.height = imgPreloader_height + "px";
    imgOp.style.height = imgPreloader_height + "px";
    imgAOI.style.height = imgPreloader_height + "px";
    obj_imgImage_Canvas.style.height = imgPreloader_height + "px";
    
    imgOrig.style.width = imgPreloader_width +"px";
    imgAtt.style.width = imgPreloader_width + "px";
    imgGaze.style.width = imgPreloader_width + "px";
    imgOp.style.width = imgPreloader_width + "px";
    imgAOI.style.width = imgPreloader_width + "px";
    obj_imgImage_Canvas.style.width = imgPreloader_width + "px";
    }
    else
    {
      thumbWidth = 384; thumbHeight = 256;
      if (thumbRatio < imageRatio) {
        thumbHeight = (thumbWidth / imageRatio);
      } else {
        thumbWidth = (thumbHeight * imageRatio);
      }
      imgOrig.style.width= thumbWidth +"px";
      imgAtt.style.width = thumbWidth + "px";
      imgGaze.style.width = thumbWidth + "px";
      imgOp.style.width = thumbWidth + "px";
      imgAOI.style.width = thumbWidth + "px";
      obj_imgImage_Canvas.style.width = thumbWidth + "px";
      
      imgOrig.style.height = thumbHeight +"px";
      imgAtt.style.height = thumbHeight + "px";
      imgGaze.style.height = thumbHeight + "px";
      imgOp.style.height = thumbHeight + "px";
      imgAOI.style.height = thumbHeight + "px";
      obj_imgImage_Canvas.style.height = thumbHeight + "px";
  }
};
imgPreloader.src = srcAtt;

// sync download all images
srcOrig = document.getElementById(ThumbImageId).src;
srcOrig = srcOrig.replace("_thumb.png",".png");
srcAtt = srcOrig.replace("files/images/","files/heatmaps/");
srcGaze = srcAtt.replace(".png", "_gazeplot.png");
srcOp = srcAtt.replace(".png", "_opacity.png");
srcAOI = srcAtt.replace(".png", "_aoi.png") + "?" + (new Date()).getTime();
imagesQueue = imagesQ;
imagesQueue.onComplete = function()
{
	preLoadAllImagesCallback();
}
imagesQueue.queue_images([srcOrig,srcAtt,srcGaze,srcOp,srcAOI]);
imagesQueue.process_queue();

}

function preLoadAllImagesCallback() {
imgOrig.src = srcOrig;
imgAtt.src = srcAtt;
imgGaze.src = srcGaze;
imgOp.src = srcOp;
imgAOI.src = srcAOI;
// load annotation 
if (g_loadAjax){
//block UI and unblock on click
    //$j.blockUI({ message: null }); 
    //$j('.blockOverlay').click($j.unblockUI);
    $j.fn.annotateImage.ajaxLoad(ann_object);
}
}


function SetMainImageScaled() {
  // set main original image
  var srcOrig = document.getElementById("imgImageOrig").src;
  var srcAtt = srcOrig;
  srcAtt = srcAtt.replace("files/images/", "files/heatmaps/");

  // rescale the image
  imgOrig = document.getElementById("imgImageOrig");
  imgAtt = document.getElementById("imgImage");

  imgPreloader = new Image();
  imgPreloader.onload = function() {
      imgPreloader_width = this.width;
      imgPreloader_height = this.height;

      thumbRatio = 384 / 256;
      imageRatio = imgPreloader_width / imgPreloader_height;

      //if image is smaller than minimum size, load it as is
      if ((imgPreloader_width <= 384) && (imgPreloader_height <= 256)) {
          imgOrig.style.height = imgPreloader_height + "px";
          imgAtt.style.height = imgPreloader_height + "px";
          imgOrig.style.width = imgPreloader_width + "px";
          imgAtt.style.width = imgPreloader_width + "px";
      }
      else {
          thumbWidth = 384; thumbHeight = 256;
          if (thumbRatio < imageRatio) {
              thumbHeight = (thumbWidth / imageRatio);
          } else {
              thumbWidth = (thumbHeight * imageRatio);
          }
          imgOrig.style.width = thumbWidth + "px";
          imgAtt.style.width = thumbWidth + "px";
          imgOrig.style.height = thumbHeight + "px";
          imgAtt.style.height = thumbHeight + "px";
      }

  };
  imgPreloader.src = srcAtt;

  imgOrig.src = srcOrig;
  imgAtt.src = srcAtt;
}

function DownloadFile(service_url, image_id){
 obj_img = document.getElementById(image_id);
 var url = service_url + '?type=zip&url=' + obj_img.src + "&" + (new Date()).getTime();
 location.href = url;
}