//Gallery.js  Ver. 1.0.LS    06/30/09
//Script for driving a Zoom Gallery
//And getting AJAX Store Data for display
//Developed for LiveStore.biz
//Copyright 2009.  JJRJR, John Real.
// realwebdevelopment.com
//realsites.ziz
//E-mail John@realsites.biz

var steps=20; // how many steps when moving image
var delay=5;   // Delay in millisecs between steps
var iborder = "5px solid #ffffff";  //Set Size and Color for moving image border
var ajaxService ="services/store_data.php?store=";  //Full path name or URL to the AJAX Service Script to retrieve your data
var StoreDisplay="null"; //Store Display Data From Ajax Request;
//ajaxService="null"; //UNCOMMENT THIS LINE IF NO AJAX SERVICE IS TO BE CALLED

//Do Not Modify From Here
var StartPos = new Array();
var DispPos = new Array();
var StartSize = new Array();
var EndSize = new Array();
var x=0;  //x y indexes
var y=1;
var w=0; // Width Height Indexes
var h=1;
//To Here

StartSize[w]=0;  // Starting Thumbnail Size
StartSize[h]=0;
EndSize[w]=400;  //Ending Image display Size
EndSize[h]=400;

//If you want to scale and or use the original image dimensions You will make mods to get
//The original Image size here and dynamically set StartSize[] and EndSize[] from this value
var OrgSize = new Array(); //Do Not Remove 
OrgSize[w]=0;  //These are place holder for image size width and height if you retrieve them
OrgSize[h]=0;

//DO NOT MODIFY BELOW
var customHTMLTop="";  //Holder for Custom HTML to be placed before the image HTML
var customHTMLBot=""; //Holder for Custom HTML to be placed after the image HTML;
var data='null';
var newimage=0;
var StartElement = 0;
var StartImage=0;
var i=0;
var done=0;
var display=0;
var browser = new Browser();  //Create Browser Object with Type & Version
var AjaxBuffer="null"; //Storage Buffer for AJAX returned store data
var AjaxData="null"; // Ajax Data for Use By Application


function displayIt(){
	
	// This is called after image is moved and AJAX data has been retrieved
	// Here is where you can do the final format, additions, or changes to the
	// Data you will didplay in your desitination location
	//
	//  StoreDisplay =  The data returned from your AJAX request
	//  DisplayData  =   The HTML at the end of your image move if you want to use that in the final display
	//  display.innerHTML =  The target DOM location where your final data will be placed.
	
	
	//CUSTOM CODE AREA
//document.write(desc);

//Note: customHTMLTop & Bot can be set here and will be places before (Top) and After (Bot) the HTML for the image
//           HTML that starts in the Grid, allowing you to put additinal HTML around the image when displayed


StoreDisplay = AjaxData;  // Get The Ajax Data Returned

if(browser.isIE){
customHTMLTop="";
customHTMLBot='</br>Below is unformatted Store Data.  Will Format later</br><b>'+StoreDisplay+'</b></br>Sample Store Page with Cam To Cam';
}else{
customHTMLTop="<p><table><tr><td>";
customHTMLBot='</td></tr><tr><td>Below is unformatted Store Data.  Will Format later</td></tr><tr><td><b>'+StoreDisplay+'</b></td></tr><td><tr>Sample Store Page with Cam to Cam</td></tr></table></p>';
}
			
	DisplayData=d.innerHTML; //This Gets The HTML for the final image size into the Display Area COMMENT OUT IF YOU DO NOT WANT THE IMAGE DISPLAYED
	//Additional HTML or Changes can be made here before adding to the target display area
	//customHTMLTop & Bot are set in the mouse down event.
	display.innerHTML=customHTMLTop+DisplayData+customHTMLBot;
	//END CUSTOM CODE AREA
	
}

//MODIFICATIONS SHOULD NOT BE REQUIRED BELOW HERE
//EXCEPT POSSIBLY IN THE CALL TO THE AJAX ROUTINE FOUND IN THE MOUSE DOWN EVENT
//For the td.Gallery Class

function loadResults(){
// Move Ajax Data to Display Area
if(ajaxService=="null"){AjaxBuffer=" ";AjaxData=" ";return;}
AjaxData=AjaxBuffer;
AjaxBuffer="null";
}

function getAjaxData(param){

// Get a browser compatible XMLHttpRequest object
function getXMLObj()
{

   try
   {
      // Opera 8.0+, Firefox, Safari, IE7
      obj = new XMLHttpRequest();
   } 
   catch(e)
   {
      try
      {
         obj = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e)
      {
         try
         {
            obj = new ActiveXObject("Msxml2.XMLHTTP");
         }
         catch(e)
         {
            obj = null;
         }
      }
   }

   return obj;
}


// Process returned data from the server
function getData()
{

   if (XMLObj != null && XMLObj.readyState == 4)
   {
      if (XMLObj.status == 200)
      {
//Start Processing Store Data       
	     AjaxBuffer = XMLObj.responseText;
		//	document.write(storeData); 
		
		
//End Store Process Data

          } 
   }
}

//Start

if(ajaxService=="null") {AjaxBuffer=" ";AjaxData=" "; return;}

var  XMLObj = getXMLObj();

   if (XMLObj != null)
   {
          XMLObj.open("GET", ajaxService+param, true);
      XMLObj.onreadystatechange = getData;
          XMLObj.send("");
   }
   

// End getAjaxData()
}


function Browser() {
//Determines Browser and Version
  var ua, s, i;

  this.isIE    = false;
  this.isNS    = false;
  this.version = null;

  ua = navigator.userAgent;

  s = "MSIE";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isIE = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  s = "Netscape6/";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = parseFloat(ua.substr(i + s.length));
    return;
  }

  // Treat any other "Gecko" browser as NS 6.1.

  s = "Gecko";
  if ((i = ua.indexOf(s)) >= 0) {
    this.isNS = true;
    this.version = 6.1;
    return;
  }

}

function galleryOut(step){
setTimeout("galleryMove('" +step+ "',1)",delay);
}

function galleryIn(step){
setTimeout("galleryMove('" +step+ "',0)",delay);
}

function galleryMove(step,dir){

if(dir == 1){
//newimage.style.zIndex="254";
//Move Image Out Of Gallery
if (step<=steps){
d.style.top=StartPos[y]+(((DispPos[y]-StartPos[y])/steps)*step)+"px";
d.style.left=StartPos[x]+(((DispPos[x]-StartPos[x])/steps)*step)+"px";
newimage.width=StartSize[w]+(((EndSize[w]-StartSize[w])/steps)*step);
newimage.height=StartSize[h]+(((EndSize[h]-StartSize[h])/steps)*step);
galleryOut(step = ++step);
//loadResults();
return;
	}
if(AjaxBuffer!="null"){loadResults();}else{galleryOut(step);return;}	
done=1;
	if(browser.isIE){
	display.style.top=StartPos[y]+(((DispPos[y]-StartPos[y])/steps)*step)+"px";
	display.style.left=StartPos[x]+(((DispPos[x]-StartPos[x])/steps)*step)+"px";
	}
	i.width=EndSize[w];
	i.height=EndSize[h];
	display.innerHTML="";
	
	displayIt();  //  Call the code to create the HTML to diaplay in your Display Area

	display.style.visibility="visible";
	d.style.visibility="hidden";
}else{
//move image back to gallery
//document.write("Moving Back");
if (step<=steps){return;
//document.write("Moving Back "+step);
d.style.top=DispPos[y]-(((DispPos[y]-StartPos[y])/steps)*step)+"px";
d.style.left=DispPos[x]-(((DispPos[x]-StartPos[x])/steps)*step)+"px";
newimage.width=EndSize[w]-(((EndSize[w]-StartSize[w])/steps)*step);
newimage.height=EndSize[h]-(((EndSize[h]-StartSize[h])/steps)*step);
galleryIn(step = ++step);return;
	}
done=1;
}
}

// pass the HTML element return the x, y position
function xyPos(zxcobj){
  zxclft=zxcobj.offsetLeft;
  zxctop=zxcobj.offsetTop;
  while(zxcobj.offsetParent!=null){
  zxcpar=zxcobj.offsetParent;
  zxclft+=zxcpar.offsetLeft;
  zxctop+=zxcpar.offsetTop;
  zxcobj=zxcpar;
 }
 return [zxclft,zxctop];
}

function sleep(gap){ /* gap is in millisecs */
var then,now; then=new Date().getTime();
now=then;
while((now-then)<gap)
{now=new Date().getTime();}
}

var initEvents = function(behaviors){
    /* Add behaviors to the document when it's ready */
    $(document).ready(function(){
        var ruleAndEvent, rule, event, key, fn;
        for(key in behaviors){
            fn = behaviors[key];
            ruleAndEvent = key.split(":");
            rule = ruleAndEvent[0];
            event = ruleAndEvent[1];
            $(rule)[event](fn);
        }                     
    });                
}

//Begin Setup Events

initEvents({
    'img.Gallery:mouseover': function(event){
        document.body.style.cursor = 'hand';
		if(browser.isNS) document.body.style.cursor = 'pointer';
    },

    'img.Gallery:mouseout': function(event){
       	document.body.style.cursor = 'default';
    },

    'td.Gallery:mousedown': function(event){
	
	 if (StartElement!=0) {
	done=0;
	galleryIn(1);
	display.innerHTML="&nbsp;";
	display.style.visibilty="hidden";
	d.style.visibility="hidden";
	StartElement.style.visibility="visible";
	StartImage.width=OrgSize[w];
	StartImage.height=OrgSize[h];
	d.removeChild(newimage);
	}
       	  var start=document.getElementById(this.id);
	  StartPos=xyPos(start);
	  display=document.getElementById("Display");
	  DispPos=xyPos(display);
//	  document.write(x+" "+y+" X"+StartPos[x]+" Y"+StartPos[y]+" X"+DispPos[x]+" Y"+DispPos[y]);
	  start.style.visibility="hidden";
	  StartElement=this.id;
	StartImg=StartElement.replace("Table","");
//	document.write(StartElement);
	StartElement=document.getElementById(StartElement);
	isource=document.getElementById(StartImg).src;
	draghtml=start.innerHTML;
	draghtml=draghtml.replace('id=Gallery','id=Drag');
	image=this.id;
	image=image.replace("Table","Drag");

var dragimg= document.createElement('img');
dragimg.setAttribute('id', image);
d.appendChild(dragimg);
var  i=document.getElementById(image);
newimage=i;
i.style.border = iborder;
i.src=isource;



	StartImage=image;
	OrgSize[h]=i.height;
	OrgSize[w]=i.width;
	i.style.zIndex="254";
	i.width=StartSize[w];
	i.height=StartSize[h];
	d.style.top=StartPos[y]+"px";
	d.style.left=StartPos[x]+"px";
	d.style.visibility="visible";
	d.style.zIndex="254";

//Set Up Custom HTML For the final Display Image or HTML
//you can even get data from the current gallery selection or
//Do an AJAX call to get additional data to display
//Additional Final Display Customization can be found in the function galleryOut()

var cellvalue=this.id;
cellvalue = cellvalue.substring(cellvalue.indexOf("_")); //Get The row value of this grid element

//document.write(cellvalue);

//By using the cellvalue calculated above and the hidden field ID in the grid
//we can display that data in the final location for the image

var storeid=document.getElementById("Gallerygallery1RowComponentsdescription"+cellvalue).value;

getAjaxData(storeid); //  Call The Ajax Routine with the store id for this thumbnail


//Move Stuff
	  galleryOut(1);	
//End Move Stuff

    }

});

//End Setup Events


//Create Dragable div 
var dragdiv = document.createElement('div');
dragdiv.setAttribute('id', 'dragbox');
document.body.appendChild(dragdiv);
var d=document.getElementById("dragbox");
d.style.position="absolute";
d.style.top="0px";
d.style.left="0px";
d.style.width="0px";
d.style.height="0px";
d.style.visibility="hidden";