//*******************************************************************
// ThePort PictureRenderer
// Derived from previously written ThePort flickr module.
// Modularized by Steve Soares
//*******************************************************************
// Version History.
//*******************************************************************
// March 26, 2007 Initial Version.
//*******************************************************************


/***********************************************************************/
/*                                                                     */
/***********************************************************************/
function PictureElement( tnailUrl, picUrl, link, title, description, author, date)
{
  this.m_tnailUrl     = tnailUrl;
  this.m_picUrl       = picUrl;
  this.m_link		      = link;
  this.m_title        = title;
  this.m_description  = description;
  this.m_author       = author;
  this.m_date         = date;  
}


/***********************************************************************/
/*                                                                     */
/***********************************************************************/
function PictureList()
{
 this.m_picList = new Array();
}


/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureList.prototype.length = function()
{
 return this.m_picList.length;
}


/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureList.prototype.addPicture = function(tnailUrl, picUrl, link, title, description, author, date)
{
  var elem = new PictureElement(tnailUrl, picUrl, link, title, description, author, date);
  this.addElement(elem);
}

/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureList.prototype.addElement = function(pElem)
{
 this.m_picList.push(pElem);
}

/***********************************************************************/
/*                                                                     */
/***********************************************************************/
function PictureRenderer(displayElem,pictureList)
{
  this.m_displayElem  = displayElem;
  this.m_pictureList  = pictureList;
  this.m_viewModes    = new Array ("Slide show","List view","Thumbnail");
  this.m_viewMode     = 0;
  this.m_currentIndex = 0;
  this.m_uiElem       = null;
  this.m_pagingElem   = null;
  this.m_picModes     = new Array("Inline style","CSS class name");
  this.m_picMode      = [];
  this.m_picStyles    = [];
  this.m_datalist	  = null;
}
/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureRenderer.prototype.setRenderMode = function(mode)
{
  var mode = this.m_viewModes.indexOf(mode);
  if (mode>=0) {
    this.m_viewMode = mode;
	this.m_currentIndex = 0;
    this.draw();
    }
}

/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureRenderer.prototype.getRenderMode = function(idx)
{
  return this.m_viewModes[idx];
}

/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureRenderer.prototype.getRenderModes = function()
{
  return this.m_viewModes;
}
/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureRenderer.prototype.addPagingElements=function(pElem){
  this.m_pagingElem = pElem;
}
/***********************************************************************/
// pStyle = Parameter option inputs inline style or css classname 
// picMode = Inline Style or CSS classs name
/***********************************************************************/
PictureRenderer.prototype.setPictureStyle=function(renderMode,picMode,pStyle){  
  var mode = this.m_picModes.indexOf(picMode);  
  switch(this.m_viewModes.indexOf(renderMode)){
    case 0:this.m_picStyles[0] = pStyle;this.m_picMode[0]=(mode>0)?mode:0;break;
	case 1:this.m_picStyles[1] = pStyle;this.m_picMode[1]=(mode>0)?mode:0;break;
	case 2:this.m_picStyles[2] = pStyle;this.m_picMode[2]=(mode>0)?mode:0;break;
  }
}
/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureRenderer.prototype.getPictureModes=function(){
  return this.m_picModes;
}
/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureRenderer.prototype.getPictureMode=function(idx){
  return this.m_picModes[idx];
}
/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureRenderer.prototype.draw = function() { 
  var output = '';
  if (!this.m_displayElem) return;
  if (this.m_pictureList.length()<=0) return;
  
  //var listPaging = null;
  if(this.m_pagingElem != null){
	this.m_datalist = new DataListPaging(this.m_displayElem,this.m_pagingElem);
  }
  var picStyle='';
  /* Slide Show Mode */  
  if (this.m_viewMode==0) {    
    if ((this.m_currentIndex<0)||(this.m_currentIndex>=this.m_pictureList.length())) return;
	var oTitle= this.m_pictureList.m_picList[this.m_currentIndex].m_title;
	var oLink = this.m_pictureList.m_picList[this.m_currentIndex].m_link;
    var oImage = this.m_pictureList.m_picList[this.m_currentIndex].m_picUrl;
	/* set picture style */
	if(this.m_picStyles[0] != null){ 
	  picStyle=(this.m_picMode[0]==0) ? 'style="filter:alpha(opacity=0);-moz-opacity:0.0;' + this.m_picStyles[0] + '"' : 'style="filter:alpha(opacity=0);-moz-opacity:0.0;" class="' + this.m_picStyles[0] + '"';
	}else{
	  picStyle="style='filter:alpha(opacity=0);-moz-opacity:0.0;border:1px solid #e3dfc5;width:240px;height:180px;'";
	  }
	data = "<div align='center'><a href='" + oLink + "' target='_blank'><img " + picStyle + " src='" + oImage + "' onload='PictureEffect(this);' /></a><br /><a href='" + oLink + "' target='_blank'>" + oTitle + "</a></div>";
    this.m_displayElem.innerHTML = '<div style="text-align:left">' + data + '</div>';
	if(this.m_pagingElem != null){
	  if(this.m_pagingElem.m_pageStatus != null)
	    this.m_pagingElem.m_pageStatus.innerHTML = 'Page ' + (this.m_currentIndex + 1) + ' of ' + this.m_pictureList.length();
	  (this.m_currentIndex >= (this.m_pictureList.length()-1)) ? this.m_pagingElem.m_next.style.display = 'none' : this.m_pagingElem.m_next.style.display = 'block';	  
      (this.m_currentIndex > 0) ? this.m_pagingElem.m_prev.style.display = 'block' : this.m_pagingElem.m_prev.style.display = 'none';
	  if(this.m_pagingElem.m_prev.onclick) this.m_pagingElem.m_prev.onclick = null;
	  if(this.m_pagingElem.m_next.onclick) this.m_pagingElem.m_next.onclick = null;	  
	  this.m_pagingElem.m_prev.onclick = function(e){ this.previous();}.bind(this);	  
      this.m_pagingElem.m_next.onclick = function(e){ this.next(); }.bind(this);
	}
	return;
  }
  // Show all the pictures...
  for (idx=0;idx<this.m_pictureList.length();idx++) {
    var tnailUrl      = this.m_pictureList.m_picList[idx].m_tnailUrl;
    var oLink         = this.m_pictureList.m_picList[idx].m_link;
    var oTitle        = this.m_pictureList.m_picList[idx].m_title;
    var oAuthor       = this.m_pictureList.m_picList[idx].m_author;
    var oDate         = this.m_pictureList.m_picList[idx].m_date;
    var oDescription  = this.m_pictureList.m_picList[idx].m_description;
	var html = '';
    /* List view */
	if (this.m_viewMode == 1) {
	  if(this.m_picStyles[1] != null){ 
	    picStyle=(this.m_picMode[1]==0) ? 'style="filter:alpha(opacity=0);-moz-opacity:0.0;' + this.m_picStyles[1] + '"' : 'style="filter:alpha(opacity=0);-moz-opacity:0.0;" class="' + this.m_picStyles[1] + '"';
	  }else{
	    picStyle="style='filter:alpha(opacity=0);-moz-opacity:0.0;border:1px solid #e3dfc5;width:75px;height:75px;'";
		}
	  html = "<a href='" + oLink + "' target='_blank'><img " + picStyle + " src='" +tnailUrl + "' onload='PictureEffect(this);' /></a>";
	  var tmp = '<tr><td>'+html+'</td>';		 
	  if(oAuthor!=null && oAuthor.length>0)
	    oAuthor = ' by ' + oAuthor;
	  if(oDate!=null && oDate.length>0)
	    oDate = 'on ' + oDate;
	  tmp += '<td valign="top"><span style="font-size:8pt"><a href="' + oLink + '" target="_blank">'+ oTitle 
	      + '</a></span><br /><span class="normaltxt10"> ' + oAuthor +'</span><br /><span class="normaltxt10"> ' +oDate+'</span></td></tr>';
	  output = '<table cellpadding="1" cellspacing="1">'+tmp+'</table>';		
  	  } 
  	/* thumbnail View */
  	else{
	  if(this.m_picStyles[2] != null){ 
	    picStyle=(this.m_picMode[2]==0) ? 'style="filter:alpha(opacity=0);-moz-opacity:0.0;' + this.m_picStyles[2] + '"' : 'style="filter:alpha(opacity=0);-moz-opacity:0.0;" class="' + this.m_picStyles[2] + '"';
	  }else{
	    picStyle="style='filter:alpha(opacity=0);-moz-opacity:0.0;border:1px solid #e3dfc5;width:75px;height:75px;'";
		}
	  html = "<a href='" + oLink + "' target='_blank'><img " + picStyle + " src='" +tnailUrl + "' onload='PictureEffect(this);' /></a>";
	  output = html + "&nbsp;";
	}    
	if(this.m_datalist != null){
	  (this.m_viewMode==2) ? this.m_datalist.setOuterHTML('<div align="center">','</div>') : this.m_datalist.setOuterHTML('','');
	  this.m_datalist.addItem(output);
    }
  }
	if(this.m_datalist != null) this.m_datalist.showResult();
	//this.m_displayElem.innerHTML = '<div style="text-align:left">'+ output + '</div>'; 
}
/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureRenderer.prototype.next = function() 
{
  if (this.m_viewMode==0) {   /* Slide Show Mode */
    if ((this.m_currentIndex+1)<this.m_pictureList.length()) {
      this.m_currentIndex++;
      this.draw();
      }
    }
}
/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureRenderer.prototype.previous = function() 
{
  if (this.m_viewMode==0) { /* Slide Show Mode */
    if ((this.m_currentIndex-1)>=0) {
      this.m_currentIndex--;
      this.draw();
      }
    }
}
/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureRenderer.prototype.configureSelectControl = function(elem,hookFlag) 
{
  if (elem) {
    this.m_uiElem = elem;
	while(this.m_uiElem.length >= 1) this.m_uiElem.remove(0);
    for (i=0;i<this.m_viewModes.length;i++) {
      var option = document.createElement("OPTION") 
      this.m_uiElem.options.add(option);
      option.text = this.m_viewModes[i];
      option.value = i;
      }
    if (hookFlag==true) {
	  if(elem.onchange) elem.onchange = null;
      var fn = function(e){        
        this.setRenderMode(this.m_viewModes[this.m_uiElem.selectedIndex]);
        }.bind(this);     
	  elem.onchange = fn;
      }
    } 	
}
/***********************************************************************/
/*                                                                     */
/***********************************************************************/
PictureRenderer.prototype.setDisplayCount=function(count){ 
  this.m_datalist.setDisplayCount(count);
  this.m_datalist.showResult();
}
/***********************************************************************/
/*   Applies Picture Fading Effect                                                                 */
/***********************************************************************/
function PictureEffect(imgObject){
  var OPACITY = {IMG:imgObject};
  var op = /opera 5|opera\/5/i.test(navigator.userAgent) && window.opera;
  var ie = !op && /msie/i.test(navigator.userAgent);
  var mz = !op && /mozilla\/5/i.test(navigator.userAgent);
  //var safari = /Safari/i.test(navigator.userAgent);
  var timerid = setInterval(function() {
		try {
			var count = mz ? (OPACITY.IMG.style.MozOpacity*100) : OPACITY.IMG.filters.alpha.opacity;
			if (!ie) count+=5;
			else count+=20;
			if(count <= 100) {
				if(mz){ OPACITY.IMG.style.MozOpacity = (count/100); }
				else { OPACITY.IMG.filters.alpha.opacity=count;	}
			} else {
				clearInterval(OPACITY.TIMER);
			}
		} catch(e) {}
	},25);
	OPACITY.TIMER = timerid;
}