//class Imagescroll
//number of images,aspect, data array
//css styles - add css styles file
//reflection on/off - add reflection.js file
//animations horizontal,zoom:{accelerate,linear,break,bounce,elastic}

function Imagescroll(onSelect){
this.onSelect=onSelect;
//set defaults
this.myActionType="slide";//{iframe,player,slide,gotoslide}
this.myAspect=4/3;
this.myDepth=0;//depth not implemented
this.myImageCount=5;
this.myImgWidth="";
this.myImgHeight="";
this.myReflect="0";
this.setEasing("accelerate","accelerate");
this.myBehavior="onclickselect";
this.myZoomScale=2;
var tds=getCssStyle("td.imagescroll");
if(tds){
	this.myOriginalFontSize=myLng(tds["fontSize"]);
}//end if
}//end function

Imagescroll.prototype.init=function Imagescroll_init(obj,imagearray){
obj.mainobject=this;
this.myContainerId=obj.id;
this.myImageArray=imagearray;
//this.myAspect=aspect;
this.setImageCount(this.myImageCount);
if(contains(this.myBehavior,"zoom")){
	this.titlebgOpacity=getOpacityFromCSS("div.imagezoomtitlebg");
	appendHTML(document.body,this.html_imageZoom());//add imagezoom objects
	div("imagezoomtitlebg").mainobject=this;
	var tds=getCssStyle("img.imagezoom");
	this.imagezoomPadding=2*myLng(tds["padding"])+2*myLng(tds["borderWidth"]);
}//end if
//var width=request_queryvalue(qs,"imgWidth");
//var height=request_queryvalue(qs,"imgHeight");
if(this.myImgWidth>""){
	this.setThumbnailDimensions(this.myImgWidth,this.myImgHeight);
}//end if

//this.myReflect=this.hasReflect();
//this.setEasing("accelerate","accelerate");
//this.myReflect="1";
//this.myBehavior="onclickselect";
}//end function

Imagescroll.prototype.setProperty=function Imagescroll_setProperty(name,value){
switch(name.toLowerCase()){
case "actiontype":this.myActionType=value; return;
case "aspect":this.myAspect=aspectStr2Float(value); return;
case "imagecount":this.myImageCount=parseInt(value);return;//this.setImageCount(parseInt(value)); return;
case "imgwidth":this.myImgWidth=parseInt(value); return;
case "imgheight":this.myImgHeight=parseInt(value); return;
case "reflect":this.myReflect=value; return;
case "scrolleasing":this.myScrollEasing=value; return;
case "zoomeasing":this.myZoomEasing=value; return;
case "behavior":this.myBehavior=value; return;
case "zoomscale":this.myZoomScale=parseFloat(value); return;
case "producer_id":this.myPRODUCER_ID=value; return;
}//end switch
}//end function

function aspectStr2Float(aspectStr){
var x=replace(aspectStr,"/",":").split(":");
if(x.length==2){
	if(x[1]>0){
		return parseInt(x[0])/parseInt(x[1]);
	}//end if
}//end if
return parseFloat(aspectStr);
}//end function

Imagescroll.prototype.setActionType=function Imagescroll_setActionType(h){
this.myActionType=h;
}//end function

Imagescroll.prototype.setImageArray=function Imagescroll_setImageArray(a){
//set imagearray
}//end function

Imagescroll.prototype.setEasing=function Imagescroll_setEasing(h,z){
this.myScrollEasing=h;
this.myZoomEasing=z;
}//end function

Imagescroll.prototype.setBehavior=function Imagescroll_setBehavior(h){
this.myBehavior=h;
}//end function

Imagescroll.prototype.setImageCount=function Imagescroll_setImageCount(n){
//set thumbnail width/height according to number of visible images
this.myImageCount=n;
var tds=getCssStyle("td.imagescroll");
this.tdPadding=myLng(tds["paddingLeft"])+myLng(tds["paddingRight"])+2*myLng(tds["borderWidth"]);
var destination=div(this.myContainerId);
this.width=destination.offsetWidth;
this.thumbnailWidth=Math.floor(this.width/this.myImageCount-this.tdPadding);
this.thumbnailHeight=Math.floor(this.thumbnailWidth/this.myAspect);
this.width=this.myImageCount*(this.thumbnailWidth+this.tdPadding)+3;
}//end function

Imagescroll.prototype.setThumbnailDimensions=function Imagescroll_setThumbnailDimensions(width,height){
//set thumbnail width/height scaling 
this.thumbnailWidth=width;
if(height){
	this.thumbnailHeight=height;
	this.myAspect=width/height;
}else{
	this.thumbnailHeight=width/this.myAspect;
}//end if
var destination=div(this.myContainerId);
this.myImageCount=Math.floor(destination.offsetWidth/(this.thumbnailWidth+this.tdPadding));
this.width=this.myImageCount*(this.thumbnailWidth+this.tdPadding)+2;
}//end function

Imagescroll.prototype.hasReflect=function Imagescroll_hasReflect(){
return (typeof(addReflections)!="undefined");
}//end function

Imagescroll.prototype.refresh=function Imagescroll_refresh(){
this.paint();
}//end function

Imagescroll.prototype.paint=function Imagescroll_paint(){
var imgwidth=this.thumbnailWidth;
var imgheight=this.thumbnailHeight;
var container=div(this.myContainerId);
var imagetable=this.html_imagetable(this.myImageArray,imgwidth,imgheight,container.offsetHeight);
var str=this.html_paint(imagetable,container.offsetWidth,container.offsetHeight,imgwidth,imgheight);
container.innerHTML=str;
div("imagescrolltable").mainobject=this;
}//end function

Imagescroll.prototype.html_paint=function Imagescroll_html_paint(imagetable,width,height,imgwidth,imgheight){
var str=this.html_template();
str=nreplace(str,"z_LEFT",0);
str=nreplace(str,"z_WIDTH",width);
str=nreplace(str,"z_HEIGHT",iif(IE(),height+2,height));
str=nreplace(str,"z_IMAGETABLE",imagetable);
return str;
}//end function

Imagescroll.prototype.html_imageZoom=function Imagescroll_html_imageZoom(){
return "<div id='imagezoomtitlebg' class='imagezoomtitlebg' style='visibility:hidden; z-index:19; left:0px; top:0px; width:100px; position:absolute;'></div>\n<div id='imagezoomtitlefront' class='imagezoomtitlefront' style='visibility:hidden; z-index:20; left:0px; top:0px; width:100px; height:50px; position:absolute;'>\n<div id='imagezoomstars' class='imagezoomstars' style='float:left;'></div><div id='imagezoomeventduration' class='imagezoomeventduration' style='float:right;'>z_EVENTDURATION</div><br><div id='imagezoomeventdescription' class='imagezoomeventdescription' style='float:left;'>z_EVENTDESCRIPTION</div></div>\n<img id='imagezoom' class='imagezoom' style='visibility:hidden; z-index:30; width:100px; height:50px; left:0px; top:0px; position:absolute;' onclick='gImagescroll.onclick(this,event)' onmouseout='gImagescroll.hideZoom(this,event)'>&nbsp;</div>";
}//end function

Imagescroll.prototype.hideZoom=function Imagescroll_hideZoom(obj,e){
hideDiv(div("imagezoom"));
hideDiv(div("imagezoomtitlebg"));
hideDiv(div("imagezoomtitlefront"));
}//end function

Imagescroll.prototype.onclick=function Imagescroll_onclick(obj,e){
var imgObject=eventTrigger(e);
var imageUrl=imgObject.src;
var ix=this.getIndexForImage(imageUrl);
if(ix>-1){
	this.hideZoom(obj,e);
	this.onSelect(ix,this.myImageArray[ix][1],this.myImageArray[ix][5]);
}else{
}//end if
}//end function

Imagescroll.prototype.getIndexForImage=function Imagescroll_getIndexForImage(imageUrl){
for(var ix=0;ix<this.myImageArray.length;ix=ix+1){
	if(endswith(imageUrl.toLowerCase(),this.myImageArray[ix][2].toLowerCase())){
		return ix;
	}//end if
}//next
return -1;
}//end function

Imagescroll.prototype.resize=function Imagescroll_resize(width,height,q_scale){
try{
var iy=0;
if(div("imagescrollframe")){
	var tempIMAGEARRAY=this.myImageArray;
	var tempObj=div(this.myContainerId);
	tempObj.innerHTML="";
	this.myImgWidth="";
	this.setFontScale(q_scale);
	this.init(tempObj,tempIMAGEARRAY);
	this.paint();
	if(typeof(addReflections)!="undefined"){
		addReflections();
	}//end if
//	div("imagescrollframe").style.width=width;
//	div("imagescrollframe").style.height=height;
}//end if
}catch(errObj){
	logga("Imagescroll_resize "+errObj.message);
}//end catch
}//end function

Imagescroll.prototype.setFontScale=function Imagescroll_setFontScale(q_scale){
if(this.myOriginalFontSize>0){
	var tds=getCssStyle("td.imagescroll");
	tds["fontSize"]=Math.floor(this.myOriginalFontSize*q_scale)+"px";
}//end if
}//end function

Imagescroll.prototype.html_template=function html_template(){
return "<div id='imagescrollframe' class='imagescrollframe' style='left:z_LEFTpx; top:0px; width:z_WIDTHpx; height:z_HEIGHTpx; position:absolute; overflow-x:hidden; overflow-y:hidden; overflow:hidden; '>\nz_IMAGETABLE\n</div>\n";
}//end function

var gImagescrollData;
Imagescroll.prototype.html_imagetable=function Imagescroll_html_imagetable(tablearray,imgwidth,imgheight,tdheight){
var str,sep,tabletemplate,tagtemplate,row,fields,tag,id;
str="";
sep="";
gImagescrollData=""+tablearray.length+","+imgwidth+","+this.tdPadding;
this.myTablewidth=tablearray.length*(imgwidth+this.tdPadding);
tabletemplate="<table id='imagescrolltable' class='imagescroll' style='width:z_TABLEWIDTHpx;' cellpadding=0 cellspacing=0 z_ACTIONATTRIBUTE><tr>z_TD</tr></table>";
tabletemplate=nreplace(tabletemplate,"z_TABLEWIDTH",this.myTablewidth);
tabletemplate=nreplace(tabletemplate,"z_ACTIONATTRIBUTE",this.getActionAttribute());
tagtemplate="<td id='z_ID' valign='bottom' align='center' style='height:z_TDHEIGHTpx;' class='z_03' >z_00<br><img id='imgz_ID' style='width:z_IMGWIDTHpx; height:z_IMGHEIGHTpx;' width='z_IMGWIDTH' height='z_IMGHEIGHT' z_REFLECT src='z_02' ></td>\n";
//tagtemplate="<td id='imgz_ID' valign='bottom' align='center'  style='height:z_TDHEIGHTpx' class='z_03' >z_00<br><img width='z_IMGWIDTH' height='z_IMGHEIGHT' class='reflect' src='z_02' onmouseover='doFrontMovie(this,\"z_ID\")'></td>\n";
tagtemplate=nreplace(tagtemplate,"z_IMGWIDTH",imgwidth);
tagtemplate=nreplace(tagtemplate,"z_IMGHEIGHT",imgheight);
tagtemplate=nreplace(tagtemplate,"z_TDHEIGHT",tdheight);
tagtemplate=nreplace(tagtemplate,"z_REFLECT",iif(this.myReflect=="1","class='reflect'",""));
id=0;
for(var ix=0;ix<tablearray.length;ix=ix+1){
	fields=tablearray[ix];
	tag=nreplace(tagtemplate,"z_ID",ix);
	str=str+sep+this.buildTag(tag,fields);
	id=id+1;
	sep="\n";
}//next
return nreplace(tabletemplate,"z_TD",str);
}//end function

Imagescroll.prototype.getActionAttribute=function Imagescroll_getActionAttribute(){
//onhoverzoom,onclickzoom,onhoverzoomtitle,onclickzoomtitle,onclickselect
switch(this.myBehavior){
case "onclickzoomtitle":return "onclick='this.mainobject.doZoomMovieTitle(event,this,true)'";
case "onhoverzoomtitle":return "onmouseover='this.mainobject.doZoomMovieTitle(event,this,true)'";
case "onclickzoom":return "onclick='this.mainobject.doZoomMovieTitle(event,this,false)'";
case "onhoverzoom":return "onmouseover='this.mainobject.doZoomMovieTitle(event,this,false)'";
case "onclickselect":return "onclick='this.mainobject.onclick(this,event)'";
}//end select
}//end function

Imagescroll.prototype.buildTag=function Imagescroll_buildTag(tagtemplate,fields){
var tag;
tag=tagtemplate;
for(var ix=0;ix<fields.length;ix=ix+1){
	tag=nreplace(tag,"z_"+two(ix),fields[ix]);
}//next
return tag;
}//end function

//get y coordinate from x to form an arc, x is the relative position within the container
Imagescroll.prototype.getBottomPaddingArc=function Imagescroll_getBottomPaddingArc(x){
var b=x/(containerwidth-1);
return this.depth*squareFunction(b);
}//end function

function squareFunction(b){
return 4*b*(1-b);
}//end function

//------------------Horizontal moves---------------
Imagescroll.prototype.scrollBackward=function Imagescroll_scrollBackward(){
var objectname="imagescrolltable";
if(div(objectname).offsetLeft<0){
	this.doMoveHorizontal(objectname,this.pixelDistance(5),this.myScrollEasing);
}//end if
}//end function

Imagescroll.prototype.scrollForward=function Imagescroll_scrollForward(){
var objectname="imagescrolltable";
if(div(objectname).offsetLeft+div(objectname).offsetWidth>this.pixelDistance(5)){
	this.doMoveHorizontal(objectname,-this.pixelDistance(5),this.myScrollEasing);
}//end if
}//end function

Imagescroll.prototype.pixelDistance=function Imagescroll_pixelDistance(imageCount){
return iif(IE(),this.width-2,this.width-2);
}//end function

Imagescroll.prototype.doMoveHorizontal=function Imagescroll_doMoveHorizontal(objectname,distance,easing){
if(div(objectname).targetLeft==undefined){
	div(objectname).targetLeft=div(objectname).offsetLeft;
}//end if
var startpos=div(objectname).targetLeft;
gAnimate.setAnimation(objectname,1500,30,easing,startpos,distance,"setLeft");
div(objectname).targetLeft=div(objectname).targetLeft+distance;
}//end function

function setLeft(objectname,value){
div(objectname).style.left=value+"px";
}//end function

//------------------Zooming---------------
Imagescroll.prototype.doZoomMovieTitle=function Imagescroll_doZoomMovieTitle(evt,tableobj,showTitleTag){
var obj=getsrcElement(evt);
var thumbnailWidth=(obj.offsetWidth);
var thumbnailHeight=(obj.offsetHeight);

this.attachZoom(obj);
var url=obj.src;
var ix=parseInt(mid(obj.id,3,3));
if(!isNaN(ix)){
	if(showTitleTag==true){
		var eventdescription=this.myImageArray[ix][4];
		var eventduration=this.myImageArray[ix][5];
		var stars=this.myImageArray[ix][6];
		this.doZoomInWithTitleTag("imagezoom",50,url,500,this.myZoomEasing,eventdescription,eventduration,stars);
	}else{
		this.doZoomIn("imagezoom",50,url,500,this.myZoomEasing);
	}//end if
}//end if
}//end function
			
Imagescroll.prototype.doZoomInWithTitleTag=function Imagescroll_doZoomInWithTitleTag(objectname,distance,url,duration,easing,eventdescription,eventduration,stars){
var obj=div(objectname);
var imagezoomtitlebg=div("imagezoomtitlebg");
var imagezoomtitlefront=div("imagezoomtitlefront");
if(obj.animationTimeout>now()){
	return false;
}//end if
var startpos=0;
imagezoomtitlefront.style.visibility="hidden";
setOpacityName(objectname,0);
setOpacity(imagezoomtitlebg,0);
div("imagezoomstars").style.width=(parseInt(stars)*14+3)+"px";
div("imagezoomeventdescription").innerHTML=this.truncateTitle(eventdescription);
div("imagezoomeventduration").innerHTML=eventduration+" minuter";

obj.src=url;
obj.style.visibility="visible";
imagezoomtitlebg.style.visibility="visible";
gAnimate.setAnimation(objectname,duration,duration/20,easing,startpos,distance,"setZoomWithTitleTag");
}//end function

Imagescroll.prototype.truncateTitle=function Imagescroll_truncateTitle(a){
return (a.length>this.maxDescriptionLength)?left(a,this.maxDescriptionLength)+"...":a;
}//end function

var test;
function setZoomWithTitleTag(objectname,value,opacityfactor){
//value span 0..1

var obj=div(objectname);
var thumbnail=obj.thumbnail;
var thumbnailframe=div("imagescrollframe");
//var thumbnailWidth=parseInt(thumbnail.style.width);
//var thumbnailHeight=parseInt(thumbnail.style.height);

var titletag=div("imagezoomtitlebg");
var xImagescroll=titletag.mainobject;
var thumbnailWidth=xImagescroll.thumbnailWidth;
var thumbnailHeight=xImagescroll.thumbnailHeight;

var zoomFactor=xImagescroll.myZoomScale/100;
var width=(1+value*zoomFactor)*thumbnailWidth;
var height=(1+value*zoomFactor)*thumbnailHeight;
var opacity=(opacityfactor*100);

var minLeft=absoluteLeft(thumbnailframe);
var maxLeft=absoluteLeft(thumbnailframe)+thumbnailframe.offsetWidth-width-10;
var centerLeft=absoluteLeft(thumbnail)+thumbnailWidth/2;
var aleft=Math.max(Math.min(centerLeft-width/2,maxLeft),minLeft);

//Middle by thumbnail middle
var centerTop=absoluteTop(thumbnail)+thumbnailHeight/2;
var atop=centerTop-height/2;

//Middle by thumbnail bottom
var centerBottom=absoluteTop(thumbnail)+thumbnailHeight-thumbnailHeight*0.2;
var atop=centerBottom-height;

obj.style.left=aleft+"px";
obj.style.top=atop+"px";
obj.style.width=width+"px";
obj.style.height=height+"px";
setOpacity(obj,opacity);

//titletag
var showfactor=iif(opacityfactor<0.5,iif(opacityfactor>0.94,1.0,0),(opacityfactor-0.5)*2);

titletag.style.left=aleft+"px";
titletag.style.width=(width+xImagescroll.imagezoomPadding)+"px";
titletag.style.top=(atop+(height*showfactor)+xImagescroll.imagezoomPadding)+"px";
setOpacity(titletag,showfactor*xImagescroll.titlebgOpacity);
var imagezoomtitlefront=div("imagezoomtitlefront");
if(showfactor>=1.0 && imagezoomtitlefront.style.visibility=="hidden" && titletag.style.visibility=="visible"){
	imagezoomtitlefront.style.left=titletag.style.left;
	imagezoomtitlefront.style.width=titletag.style.width;
	imagezoomtitlefront.style.top=titletag.style.top;
	imagezoomtitlefront.style.visibility="visible";
}//end if
}//end function
//------------------------------------
Imagescroll.prototype.doZoomIn=function Imagescroll_doZoomIn(objectname,distance,url,duration,easing){
var obj=div(objectname);
obj.mainobject=this;
if(obj.animationTimeout>now()){
	return false;
}//end if
var startpos=0;
setOpacityName(objectname,0);
obj.src=url;
obj.style.visibility="visible";
gAnimate.setAnimation(objectname,duration,duration/50,easing,startpos,distance,"setZoom");
}//end function

function setZoom(objectname,value,opacityfactor){
//value span 0..1

var obj=div(objectname);
var thumbnail=obj.thumbnail;
var thumbnailframe=div("imagescrollframe");

var xImagescroll=obj.mainobject;
var zoomFactor=xImagescroll.myZoomScale/100;
var width=(1+value*zoomFactor)*thumbnail.offsetWidth;
var height=(1+value*zoomFactor)*thumbnail.offsetHeight;
var opacity=(opacityfactor*100);

var minLeft=absoluteLeft(thumbnailframe);
var maxLeft=absoluteLeft(thumbnailframe)+thumbnailframe.offsetWidth-width;
var centerLeft=absoluteLeft(thumbnail)+thumbnail.offsetWidth/2;
var aleft=Math.max(Math.min(centerLeft-width/2,maxLeft),minLeft);

//Middle by thumbnail middle
var centerTop=absoluteTop(thumbnail)+thumbnail.offsetHeight/2;
var atop=centerTop-height/2;

//Middle by thumbnail bottom
//var centerBottom=absoluteTop(thumbnail)+thumbnail.offsetHeight-thumbnail.offsetHeight*0.2;
//var atop=centerBottom-height;

obj.style.left=aleft+"px";
obj.style.top=atop+"px";
obj.style.width=width+"px";
obj.style.height=height+"px";
setOpacity(obj,opacity);
}//end function

Imagescroll.prototype.attachZoom=function attachZoom(object){
div("imagezoom").thumbnail=object;
div("imagezoom").imagescroll=this;
}//end function