/* $Id: DynamicItemViewer.js,v 1.1 2010/07/20 17:26:24 ggortsema Exp $
 * Copyright (C) 2008 IP Labs GmbH <http://www.iplabs.de/>
 * All rights reserved.
 */

 /**
 * @fileoverview
 *
 * Contains the DynamicItemViewer class (and its nested objects). Depends on Utils, CheckboxList, ImgResize, GlobalListSort and IndividualListSort class.
 *
 * @author Andreas Kornetka <a.kornetka@iplabs.de>
 * @author Alexander Peters <a.kornetka@iplabs.de>
 * @version $Revision: 1.1 $
 */

jade.require("aspadmin.CssHelper");

/**
 * Static DynamicItemViewer class object.
 *
 * @class <p>This class provides various MP views such as the slideshow, sharing, photo overview, photo details and photo sorting.</p>
 *
 * @constructor
 */

var DynamicItemViewer = new Object();

//private:
DynamicItemViewer.images                     = new Array();
DynamicItemViewer.imagesInfo                 = new Object();
DynamicItemViewer.imagesInfo.preActiveId     = 0;
DynamicItemViewer.imagesInfo.active          = 0;
DynamicItemViewer.imagesInfo.loaded          = 0;
DynamicItemViewer.imagesInfo.length          = 0;
DynamicItemViewer.imagesInfo.useLowImage     = false;
DynamicItemViewer.imagesInfo.useLoadingImage = false;
DynamicItemViewer.imagesInfo.reload			 = false;



/**
 * Private Method: The internal image Object.
 * 
 * @param {Integer} id 
 *            The id of an image. Inevitable parameter!
 * @param {Integer} width
 *            Width of the thumb or the origanal image - keeping the aspect ratio matters. Inevitable parameter!
 * @param {Integer} height
 *            Height of the thumb or the origanal image - keeping the aspect ratio matters. Inevitable parameter!
 * @param {Integer} rotation
 *            Actual rotation of the image. Valid values are: none or 0, 90, 180, 270. Inevitable parameter!
 * @param {String} title
 *            The title (filename) of an image.
 * @param {String} comment
 *            The optional comment of an image.
 * @param {String} info01
 *            The optional information.
 * @param {String} info02
 *            The optional information.
 * @param {Boolean} storageWarning
 *            The optional flag to indicate storage warning if this image will be deleted by storage management.
 * @param {String} info03
 *            The optional information. (hiddenItem flag in photoOverview or Time stamp in sortOverview)
 * @param {String} info04
 *            The optional information. (file size in sortOverview)
 */  
DynamicItemViewer.__Image = function(id, src, width, height, rotation, title, comment, info01, info02, storageWarning, info03, info04) {
	this.id              = id;
	this.src             = src;
	this.width           = width;
	this.height          = height;
    this.rotation        = rotation; 
    this.slideShow       = new Object();
    this.photoOverview   = new Object();
    this.sortOverview    = new Object();
    this.renamePhotos    = new Object();
    this.title           = title;
    this.comment         = comment ? comment : '';
    this.info01          = info01 ? info01 : '';
    this.info02  		 = info02 ? info02 : '';
    this.storageWarning  = storageWarning ? storageWarning : false;
    this.info03          = info03 ? info03 : '';
    this.info04          = info04 ? info04 : '';
}

/**
 * Private Method: Internal image preload functionality.
 *
 * @param {String} overPreLoad
 *            Manual set of the preloded pictures. The value will be doubled.
 */  
DynamicItemViewer.__imagePreload = function(overPreLoad) {
	var i, j, preLoad, image, mod = 0;
	preLoad = typeof(overPreLoad) == 'undefined' ? this.imagesInfo.preLoad : (overPreLoad * 2);
	preLoad = this.imagesInfo.length < preLoad ? this.images.length : preLoad;
	if(typeof(this.imagesInfo.preActiveId) != 'undefined' && this.imagesInfo.preActiveId != null) { // check if show should begin somewhere in the middle...
		this.setActiveImage(this.imagesInfo.preActiveId);
		this.imagesInfo.preActiveId = null;
	}
    for(i = 0; i < preLoad; i++) {
    	j = i + mod + Math.ceil(this.imagesInfo.active - preLoad / 2);
    	if(j < 0) {
    		mod = -j;
    		j = 0;
    	}
    	else if(j > this.images.length - 1) {
    		j -= this.images.length;
    		mod = -this.images.length;
    	}
    	if(typeof(this.images[j].lowImage) == 'undefined' && this.imagesInfo.useLowImage) {
    		image                       = this.lowImgResize.calculate(this.images[j].width, this.images[j].height);
    		this.images[j].lowImage     = new Image(image.width, image.height);
    		if(this.images[j].src == 'undefined') {
    			this.images[j].lowImage.src = 'showPicture.do?type=pa&size=' + this.imagesInfo.lowMaxWidth + 'x' + this.imagesInfo.lowMaxHeight + '&id=' + this.images[j].id + '&rotation=' + this.images[j].rotation;
    		}
    		else {
    			this.images[j].lowImage.src = this.images[j].src;
    		}
    	}    	
    	if(typeof(this.images[j].image) == 'undefined' || DynamicItemViewer.imagesInfo.reload == true) {
    		this.images[j].image        = new Image(this.images[j].width, this.images[j].height);
    		if(this.images[j].src == 'undefined' || DynamicItemViewer.imagesInfo.reload == true) {
    			this.images[j].image.src    = 'showPicture.do?type=pa&size=' + this.imagesInfo.maxWidth + 'x' + this.imagesInfo.maxHeight + '&id=' + this.images[j].id + '&rotation=' + this.images[j].rotation;
    		}
    		else {
    			this.images[j].image.src = this.images[j].src;
    		}
    	}
    	if(DynamicItemViewer.objLoadingInfo && DynamicItemViewer.imagesInfo.loaded < DynamicItemViewer.imagesInfo.preLoad) {
    		if(this.images[j].image.complete) {DynamicItemViewer.__imageOnload();}
    		else {
    			this.images[j].image.onload  = DynamicItemViewer.__imageOnload;
    			this.images[j].image.onerror = DynamicItemViewer.__imageOnload;
    		}
    	} 
    }
}

/**
 * Initialization of document element by its Id. Essential if loading information should be visible!
 * 
 * @param {String} objLoadingInfo
 *            Id of where the slideshow will be rendered into. Inevitable parameter!
 * @param {String} pageNaviInfoString
 *            String shown in page navi. The optional parameter. Default value is 'of'
 */  
DynamicItemViewer.initDocument = function(objLoadingInfo, pageNaviInfoString) {
	this.objLoadingInfo   = document.getElementById(objLoadingInfo);
	this.objLoadingStatus = document.createElement('var');
	this.objLoadingStatus.className = 'backgroundColor';
	this.objLoadingInfo.appendChild(this.objLoadingStatus);
	
	this.naviString = 'of';
	if(pageNaviInfoString) this.naviString = pageNaviInfoString;
}

/**
 * Main initialization (its predecessor must be the initDocument) method. Essential if loading information should be visible!
 * 
 * @param {Integer} imagesLength
 *            Total count of the images to be loaded. Inevitable Parametr!
 * @param {Float} preLoad
 *            Count of the images to be preloaded, if parameter contails a float then it will be rounded up. The Default value is 3.
 * @param {Array} imageMaxSize
 *            Max rect for an image. Default value is [640, 480].
 * @param {Array} lowImageMaxSize
 *            Max rect for an low-res image. If left empty no low-res image will be used, else the default value will be [110, 110].
 *        
 */  
DynamicItemViewer.init = function(imagesLength, preLoad, imageMaxSize, lowImageMaxSize) {
	// private:
	this.images                     = new Array();
	this.imagesInfo                 = new Object();
	this.imagesInfo.preActiveId     = 0;
	this.imagesInfo.active          = 0;
	this.imagesInfo.loaded          = 0;
	this.imagesInfo.length          = 0;
	if(typeof(imageMaxSize) != 'object') {imageMaxSize = new Array(640, 480);}
	if(typeof(lowImageMaxSize) != 'undefined') {
		if(typeof(lowImageMaxSize) != 'object') {lowImageMaxSize = new Array(110, 110);}
		this.imagesInfo.useLowImage  = true;
		this.imagesInfo.lowMaxWidth  = lowImageMaxSize[0];
		this.imagesInfo.lowMaxHeight = lowImageMaxSize[1];
		this.lowImgResize            = new ImgResize(this.imagesInfo.lowMaxWidth, this.imagesInfo.lowMaxHeight);
	} 
	this.imagesInfo.length    = isNaN(imagesLength) ? 0 : imagesLength;
	this.imagesInfo.preLoad   = isNaN(preLoad) ? 3 : Math.ceil(preLoad);
	this.imagesInfo.maxWidth  = imageMaxSize[0];
	this.imagesInfo.maxHeight = imageMaxSize[1];
	this.imgResize            = new ImgResize(this.imagesInfo.maxWidth, this.imagesInfo.maxHeight);
}

/**
 * Set an 'loading in progress' image.
 * 
 * @param {String} src
 *            Reference towards a netral image whilst loading the real one.
 */
DynamicItemViewer.setLoadingImage = function(src) {
	DynamicItemViewer.imagesInfo.loadingImage     = new Image(this.imagesInfo.maxWidth, this.imagesInfo.maxHeight);
	DynamicItemViewer.imagesInfo.loadingImage.src = src;
	DynamicItemViewer.imagesInfo.useLoadingImage  = true;
}

/**
 * Set a callback function when the image loading is complete. Essential if loading information should be visible!
 * 
 * @param {String} name 
 *            The name of the function that should be called then. Inevitable Parameter!
 */ 
DynamicItemViewer.setCallBackFunction = function(name) {
	this.callBackFunction = name;
	if(this.imagesInfo.length == 0) {this.__imageOnload();}
}

/**
 * Private Method: Internal counter method that will be called if, DynamicItemViewer.init() was set (correctly).
 */  
DynamicItemViewer.__imageOnload = function() {
   	DynamicItemViewer.objLoadingStatus.style.width = Math.ceil(++DynamicItemViewer.imagesInfo.loaded / ((DynamicItemViewer.imagesInfo.length < DynamicItemViewer.imagesInfo.preLoad && DynamicItemViewer.imagesInfo.length > 0) ? DynamicItemViewer.imagesInfo.length : DynamicItemViewer.imagesInfo.preLoad) * 100) + '%';
	if(DynamicItemViewer.imagesInfo.length == 0 || ((DynamicItemViewer.imagesInfo.loaded == DynamicItemViewer.imagesInfo.preLoad) && !(DynamicItemViewer.imagesInfo.length < DynamicItemViewer.imagesInfo.preLoad)) || ((DynamicItemViewer.imagesInfo.length < DynamicItemViewer.imagesInfo.preLoad) && (DynamicItemViewer.imagesInfo.loaded == DynamicItemViewer.imagesInfo.length))) {
		DynamicItemViewer.objLoadingInfo.style.display = 'none';	
		eval(DynamicItemViewer.callBackFunction);
	}
}

/**
 * Adds an image to the list.
 *
 * @param {Integer} id 
 *            The id of an image. Inevitable parameter!
 * @param {Integer} width
 *            Width of the thumb or the origanal image - keeping the aspect ratio matters. Inevitable parameter!
 * @param {Integer} height
 *            Height of the thumb or the origanal image - keeping the aspect ratio matters. Inevitable parameter!
 * @param {Integer} rotation 
 *            Actual rotation of the image. Valid values are: none or 0, 90, 180, 270. Inevitable parameter! 
 * @param {String} title
 *            The title (filename) of an image.
 * @param {String} comment
 *            The optional comment of an image.
 * @param {String} info01
 *            The optional information. 
 * @param {String} info02
 *            The optional information. 
 * @param {Boolean} storageWarning
 *            The optional flag to indicate storage warning if this image will be deleted by storage management.
 * @param {String} info03
 *            The optional information. (hiddenItem flag in photoOverview or Time stamp in sortOverview)
 * @param {String} info04
 *            The optional information.
 */  
DynamicItemViewer.addImage = function(id, src, width, height, rotation, title, comment, info01, info02, storageWarning, info03, info04) {
	var image = this.imgResize.calculate(width, height, rotation);
    image     = new this.__Image(id, src, image.width, image.height, rotation, title, comment, info01, info02, storageWarning, info03, info04);
    this.images.push(image);
	if(this.images.length == this.imagesInfo.length) {this.__imagePreload();}
}

/**
 * Jump towards the image with the id.
 * 
 * @param {Integer} id 
 *            The image id reference where the slideshow will jump into.
 */
DynamicItemViewer.setActiveImage = function(id) {
	var i;
	for(i = 0; i < DynamicItemViewer.images.length; i++) {
		if(DynamicItemViewer.images[i].id == id) {break;}
	}
	if(i == DynamicItemViewer.imagesInfo.length) {i = 0;}
    if(DynamicItemViewer.images.length) {this.imagesInfo.active = i;}
    else {this.imagesInfo.preActiveId = id;} // set a marker if image is not yet to be found
}

/**
 * Returns the id of the active image.
 * 
 * @return
 *            The image id reference where the slideshow will jump into.
 */
DynamicItemViewer.getActiveImage = function() {
	return DynamicItemViewer.images[this.imagesInfo.active].id;
}


// public:
DynamicItemViewer.photoOverview = new Object();

// private:
DynamicItemViewer.photoOverview.objLi  = new Array();
DynamicItemViewer.photoOverview.objImg = new Array();
DynamicItemViewer.photoOverview.objImgDiv = new Array();
DynamicItemViewer.photoOverview.visibleObjLi  = new Array();
DynamicItemViewer.photoOverview.visibleImages = new Array();
DynamicItemViewer.photoOverview.visibleObjImg = new Array();
DynamicItemViewer.photoOverview.visibleObjImgDiv = new Array();

DynamicItemViewer.photoOverview.thumbnailSizes = [ {"width": 150, "height": 150}, {"width": 350, "height": 350}, {"width": 640, "height": 480} ];
DynamicItemViewer.photoOverview.thumbnailSize = DynamicItemViewer.photoOverview.thumbnailSizes[0];
DynamicItemViewer.photoOverview.thumbnailSizeSliderSteps	 = 0;
//DynamicItemViewer.photoOverview.thumbnailOrder = 0;

/**
 * Initialization of document element by the Id.
 * 
 * @param {String} objPhotoOverview
 *            Id of where the images will be rendered into. Inevitable parameter!
 * @param {String} objNoImgInAlbumInfo
 *            Id of element which will be shown wehn the current album contains no images. Inevitable parameter!
 */  
DynamicItemViewer.photoOverview.initDocument = function(objNaviInfo, objPagesNavi, objPhotoOverview, objNoImgInAlbumInfo) {
	this.objPhotoOverview    	= document.getElementById(objPhotoOverview);
	this.objNoImgInAlbumInfo 	= document.getElementById(objNoImgInAlbumInfo);
	this.objNaviInfo		 	= document.getElementById(objNaviInfo);
	this.objPagesNavi			= document.getElementById(objPagesNavi);
}

/**
 * Main initialization (its predecessor must be the initDocument) method.
 * 
 * @param {Integer} maxVisibleImages
 *            Set the visible images of the photo list. Default value is 6.
 * @param {Array} maxSize
 *            Maximal rendered image size. Default value is [80, 80]. 
 */ 
DynamicItemViewer.photoOverview.init = function(maxVisibleImages, maxSize) {
    var i, vr, div, span, img, ul, li, lnk, iconDiv, title, description, info01, info02, reset, checkbox, checkboxBg, check, em, max;
    ul = document.createElement('ul');
    if(DynamicItemViewer.images.length) {
	    ul.id        = 'photoList';
	    ul.className = 'checkboxlist';
	    this.maxVisibleImages = isNaN(maxVisibleImages) ? 6 : maxVisibleImages;
	    this.pagesQuantity = Math.ceil(DynamicItemViewer.images.length / this.maxVisibleImages);
	    this.activePage = Math.ceil(DynamicItemViewer.imagesInfo.active / this.maxVisibleImages) + 1;
	    if(isNaN(this.activePage)) this.activePage = -1;
	    this.maxWidth      = typeof(maxSize) != 'object' ? 80 : maxSize[0];
	    this.maxHeight     = typeof(maxSize) != 'object' ? 80 : maxSize[1];
	    this.imgResize     = new ImgResize(this.maxWidth, this.maxHeight);
	    this.__prepareImages();
	    
	    for(i = 0; i < DynamicItemViewer.images.length; i++) {
	    	li  = document.createElement('li');
	    	li.className 	= 'photoDetailsBox';
	    	li.id			= 'photoDetailsBox'+ DynamicItemViewer.images[i].id;
	    	
	    	vr  			= document.createElement('var');
	    	vr.appendChild(document.createTextNode(DynamicItemViewer.images[i].id));
	    	li.appendChild(vr);
	    	
	    	/* background-div */
	    	div 			= document.createElement('div');
	    	div.className 	= 'photoDetailsBg';
	    	li.appendChild(div);
	    	
	    	/* photo details image */
	    	div 			= document.createElement('div');
	    	div.className 	= 'photoDetailsImg';
	    	div.style.paddingLeft = DynamicItemViewer.images[i].photoOverview.left + 'px';  
		    div.style.paddingTop  = DynamicItemViewer.images[i].photoOverview.top + 'px'; 
	    	this.objImgDiv.push(div);
	    	li.appendChild(div);
	    	
	    	lnk 			= document.createElement('a');
	    	lnk.href 		= 'javascript:showAlbumItem('+DynamicItemViewer.images[i].id+');';
	    	lnk.className 	= 'photoDetailsLnk';
	    	div.appendChild(lnk);
	    	// view hidden Icon if the item is hidden
	    	if(DynamicItemViewer.images[i].info03)
	    	{
	    		iconDiv 		  = document.createElement('div');
		    	iconDiv.className = 'hiddenIcon';
		    	iconDiv.title	  = DynamicItemViewer.images[i].info03;
		    	lnk.appendChild(iconDiv);
	    	}
	    	// view description Icon if the item has description
	    	if (DynamicItemViewer.images[i].comment)
	    	{
		    	iconDiv 			= document.createElement('div');
		    	iconDiv.className 	= 'descriptionIcon';
		    	iconDiv.title		= DynamicItemViewer.images[i].comment;
		    	lnk.appendChild(iconDiv);
	    	}
	    	
	    	img = document.createElement('img');
   			img.className    = 'image';
   			img.style.cursor = 'pointer';
   			if(DynamicItemViewer.imagesInfo.useLoadingImage) {img.src = DynamicItemViewer.imagesInfo.loadingImage.src;}
   			if(typeof(DynamicItemViewer.images[i].image) != 'undefined') {img.src = DynamicItemViewer.images[i].image.src;}
   			img.style.width  = DynamicItemViewer.images[i].photoOverview.width + 'px';
   			img.style.height = DynamicItemViewer.images[i].photoOverview.height + 'px';
   			this.objImg.push(img);
   			lnk.appendChild(img);
	    	
	    	/* photo details */
		    div 			= document.createElement('div');
		    div.className 	= 'photoDetails';
	    	li.appendChild(div);
	    	
	    	title			= document.createElement('h3');
	    	title.className = 'photoDetailsTitle';
	    	lnk 			= document.createElement('a');
	    	lnk.href 		= 'javascript:showAlbumItem('+DynamicItemViewer.images[i].id+');';
	    	lnk.innerHTML = DynamicItemViewer.images[i].title;
	    	title.appendChild(lnk);
	    	div.appendChild(title);
	    	
	    	description		= document.createElement('p');
	    	description.innerHTML = DynamicItemViewer.images[i].comment;
	    	div.appendChild(description);
	    	
	    	info01			 = document.createElement('div');
	    	info01.className = 'photoDetailsRating rating-view';
	    	info01.id		 = 'photoDetailsRating' + DynamicItemViewer.images[i].id;
	    	info01.innerHTML = DynamicItemViewer.images[i].info01;
	    	div.appendChild(info01);
	    	
	    	/* photo details info02 (date, comments) */
	    	info02			 = document.createElement('div');
	    	info02.className 	 = 'photoDetailsInfo';
	    	info02.innerHTML 	 = DynamicItemViewer.images[i].info02;
	    	div.appendChild(info02);
	    	
	    	reset			 = document.createElement('div');
	    	reset.className 	 = 'reset';
	    	div.appendChild(reset);
	    	
	    	/* checkbox */
	    	checkbox = document.createElement('div');   
	    	checkbox.className = 'checkbox';
	    	
	    	checkboxBg = document.createElement('div');
	    	checkboxBg.className = 'checkboxBg';
	    	 
		    check = document.createElement('div');
		    check.className = 'check';
		    
		    checkbox.appendChild(checkboxBg);
		    checkbox.appendChild(check);
		    li.appendChild(checkbox);
		    
	    	this.objLi.push(li);
		    ul.appendChild(li);
	    }
	    this.objPhotoOverview.appendChild(ul);
	    div 			= document.createElement('div');
    	div.style.clear = 'both';
    	this.objPhotoOverview.appendChild(div);
        this.checkboxList                   = new CheckboxList(ul.id);
        this.checkboxList.checkBoxClassName = 'checkbox';
        this.checkboxList.useStyleClass     = true;
        this.checkboxList.styleClassOn      = 'checked';
        this.checkboxList.styleClassOff     = '';
        this.checkboxList.multipleSelection = true;
        this.checkboxList.minSelectedItems  = 0; 
        this.checkboxList.init();	    
    	this.__renderImages();
    	
    	max=DynamicItemViewer.imagesInfo.active + this.maxVisibleImages;
	    if(max > DynamicItemViewer.images.length) max = DynamicItemViewer.images.length;
    	for(i=DynamicItemViewer.imagesInfo.active; i<max; i++) {
	    	this.visibleImages.push(DynamicItemViewer.images[i]);
	    	this.visibleObjImg.push(this.objImg[i]);
	    	this.visibleObjImgDiv.push(this.objImgDiv[i]);
	    	this.visibleObjLi.push(this.objLi[i]);
	    }
    	// page Navi
    	if(this.objPagesNavi) {
    		if(this.pagesQuantity > 1 && this.activePage != -1) {
			    span = document.createElement('span');
		    	span.id = 'pagesNaviSpan';
		    	this.objPagesNavi.insertBefore(span, document.getElementById('photoOverviewLnkNextPageOff'));
		    }
    	}
    } else {this.objNoImgInAlbumInfo.style.display = 'block';}     	    
}

/**
 * Private Method: Actualize the images list toward its usage in the photoOverview.
 */  
DynamicItemViewer.photoOverview.__prepareImages = function() {
    var i, image;
    for(i = 0; i < DynamicItemViewer.images.length; i++) {
    	image = this.imgResize.calculate(DynamicItemViewer.images[i].width, DynamicItemViewer.images[i].height);
    	DynamicItemViewer.images[i].photoOverview.width  = image.width;
    	DynamicItemViewer.images[i].photoOverview.height = image.height; 	
    	DynamicItemViewer.images[i].photoOverview.left   = image.left;
    	DynamicItemViewer.images[i].photoOverview.top    = image.top;		
    }
}

/**
 * Private Method: Render the current images.
 */ 
DynamicItemViewer.photoOverview.__renderImages = function() {
	var i;
	DynamicItemViewer.__imagePreload(this.maxVisibleImages);
	for(i = 0; i < DynamicItemViewer.images.length; i++) {
		if(typeof(DynamicItemViewer.images[i].image) != 'undefined') {this.objImg[i].src = DynamicItemViewer.images[i].image.src;}
		this.objLi[i].style.display = (i >= DynamicItemViewer.imagesInfo.active && i < DynamicItemViewer.imagesInfo.active + this.maxVisibleImages) ? 'block' : 'none';
	}
}

/**
 * Update the photoOverview and render the next / last (depending on value) page.
 * 
 * @param {Integer} mod 
 *            Modificate by value the actual page that will be rendered.
 * @return
 *            True if scrolling possible, else 'begin', 'end' or 'none'.
 */
DynamicItemViewer.photoOverview.modifyActivePageBy = function(mod) {
	var ret = true;
	mod *= this.maxVisibleImages;
	if(DynamicItemViewer.imagesInfo.active % this.maxVisibleImages != 0) {
	    DynamicItemViewer.imagesInfo.active = Math.floor(DynamicItemViewer.imagesInfo.active / this.maxVisibleImages) * this.maxVisibleImages;
	}
	if(DynamicItemViewer.images.length <= this.maxVisibleImages) {
	    ret = 'none';
	}
    else if(DynamicItemViewer.imagesInfo.active + mod <= 0) {
        ret = 'begin';
    }
    else if(DynamicItemViewer.imagesInfo.active + 2 * mod >= DynamicItemViewer.images.length) {
        ret = 'end';
    }
    if(DynamicItemViewer.imagesInfo.active + mod >= 0 && DynamicItemViewer.imagesInfo.active + mod < DynamicItemViewer.images.length) {
        DynamicItemViewer.imagesInfo.active += mod;
    }
    if(DynamicItemViewer.images.length) {
        this.__renderImages();
    }
    this.activePage = Math.ceil(DynamicItemViewer.imagesInfo.active / this.maxVisibleImages) + 1;
    if(isNaN(this.activePage)) {
    	this.activePage = -1;
    	ret = 'none';
    }
    this.modifyPageInfo();
    return ret;
}

/**
 * Update the photoOverview and render the next / last (depending on value) page.
 * 
 * @param {Integer} pageNumber 
 *            Modificate by number the actual page that will be rendered.
 * @return
 *            True if scrolling possible, else 'begin', 'end' or 'none'.
 */
DynamicItemViewer.photoOverview.viewActivePageByNumber = function(pageNumber) {

	var ret = true;
	this.activePage = pageNumber;
	if(this.activePage > this.pagesQuantity) {this.activePage = this.pagesQuantity};
	DynamicItemViewer.imagesInfo.active = this.activePage * this.maxVisibleImages - this.maxVisibleImages;
	if(DynamicItemViewer.imagesInfo.active > (DynamicItemViewer.images.length - 1)) {
		DynamicItemViewer.imagesInfo.active = DynamicItemViewer.images.length - 1;
	}
	if(DynamicItemViewer.images.length <= this.maxVisibleImages) {
		ret = 'none';
	}
    else if(DynamicItemViewer.imagesInfo.active < this.maxVisibleImages) {
    	ret = 'begin';
    }
    else if(DynamicItemViewer.imagesInfo.active + this.maxVisibleImages >= DynamicItemViewer.images.length) {
    	ret = 'end';
    }
    if(DynamicItemViewer.images.length) {
    	this.__renderImages();
    }
    this.modifyPageInfo();
    return ret;
}

/**
 * Update the photoOverview and render all items.
 * 
 * @return
 *            True if scrolling possible, else 'begin', 'end' or 'none'.
 */
DynamicItemViewer.photoOverview.viewAllItems = function() {
	
	var i, lnkObj;
	DynamicItemViewer.__imagePreload(DynamicItemViewer.images.length);
	this.visibleImages.length = 0;
	this.visibleObjImg.length = 0;
	this.visibleObjImgDiv.length = 0;
	this.visibleObjLi.length = 0;
	for(i = 0; i < DynamicItemViewer.images.length; i++) {
		if(typeof(DynamicItemViewer.images[i].image) != 'undefined') {this.objImg[i].src = DynamicItemViewer.images[i].image.src;}
		this.visibleImages.push(DynamicItemViewer.images[i]);
		this.visibleObjImg.push(this.objImg[i]);
		this.visibleObjImgDiv.push(this.objImgDiv[i]);
		this.objLi[i].style.display = (i >= 0 && i < DynamicItemViewer.images.length) ? 'block' : 'none';
		this.visibleObjLi.push(this.objLi[i]);
	}
	for(var i=1; i <= this.pagesQuantity; i++) {
   		lnkObj = document.getElementById('lnkActivatePageByNumber' + i)
   		if(lnkObj) {
   			aspadmin.CssHelper.removeClass(lnkObj, 'active');
   		}
   	}
	return 'all';
}


/**
 * modificate page navi if exists.
 * 
 */
DynamicItemViewer.photoOverview.modifyPageInfo = function() {
	var i, em, lnk, span, minVisibleItemNumber, maxVisibleItemNumber;
	if(this.objNaviInfo && this.activePage != -1) {
		if(this.objNaviInfo.firstChild) {
			this.objNaviInfo.removeChild(this.objNaviInfo.firstChild);
		}
		
		minVisibleItemNumber = this.activePage * this.maxVisibleImages - this.maxVisibleImages + 1;
	   	if(minVisibleItemNumber <= 0) { minVisibleItemNumber = 1;}
	   	maxVisibleItemNumber = this.activePage * this.maxVisibleImages;
	   	if(maxVisibleItemNumber > DynamicItemViewer.images.length) { maxVisibleItemNumber = DynamicItemViewer.images.length;}
	   	this.objNaviInfo.appendChild(document.createTextNode(minVisibleItemNumber + '-' + maxVisibleItemNumber + ' ' + DynamicItemViewer.naviString + ' '+ DynamicItemViewer.images.length));
   	
		this.visibleImages.length = 0;
		this.visibleObjImg.length = 0;
		this.visibleObjImgDiv.length = 0;
		this.visibleObjLi.length = 0;
		for(i=minVisibleItemNumber-1; i<maxVisibleItemNumber; i++) {
			this.visibleImages.push(DynamicItemViewer.images[i]);
			this.visibleObjImg.push(this.objImg[i]);
			this.visibleObjImgDiv.push(this.objImgDiv[i]);
			this.visibleObjLi.push(this.objLi[i]);
		}
		
		if(this.pagesQuantity > 1) {
			span = document.getElementById("pagesNaviSpan");
			span.innerHTML = '';
			for(i=0; i < this.pagesQuantity; i++) {
				em  = document.createElement('em');
	   			em.className = 'activatePageByNumber';
		    	lnk =  document.createElement('a');
		    	lnk.id = 'lnkActivatePageByNumber' + (i + 1);
		    	lnk.innerHTML = i + 1;
		    	lnk.href = 'javascript:viewActivePageByNumber(' + (i + 1) + ');';
		    	em.appendChild(lnk);
	
				if(this.pagesQuantity <= 10 || i < 2 || i > this.pagesQuantity - 3 || (i > this.activePage-3 && i < this.activePage+1)) {
					span.appendChild(em);
				   	if(i != this.pagesQuantity - 1 && (this.pagesQuantity <= 10 || i < 1 || i > this.pagesQuantity - 4 || (i > this.activePage-4 && i < this.activePage))) {
				   		span.appendChild(document.createTextNode(' - '));
				   	}
				   	if(lnk.id == 'lnkActivatePageByNumber' + this.activePage) {
				   		lnk.className = 'active';
				    }
				}
				else if(span.lastChild && span.lastChild.data != ' ... ' ){
					span.appendChild(document.createTextNode(' ... '));
				}
			}
		}
	}
}


/**
 * Set an onchange function specified with the parameter.
 * 
 * @param {String} str
 *            Object as string of the called function if an change occurs. Inevitable parameter!
 */
DynamicItemViewer.photoOverview.setOnchange = function(str) {
	this.onchange = str;
	if(typeof(this.checkboxList) != 'undefined') {this.checkboxList.onchange = new Function(this.onchange);}
}

/**
 * Selects all photos.
 */ 
DynamicItemViewer.photoOverview.selectAll = function() {
	if(typeof(this.checkboxList) != 'undefined') {this.checkboxList.selectAllCheckedBoxes();}
	if(typeof(this.onchange) != 'undefined') {eval(this.onchange);}
}

/**
 * Deselects all photos.
 */ 
DynamicItemViewer.photoOverview.deselectAll = function() {
	if(typeof(this.checkboxList) != 'undefined') {this.checkboxList.deselectAllCheckedBoxes();}
	if(typeof(this.onchange) != 'undefined') {eval(this.onchange);}
}

/**
 * Get the selected photos.
 *
 * @return
 *            Returns the selected photos seperated by ';'. 
 */
DynamicItemViewer.photoOverview.getSelected = function() {
	return typeof(this.checkboxList) == 'undefined' ? '' : this.checkboxList.getValuesFromCheckedBoxes().join(';');
	if(typeof(this.onchange) != 'undefined') {eval(this.onchange);}	
}

/**
 * Get the amount of the selected photos.
 *
 * @return
 *            Returns the count of the selected photos.   
 */  
DynamicItemViewer.photoOverview.getSelectedCount = function() {
	return typeof(this.checkboxList) == 'undefined' ? 0 : this.checkboxList.getValuesFromCheckedBoxes().length;
}

/**
 * slider
 */
 
 DynamicItemViewer.photoOverview.setThumbnailSizes = function(thumbnailSizes)
{
    this.thumbnailSizes = thumbnailSizes;
}

DynamicItemViewer.photoOverview.setThumbnailSizeSliderSteps = function(steps) {
    this.thumbnailSizeSliderSteps = steps;
}


DynamicItemViewer.photoOverview.getThumbnailSize = function() {
    var i, max, maxValue, thumbSizeMax, singleStep, thumbValue;
    //alert(DynamicItemViewer.photoOverview.thumbnailSizeSliderSteps);
    // Get the highest maxValue
    maxValue = Math.max(this.thumbnailSizes[this.thumbnailSizes.length-1]["width"], 
        this.thumbnailSizes[this.thumbnailSizes.length-1]["height"]);

    thumbSizeMax = Math.max(this.thumbnailSize.width, 
        this.thumbnailSize.height);
    // Calculate the single step value    
    singleStep = maxValue / this.thumbnailSizeSliderSteps;
    thumbValue = singleStep;

   // Find the thumb slider value
    for (i=1, max = this.thumbnailSizeSliderSteps; i <= max; i++)
    {
        if (thumbValue >= thumbSizeMax) return i;
        thumbValue += singleStep;
    }
    return 1;     
}

DynamicItemViewer.photoOverview.setThumbnailSize = function(index, pixelResize) {
    var newThumbnailSizes, maxValue, thumbValue, singleStep, i, max;

     newThumbnailSizes = [];

     // Get the highest maxValue
     maxValue = Math.max(this.thumbnailSizes[this.thumbnailSizes.length-1]["width"], 
         this.thumbnailSizes[this.thumbnailSizes.length-1]["height"]);  
     // Calculate the single step value    
     singleStep = maxValue / this.thumbnailSizeSliderSteps;
     thumbValue = singleStep;
     
     // Create a new thumbsizes array with for the slider
     for (i=0, max = this.thumbnailSizeSliderSteps; i < max; i++)
     {
     	
         newThumbnailSizes.push({"width": thumbValue, "height": thumbValue});
         thumbValue += singleStep;
     }
     //alert(this.thumbnailSizeSliderSteps);
     
     //resize only visible images
     if (pixelResize !== undefined && !pixelResize)
     {
         // Find the nearest real index
     	index = Math.min(this.thumbnailSizes.length, 
     	Math.ceil( (index / (this.thumbnailSizeSliderSteps / this.thumbnailSizes.length))-1 ));
		this.thumbnailSize = this.thumbnailSizes[index];
      	// Realod the thumb images
      	DynamicItemViewer.imagesInfo.maxWidth = this.thumbnailSize["width"];
      	DynamicItemViewer.imagesInfo.maxHeight = this.thumbnailSize["height"];
      	DynamicItemViewer.imagesInfo.reload = true;
      	DynamicItemViewer.__imagePreload(this.maxVisibleImages);
      	for(i = 0; i < this.visibleImages.length; i++) {
          	if(typeof(this.visibleImages[i].image) != 'undefined') {this.visibleObjImg[i].src = this.visibleImages[i].image.src;}
 		}
     }
     else
     {
         // Pixelresize the thumbs
         this.imgResize            = new ImgResize(newThumbnailSizes[index-1]["width"], newThumbnailSizes[index-1]["height"]);
         var photoDetailsTitles, photoDetailsCheckboxes, photoDetailsCheckboxBGs;

          for(i = 0; i < this.visibleImages.length; i++) {
       		image = this.imgResize.calculate(this.visibleImages[i].width, this.visibleImages[i].height);
       		this.visibleObjImg[i].style.width  = image.width + 'px';
			this.visibleObjImg[i].style.height = image.height + 'px';
			this.visibleObjImgDiv[i].style.paddingLeft = image.left + 'px';
			this.visibleObjImgDiv[i].style.paddingTop  = image.top + 'px';
			photoDetailsTitles = HTMLUtils.getElementsByClassName(this.visibleObjLi[i], 'photoDetailsTitle');
			photoDetailsTitles[0].style.width = image.width + 'px';
			photoDetailsTitles[0].style.left = image.left + 'px';
			this.visibleObjLi[i].style.height = (newThumbnailSizes[index-1]["height"] + 30) + 'px';
			this.visibleObjLi[i].style.width = (newThumbnailSizes[index-1]["width"] + 10) + 'px';
	        photoDetailsCheckboxes = HTMLUtils.getElementsByClassName(this.visibleObjLi[i], 'checkbox');
	        photoDetailsCheckboxes[0].style.height = image.height + 30 + 'px';
	        photoDetailsCheckboxes[0].style.width = image.width + 8 + 'px';
	        photoDetailsCheckboxes[0].style.left = image.left + 'px';
			photoDetailsCheckboxes[0].style.top  = image.top + 'px';
	        photoDetailsCheckboxBGs = HTMLUtils.getElementsByClassName(this.visibleObjLi[i], 'checkboxBg');
	        photoDetailsCheckboxBGs[0].style.height = photoDetailsCheckboxes[0].style.height;
	        photoDetailsCheckboxBGs[0].style.width = photoDetailsCheckboxes[0].style.width;
  		}
	}
}          


/**
 * slideShow:
 */
// public:
DynamicItemViewer.slideShow               = new Object();

// Private:
DynamicItemViewer.slideShow.mirror        = new Array();
DynamicItemViewer.slideShow.slideTimeSec  = 5;
DynamicItemViewer.slideShow.slideTimer    = null;    

/**
 * Initialization of document elements by their Id.
 * 
 * @param {String} objShow 
 *            Id of where the slideshow will be rendered into. Inevitable parameter!
 * @param {String} objTitle
 *            Id of where the image titles will be shown. Inevitable parameter!
 * @param {String} objComment
 *            Id of where the image comments will be shown.
 * @param {String} objCreationDate
 *            Id of where the image creation date will be shown.
 */  
DynamicItemViewer.slideShow.initDocument = function(objShow, objTitle, objComment, objCreationDate, objRating) {
	this.objShow         = document.getElementById(objShow);
    this.objTitle        = document.getElementById(objTitle);
    this.objComment      = objComment ? document.getElementById(objComment) : null;
    this.objCreationDate = objCreationDate ? document.getElementById(objCreationDate) : null;
    this.objRating = objRating ? document.getElementById(objRating) : null;
}

/**
 * Main initialization (its predecessor must be the initDocument) method.
 * 
 * @param {Integer} timeSec
 *            Time delay (in Sec) between sliding. Default value is 5.
 * @param {Array} maxSize
 *            Maximal rendered image size. Default value is [640, 480].
 */ 
DynamicItemViewer.slideShow.init = function(timeSec, maxSize) {
    var div = document.createElement('div');
    if(DynamicItemViewer.images.length) {
	    this.maxWidth  = typeof(maxSize) != 'object' ? 640 : maxSize[0];
	    this.maxHeight = typeof(maxSize) != 'object' ? 480 : maxSize[1];
	    this.imgResize = new ImgResize(this.maxWidth, this.maxHeight, 'bottom');
	    this.objImg = document.createElement('img');
	    this.objImg.className = 'image';
	    this.objShow.appendChild(this.objImg);
	    div.id = 'mirror';
	    this.objShow.appendChild(div);
	    if(timeSec) {this.slideTimeSec = timeSec;}
	    this.__prepareImages();
	    this.__renderImage(true);
	    this.__renderInfo();
    }
}

/**
 * Private Method: Actualize the images list toward its usage in the slideshow.
 */  
DynamicItemViewer.slideShow.__prepareImages = function() {
    var i, image;
    for(i = 0; i < DynamicItemViewer.images.length; i++) {
    	image = this.imgResize.calculate(DynamicItemViewer.images[i].width, DynamicItemViewer.images[i].height);
    	DynamicItemViewer.images[i].slideShow.width  = image.width;
    	DynamicItemViewer.images[i].slideShow.height = image.height; 	
    	DynamicItemViewer.images[i].slideShow.left = image.left;
    	DynamicItemViewer.images[i].slideShow.top = image.top;		
    }
}

/**
 * The internal mirrorOpacity Object.
 * 
 * @param {Integer} line
 *            Beginning with the line x the following opacity levels are to be used. Inevitable parameter!
 * @param {Integer} opacity
 *            Sets the beginning opacity of the mirrored part of the images. Inevitable parameter!
 * @param {Integer} opacityDec
 *            Decrease of the opacity with each line. Inevitable parameter!
 */  
DynamicItemViewer.slideShow.__mirrorOpacity = function(line, opacity, opacityDec) {
    this.line       = line;
    this.opacity    = opacity;
    this.opacityDec = opacityDec;
}

/**
 * Sets a new cusom Mirror. This method can be called more than once, when differing the opacity levels is important.
 *
 * @param {Integer} line
 *            Beginning with the line x (the first call of this method must have the value 0) the following opacity
 *            levels are to be used. Inevitable parameter!
 * @param {Integer} opacity
 *            Sets the beginning opacity of the mirrored part of the images. Inevitable parameter!
 * @param {Integer} opacityDec
 *            Decrease of the opacity with each line. Inevitable parameter!
 */
DynamicItemViewer.slideShow.addMirrorOpacity = function(line, opacity, opacityDec) {
    var opacity = new this.__mirrorOpacity(line, opacity, opacityDec);
    this.mirror.push(opacity);
}

/**
 * Private Method: Create an specific mirror line.
 *
 * @param {Integer} i 
 *            The current mirror line. Inevitable parameter! 
 */ 
DynamicItemViewer.slideShow.__addMirrorLine = function(i) {
    var j, aOL, o;
    var d = document.createElement('div');
    var p = document.createElement('img');
    d.id = 'm' + i;
    if(DynamicItemViewer.imagesInfo.useLoadingImage) {p.src = DynamicItemViewer.imagesInfo.loadingImage.src;}
    if(DynamicItemViewer.imagesInfo.useLowImage) {p.src = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].lowImage.src;}
    p.style.width     = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].slideShow.width + 'px';    
    p.style.marginTop = -DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].slideShow.height + 1 + i + 'px';
    for(j = 0; j < this.mirror.length; j++) {
        if(i >= this.mirror[j].line) {aOL = j;}
    }
    o = this.mirror[aOL].opacity - (i - this.mirror[aOL].line + 1) * this.mirror[aOL].opacityDec;
    if(!Utils.isIE()) {p.style.opacity = (o / 100).toPrecision(2);}
    else {p.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + o + ')';}
    p.src = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].image.src;    
    d.appendChild(p);
    document.getElementById('mirror').appendChild(d);
}

/**
 * Private Method: Get the mirror lines counted and prepare opacity decrease.
 *
 * @return
 *            returns thee amount of mirror Lines  
 */  
DynamicItemViewer.slideShow.__getMirrorSize = function() {
	var m, o, s = 0;
    if(this.mirror.length) {
    	m = this.mirror[this.mirror.length - 1];
    	s = m.line;
    	o = m.opacity;
    	while(o > 0) {
        	s++;
        	o -= m.opacityDec;
    	}
    }
    return s;
}

/**
 * Update the slideshow and render the next / last (depending on value) image.
 * 
 * @param {Integer} mod 
 *            Modificate by value the actual image that will be rendered.
 */ 
DynamicItemViewer.slideShow.modifyActiveImageBy = function(mod) {
	if(this.slideTimer != null) {
		this.pause();
		this.play();
	}
    if(DynamicItemViewer.imagesInfo.active + mod >= 0 && DynamicItemViewer.imagesInfo.active + mod < DynamicItemViewer.images.length) {DynamicItemViewer.imagesInfo.active += mod;}
    else if(DynamicItemViewer.imagesInfo.active + mod > DynamicItemViewer.images.length - 1) {DynamicItemViewer.imagesInfo.active += mod - DynamicItemViewer.images.length;}
    else {DynamicItemViewer.imagesInfo.active += mod + DynamicItemViewer.images.length;}
    if(DynamicItemViewer.images.length) {
    	this.__renderImage();
    	this.__renderInfo();
    }
}

/**
 * Private Method: Render the current image and its mirror.
 * 
 * @param {Boolean} create 
 *            True if the mirror does not exist.  
 */ 
DynamicItemViewer.slideShow.__renderImage = function(create) {
    var e, i;
    DynamicItemViewer.__imagePreload();
    if(DynamicItemViewer.imagesInfo.useLoadingImage) {this.objImg.src = DynamicItemViewer.imagesInfo.loadingImage.src;}
    if(DynamicItemViewer.imagesInfo.useLowImage) {this.objImg.src = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].lowImage.src;}
    this.objImg.uniqueId        = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].id;
    this.objImg.style.marginTop = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].slideShow.top + 'px';
    this.objImg.style.width     = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].slideShow.width + 'px';
    this.objImg.style.height    = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].slideShow.height + 'px';
     this.objTitle.style.marginLeft = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].slideShow.left + 'px';
    for(i = 0; i < this.__getMirrorSize(); i++) {
        if(!create) { 
            e = document.getElementById('m' + i).childNodes[0];
            if(DynamicItemViewer.imagesInfo.useLoadingImage) {e.src = DynamicItemViewer.imagesInfo.loadingImage.src;}
            if(DynamicItemViewer.imagesInfo.useLowImage) {e.src = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].lowImage.src;}           
            e.style.width = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].slideShow.width + 'px';
 			if(!Utils.isIE()) {e.style.marginTop = - DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].slideShow.height + 1 + i + 'px';}
 			e.src = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].image.src; 
        } else {this.__addMirrorLine(i);}
    }
    this.objImg.src = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].image.src;
}

/**
 * Private Method: Render the title and comment of an image.
 */ 
DynamicItemViewer.slideShow.__renderInfo = function() {
	this.objTitle.innerHTML = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].title;
    if(this.objComment != null) {
    	this.objComment.innerHTML = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].comment;
	}
    if(this.objCreationDate != null) {
    	this.objCreationDate.innerHTML = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].creationDate;
	}
	
	if(this.objRating != null) {
		this.objRating.innerHTML = DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].info01;
	}	
}
 
/**
 * Play the slideshow
 */
DynamicItemViewer.slideShow.play = function() {
	if(DynamicItemViewer.images.length) {
		if(this.objImg.uniqueId != DynamicItemViewer.images[DynamicItemViewer.imagesInfo.active].id) {
    		this.__renderImage();
    		this.__renderInfo();		
		}
    	if(this.slideTimer == null) {this.slideTimer = setInterval('DynamicItemViewer.slideShow.modifyActiveImageBy(1)', this.slideTimeSec * 1000);}
    }
}

/**
 * setter for slide timer
 */
DynamicItemViewer.slideShow.setSlideTimer = function(timeSec) {
	if(timeSec) {
		this.pause()
		this.slideTimeSec = timeSec;
		this.play();
		//this.slideTimer = setInterval('DynamicItemViewer.slideShow.modifyActiveImageBy(1)', this.slideTimeSec * 1000);
		
	}
}


/**
 * Pause the slideshow.
 */
DynamicItemViewer.slideShow.pause = function() {
    clearInterval(this.slideTimer);
    this.slideTimer = null;
}  


/**
 * organize photos
 */
// public:
DynamicItemViewer.sortOverview = new Object();

/**
 * Initialization of document element by the Id.
 * 
 * @param {String} objSortOverview
 *            Id of where the images will be rendered into. Inevitable parameter!
 * @param {String} objSortSelect
 *            Id of where the type of sorting will be set. Inevitable parameter!
 * @param {String} strLnkArrowLeft
 *            String for text node of the "move image left" link. Default value is '<'. 
 * @param {String} strLnkArrowRight
 *            String for text node of the "move image right" link. Default value is '>'.
 */  
DynamicItemViewer.sortOverview.initDocument = function(objSortOverview, objSortSelect, strLnkArrowLeft, strLnkArrowRight, objSortSelectContext) {
	this.objSortOverview  		= document.getElementById(objSortOverview);
	this.objSortSelect    		= document.getElementById(objSortSelect);
	this.objSortSelectContext   = document.getElementById(objSortSelectContext);
	this.strLnkArrowLeft  		= typeof(strLnkArrowLeft) == 'undefined' ? '<' : strLnkArrowLeft;
	this.strLnkArrowRight 		= typeof(strLnkArrowright) == 'undefined' ? '>' : strLnkArrowRight;
}

/**
 * Main initialization (its predecessor must be the initDocument) method.
 * 
 * @param {Array} maxSize
 *            Maximal rendered image size. Default value is [110, 110]. 
 */ 
DynamicItemViewer.sortOverview.init = function(maxSize) {
    var i, j, div, img, objDiv, dTT, dAL, sAL, dAR, sAR, dCB, dSI, pTS, pTC, pTT, pPS, ul, li;
    ul = document.createElement('ul');
    if(DynamicItemViewer.images.length) {
	    ul.id        = 'photoList';
	    this.maxWidth        = typeof(maxSize) == 'undefined' ? 110 : maxSize[0];
	    this.maxHeight       = typeof(maxSize) == 'undefined' ? 110 : maxSize[1];
	    this.imgResize       = new ImgResize(this.maxWidth, this.maxHeight);
	    this.__prepareImages();
	    for(i = 0; i < DynamicItemViewer.images.length; i++) {
	    	li  = document.createElement('li');
		    dTT = document.createElement('div');
		    dAL = document.createElement('div');
		    sAL = document.createElement('strong');
		    dAR = document.createElement('div');
		    sAR = document.createElement('strong');
		    dCB = document.createElement('div');
		    dSI = document.createElement('div');
		    pTS = document.createElement('p');
		    pTC = document.createElement('p');
		    pTT = document.createElement('p');
		    pPS = document.createElement('p');
		    dI = document.createElement('div');
		    
		    div = document.createElement('div');
		    div.className     = 'sortOverviewImg';
            div.style.marginLeft = DynamicItemViewer.images[i].sortOverview.left + 'px';  
            div.style.marginTop  = DynamicItemViewer.images[i].sortOverview.top + 'px';
            
            img = document.createElement('img');
            img.className    = 'image';
            if(DynamicItemViewer.imagesInfo.useLoadingImage) {img.src = DynamicItemViewer.imagesInfo.loadingImage.src;}
            img.src          = DynamicItemViewer.images[i].image.src;
            img.style.width  = DynamicItemViewer.images[i].sortOverview.width + 'px';
            img.style.height = DynamicItemViewer.images[i].sortOverview.height + 'px';              
            div.appendChild(img);
            
		    dTT.className = 'title';
		    dTT.innerHTML = DynamicItemViewer.images[i].title;
		    dI.className = 'imgInfo';
		    dI.innerHTML = DynamicItemViewer.images[i].info02;
		    sAL.appendChild(document.createTextNode(this.strLnkArrowLeft));
		    dAL.className = 'arrow-left';
		    dAL.appendChild(sAL);
		    sAR.appendChild(document.createTextNode(this.strLnkArrowRight));
		    dAR.className = 'arrow-right';
		    dAR.appendChild(sAR);
		    dCB.className = 'reset';
		    dCB.style.clear = 'both';
		    pTS.className = 'sTimestamp';
		    pTS.appendChild(document.createTextNode(DynamicItemViewer.images[i].info03));
		    pTC.className = 'sTimestampCreated';
		    pTC.appendChild(document.createTextNode(DynamicItemViewer.images[i].info01));
		    pTT.className = 'sTitle';
		    pTT.appendChild(document.createTextNode(DynamicItemViewer.images[i].title));
		    pPS.className = 'sSize';
		    pPS.appendChild(document.createTextNode(DynamicItemViewer.images[i].info04));
		    dSI.className = 'sortinfo';
		    dSI.appendChild(pTS);
		    dSI.appendChild(pTC);
		    dSI.appendChild(pTT);
		    dSI.appendChild(pPS);
		    
		    li.id         = 'imgbox-' + DynamicItemViewer.images[i].id;
		    li.className  = 'imgbox';
		    li.style.width = (DynamicItemViewer.imagesInfo.maxWidth +15) + 'px';
            li.style.height = (DynamicItemViewer.imagesInfo.maxHeight + 50) + 'px';
		    
		    li.appendChild(div);
		    li.appendChild(dTT);
		    li.appendChild(dI);
		    li.appendChild(dAL);
		    li.appendChild(dAR);
		    li.appendChild(dCB);
		    li.appendChild(dSI);
		    ul.appendChild(li);
	    }
	    this.objSortOverview.appendChild(ul);
	    this.sortList                   = new GlobalListSort(ul.id);
	    this.sortList.sortFlagTitle     = pTT.className;
	    this.sortList.sortFlagTimestamp = pTS.className;
	    this.sortList.sortFlagTimestampCreated = pTC.className;
	    this.sortList.init();
	    this.setSortType('individual;up');
	    this.dragList                = new IndividualListSort(ul.id);
	    this.dragList.thumbClassName = div.className;
	    this.dragList.onmoveobj      = new Function('DynamicItemViewer.sortOverview.setSortType("individual;up");');
	    this.dragList.init();
	    this.objSortSelect.onchange  = DynamicItemViewer.sortOverview.setSortType;
    }    	    
}

/**
 * Private Method: Actualize the images list toward its usage in the sortOverview.
 */  
DynamicItemViewer.sortOverview.__prepareImages = function() {
    var i, image;
    DynamicItemViewer.__imagePreload(DynamicItemViewer.images.length);
    for(i = 0; i < DynamicItemViewer.images.length; i++) {
    	image = this.imgResize.calculate(DynamicItemViewer.images[i].width, DynamicItemViewer.images[i].height);
    	DynamicItemViewer.images[i].sortOverview.width  = image.width;
    	DynamicItemViewer.images[i].sortOverview.height = image.height; 	
    	DynamicItemViewer.images[i].sortOverview.left   = image.left;
    	DynamicItemViewer.images[i].sortOverview.top    = image.top;		
    }
}

/**
 * Change the order of sorting by predefined selections.
 * 
 * @param {String} sortType
 *            Set the sorting type manually - this parameter is optional.
 * @return
 *            True if scrolling possible, else 'begin', 'end' or 'none'. 
 */
DynamicItemViewer.sortOverview.setSortType = function(sortType) {
	if(typeof(this.nodeName) != 'undefined') {return DynamicItemViewer.sortOverview.setSortType();}
	sortType = (typeof(sortType) == 'undefined' ? this.objSortSelect.value : sortType).split(';');
	if(sortType[0] == 'individual' && typeof(this.sortList) != 'undefined' && typeof(this.dragList) != 'undefined') {
		this.sortList.individualSeperator = ';';
		this.sortList.individualString    = this.dragList.serializeList(';');
	}
	try {this.sortList.sortList(sortType[0], sortType[1]);}
	catch(e) {return false;}
	this.objSortSelect.value = sortType.join(';');
	if(this.objSortSelectContext)
	{
		this.objSortSelectContext.replaceChild(document.createTextNode(this.objSortSelect.options[this.objSortSelect.selectedIndex].text), this.objSortSelectContext.firstChild);
	}
	return true;
}

/**
 * Get the actual sorted photo list..
 * 
 * @return
 *            The actual ';' seperated and sorted photo list. 
 */
DynamicItemViewer.sortOverview.getSortedList = function() {
	return typeof(this.dragList) != 'undefined' ? (this.dragList.serializeList(';')).replace(/imgbox-/g, '') : '';
}



/*
 *rename photos
 */
 
 /*****************************************************************************/
 
// public:
DynamicItemViewer.renamePhotos = new Object();

// private:
DynamicItemViewer.renamePhotos.objLi  = new Array();
DynamicItemViewer.renamePhotos.objImg = new Array();

/**
 * Initialization of document element by the Id.
 * 
 * @param {String} objNaviInfo
 *            Id of element where the page info will be include.
 * @param {String} objPagesNavi
 *            Id of element where the page links will be include.
 * @param {String} objRenamePhotos
 *            Id of where the images will be rendered into. Inevitable parameter!
 * @param {String} objNoImgInAlbumInfo
 *            Id of element which will be shown wehn the current album contains no images. Inevitable parameter!
 */  
DynamicItemViewer.renamePhotos.initDocument = function(objNaviInfo, objPagesNavi, objRenamePhotos, objNoImgInAlbumInfo, maxTitleLength) {
    this.objRenamePhotos       = document.getElementById(objRenamePhotos);
    this.objNoImgInAlbumInfo    = document.getElementById(objNoImgInAlbumInfo);
    this.objNaviInfo            = document.getElementById(objNaviInfo);
    this.objPagesNavi           = document.getElementById(objPagesNavi);
    this.maxTitleLength         = maxTitleLength;
}

/**
 * Main initialization (its predecessor must be the initDocument) method.
 * 
 * @param {Integer} maxVisibleImages
 *            Set the visible images of the photo list. Default value is 6.
 * @param {Array} maxSize
 *            Maximal rendered image size. Default value is [110, 110]. 
 */ 
DynamicItemViewer.renamePhotos.init = function(maxVisibleImages, maxSize) {
    var ul, li, div01, div02, input, label, textarea, span;
    ul = document.createElement('ul');
    if(DynamicItemViewer.images.length) {
        ul.id        = 'photoList';
        ul.className = 'sharingFrame';
        this.maxVisibleImages = isNaN(maxVisibleImages) ? 6 : maxVisibleImages;
        this.pagesQuantity = Math.ceil(DynamicItemViewer.images.length / this.maxVisibleImages);
        this.activePage = Math.ceil(DynamicItemViewer.imagesInfo.active / this.maxVisibleImages) + 1;
        if(isNaN(this.activePage)) this.activePage = -1;
        this.maxWidth      = typeof(maxSize) != 'object' ? 110 : maxSize[0];
        this.maxHeight     = typeof(maxSize) != 'object' ? 110 : maxSize[1];
        this.imgResize     = new ImgResize(this.maxWidth, this.maxHeight);
        this.__prepareImages();
        for(i = 0; i < DynamicItemViewer.images.length; i++) {
            li = document.createElement('li');
            
            div01 = document.createElement('div');
            div01.className    = 'colLeft';
            
            div02 = document.createElement('div');
            div02.id = 'pf' + DynamicItemViewer.images[i].id;
            div02.className   = 'photoDetailsImg';
            div02.style.paddingLeft = DynamicItemViewer.images[i].renamePhotos.left + 'px';  
            div02.style.paddingTop  = DynamicItemViewer.images[i].renamePhotos.top + 'px'; 
            
            img = document.createElement('img');
            img.className    = 'image';
            img.id = 'p' + DynamicItemViewer.images[i].id;
            if(DynamicItemViewer.imagesInfo.useLoadingImage) {img.src = DynamicItemViewer.imagesInfo.loadingImage.src;}
            if(typeof(DynamicItemViewer.images[i].image) != 'undefined') {img.src = DynamicItemViewer.images[i].image.src;}
            img.style.width  = DynamicItemViewer.images[i].renamePhotos.width + 'px';
            img.style.height = DynamicItemViewer.images[i].renamePhotos.height + 'px';
            this.objImg.push(img);
            
            div02.appendChild(img);
            div01.appendChild(div02);
            li.appendChild(div01);
            
            div01 = document.createElement('div');
            div01.className    = 'colRight';
            
            label = document.createElement('label');
            label.className    = 'txtStrong';
            label.htmlFor = 'photoTitle' + i;
            label.innerHTML = DynamicItemViewer.images[i].info01;
            
            input = document.createElement('input');
            input.id = 'photoTitle' + i;
            input.type = 'text';
            input.name = 'title[' + i + ']';
            if(this.maxTitleLength != undefined)
            	input.maxLength = this.maxTitleLength;
            if(DynamicItemViewer.images[i].title != undefined)
                input.value = DynamicItemViewer.images[i].title;
            
            div01.appendChild(label);
            div01.appendChild(input);
            
            label = document.createElement('label');
            label.className    = 'txtStrong';
            label.htmlFor = 'photoDescription' + (i + 1);
            label.innerHTML = DynamicItemViewer.images[i].info02;
            
            textarea = document.createElement('textarea');
            textarea.id = 'photoDescription' + (i + 1);
            textarea.name = 'description[' + i + ']';
            textarea.innerHTML = DynamicItemViewer.images[i].comment;
            
            div01.appendChild(label);
            div01.appendChild(textarea);
            
            input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'albumitemId[' + i + ']';
            input.value = DynamicItemViewer.images[i].id;
            
            div01.appendChild(input);
            li.appendChild(div01);
            
            this.objLi.push(li);
            ul.appendChild(li);
            
        }
        this.objRenamePhotos.appendChild(ul);
        this.__renderImages();
        
        // page Navi
        if(this.objPagesNavi) {
            if(this.pagesQuantity > 1 && this.activePage != -1) {
                span = document.createElement('span');
                span.id = 'pagesNaviSpan';
                this.objPagesNavi.insertBefore(span, document.getElementById('renamePhotosLnkNextPageOff'));
            }
        }
    }
    else {this.objNoImgInAlbumInfo.style.display = 'block';}
}

/**
 * Private Method: Actualize the images list toward its usage in the renamePhotos.
 */  
DynamicItemViewer.renamePhotos.__prepareImages = function() {
    var i, image;
    for(i = 0; i < DynamicItemViewer.images.length; i++) {
        image = this.imgResize.calculate(DynamicItemViewer.images[i].width, DynamicItemViewer.images[i].height);
        DynamicItemViewer.images[i].renamePhotos.width  = image.width;
        DynamicItemViewer.images[i].renamePhotos.height = image.height;    
        DynamicItemViewer.images[i].renamePhotos.left   = image.left;
        DynamicItemViewer.images[i].renamePhotos.top    = image.top;       
    }
}

/**
 * Private Method: Render the current images.
 */ 
DynamicItemViewer.renamePhotos.__renderImages = function() {
    var i;
    DynamicItemViewer.__imagePreload(this.maxVisibleImages);
    for(i = 0; i < DynamicItemViewer.images.length; i++) {
        if(typeof(DynamicItemViewer.images[i].image) != 'undefined') {this.objImg[i].src = DynamicItemViewer.images[i].image.src;}
        this.objLi[i].style.display = (i >= DynamicItemViewer.imagesInfo.active && i < DynamicItemViewer.imagesInfo.active + this.maxVisibleImages) ? 'block' : 'none';
    }
}

/**
 * Update the renamePhotos and render the next / last (depending on value) page.
 * 
 * @param {Integer} mod 
 *            Modificate by value the actual page that will be rendered.
 * @return
 *            True if scrolling possible, else 'begin', 'end' or 'none'.
 */
DynamicItemViewer.renamePhotos.modifyActivePageBy = function(mod) {
    var ret = true;
    mod *= this.maxVisibleImages;
    if(DynamicItemViewer.imagesInfo.active % this.maxVisibleImages != 0) {DynamicItemViewer.imagesInfo.active = Math.floor(DynamicItemViewer.imagesInfo.active / this.maxVisibleImages) * this.maxVisibleImages;}
    if(DynamicItemViewer.images.length <= this.maxVisibleImages) {ret = 'none';}
    else if(DynamicItemViewer.imagesInfo.active + mod <= 0) {ret = 'begin';}
    else if(DynamicItemViewer.imagesInfo.active + 2 * mod >= DynamicItemViewer.images.length) {ret = 'end';}
    if(DynamicItemViewer.imagesInfo.active + mod >= 0 && DynamicItemViewer.imagesInfo.active + mod < DynamicItemViewer.images.length) {DynamicItemViewer.imagesInfo.active += mod;}
    if(DynamicItemViewer.images.length) {this.__renderImages();}
    this.activePage = Math.ceil(DynamicItemViewer.imagesInfo.active / this.maxVisibleImages) + 1;
    if(isNaN(this.activePage)) {
        this.activePage = -1;
        ret = 'none';
    }
    this.modifyPageInfo();
    return ret;
}

/**
 * Update the renamePhotos and render the next / last (depending on value) page.
 * 
 * @param {Integer} pageNumber 
 *            Modificate by number the actual page that will be rendered.
 * @return
 *            True if scrolling possible, else 'begin', 'end' or 'none'.
 */
DynamicItemViewer.renamePhotos.viewActivePageByNumber = function(pageNumber) {

    var ret = true;
    this.activePage = pageNumber;
    if(this.activePage > this.pagesQuantity) {this.activePage = this.pagesQuantity};
    DynamicItemViewer.imagesInfo.active = this.activePage * this.maxVisibleImages - this.maxVisibleImages;
    if(DynamicItemViewer.imagesInfo.active > (DynamicItemViewer.images.length - 1)) {
        DynamicItemViewer.imagesInfo.active = DynamicItemViewer.images.length - 1;
    }
    if(DynamicItemViewer.images.length <= this.maxVisibleImages) {
        ret = 'none';
    }
    else if(DynamicItemViewer.imagesInfo.active < this.maxVisibleImages) {
        ret = 'begin';
    }
    else if(DynamicItemViewer.imagesInfo.active + this.maxVisibleImages >= DynamicItemViewer.images.length) {
        ret = 'end';
    }
    if(DynamicItemViewer.images.length) {
        this.__renderImages();
    }
    this.modifyPageInfo();
    return ret;
}

/**
 * Update the renamePhotos and render all items.
 * 
 * @return
 *            True if scrolling possible, else 'begin', 'end' or 'none'.
 */
DynamicItemViewer.renamePhotos.viewAllItems = function() {
    
    var i, lnkObj;
    DynamicItemViewer.__imagePreload(DynamicItemViewer.images.length);

    for(i = 0; i < DynamicItemViewer.images.length; i++) {
        if(typeof(DynamicItemViewer.images[i].image) != 'undefined') {this.objImg[i].src = DynamicItemViewer.images[i].image.src;}
        this.objLi[i].style.display = (i >= 0 && i < DynamicItemViewer.images.length) ? 'block' : 'none';
    }
    for(var i=1; i <= this.pagesQuantity; i++) {
        lnkObj = document.getElementById('lnkActivatePageByNumber' + i)
        if(lnkObj) {
        	aspadmin.CssHelper.removeClass(lnkObj, 'active');
        }
    }
    return 'all';
}


/**
 * modificate page navi if exists.
 * 
 */
DynamicItemViewer.renamePhotos.modifyPageInfo = function() {
    var i, em, lnk, span, minVisibleItemNumber, maxVisibleItemNumber;
    if(this.objNaviInfo && this.activePage != -1) {
        if(this.objNaviInfo.firstChild) {
            this.objNaviInfo.removeChild(this.objNaviInfo.firstChild);
        }
        
        minVisibleItemNumber = this.activePage * this.maxVisibleImages - this.maxVisibleImages + 1;
        if(minVisibleItemNumber <= 0) { minVisibleItemNumber = 1;}
        maxVisibleItemNumber = this.activePage * this.maxVisibleImages;
        if(maxVisibleItemNumber > DynamicItemViewer.images.length) { maxVisibleItemNumber = DynamicItemViewer.images.length;}
        this.objNaviInfo.appendChild(document.createTextNode(minVisibleItemNumber + '-' + maxVisibleItemNumber + ' ' + DynamicItemViewer.naviString + ' '+ DynamicItemViewer.images.length));
        
        if(this.pagesQuantity > 1) {
            span = document.getElementById("pagesNaviSpan");
            span.innerHTML = '';
            for(i=0; i < this.pagesQuantity; i++) {
                em  = document.createElement('em');
                em.className = 'activatePageByNumber';
                lnk =  document.createElement('a');
                lnk.id = 'lnkActivatePageByNumber' + (i + 1);
                lnk.innerHTML = i + 1;
                lnk.href = 'javascript:viewActivePageByNumber(' + (i + 1) + ');';
                em.appendChild(lnk);
    
                if(this.pagesQuantity <= 10 || i < 2 || i > this.pagesQuantity - 3 || (i > this.activePage-3 && i < this.activePage+1)) {
                    span.appendChild(em);
                    if(i != this.pagesQuantity - 1 && (this.pagesQuantity <= 10 || i < 1 || i > this.pagesQuantity - 4 || (i > this.activePage-4 && i < this.activePage))) {
                        span.appendChild(document.createTextNode(' - '));
                    }
                    if(lnk.id == 'lnkActivatePageByNumber' + this.activePage) {
                        lnk.className = 'active';
                    }
                }
                else if(span.lastChild && span.lastChild.data != ' ... ' ){
                    span.appendChild(document.createTextNode(' ... '));
                }
            }
        }
    }
}