var PhotoUpload = new Class({
	initialize: function(uiid, currentPage){
		this.imageServer = '';
		this.uiid = uiid;
		this.viewport = new ViewPort('scroll-view', 'scroll-item', {
			scrollerOptionsH: {
				inUse: true,
				increaseArrowName: "scroll-right-arrow",
				decreaseArrowName: "scroll-left-arrow",
				elementsPerPage: 10,
				pageRetrievalBuffer: 5,
				totalElements: 20
			}
		});
		if (currentPage != 1) {
			this.viewport.loadPage(currentPage,uiid);
		}
		else {
			this.viewport.resetView();		
			this.viewport.moveHorizontal(1);		
		}
		this.viewport.addEvent('onDataLoad', function(page) { this.loadPage(page); }.bind(this));
		//find all the links with grow on them
		$$('.grow').each(function(item){
			item.addEvent('click', function(e){
				new Event(e).stop();
				this.getImage(item);
			});
		});
				
	},
	loadPage: function(page) {
	    page.getElementsBySelector('.grow').each(function(item){
			item.addEvent('click', function(e){
				new Event(e).stop();
				this.getImage(item);
			}.bind(this));
		},this);
		// if the uiid  is set find the item and select it.
		if ($(this.uiid)) {
			this.viewport.selectItem($(this.uiid).getParent());
			this.getImage($(this.uiid).getParent());
			this.uiid = '';
			
		}
		if (page.id == 'hpage1')
		{
			this.getImage(page.getFirst());
		}
	},
	getImage: function(item){
		var imageEl = item.getElement("img");
		var loadingDiv = new Element('div', {
			'class': 'loading',
			styles: {
				width: imageEl.getStyle('width'),
				height: imageEl.getStyle('height'),
				left: imageEl.getStyle('left'),
				top: imageEl.getStyle('top'),
				position: 'absolute',
				display: 'block',
				opacity: 0.7,
				zIndex: 50
			}
		}).inject(item);
		
		var uiid = item.getProperty('rel');
		window.currentUiid = uiid;
		
		var url = '/fpxml.aspx';
		var dataXml = '<request st="5760" e="getphotos"><parameters><parameter name="uiid">' + uiid + '</parameter></parameters></request>';
		//var dataXml = '<request st="10" e="getphotos"><parameters><parameter name="uipagesize">10</parameter><parameter name="uipage">1</parameter></parameters></request>';
		this.retriever = new Ajax(url, {method: 'post', data: dataXml,
			onSuccess: function(responseArr){
				this.process(responseArr, imageEl, loadingDiv);
			}.bind(this)
		}).request();
		
	},
	process: function(xml, imageEl, loadingDiv){
		var xmlDoc = null;
		var imageToLoad = "";
		var captionForReplacement = "";
		//check if ie
		if(window.ie){
			xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
 			xmlDoc.async="false";
  			xmlDoc.loadXML(xml);
		} else {
			var parser = new DOMParser();
			xmlDoc = parser.parseFromString(xml, "text/xml");
		}
		
		var attributeNodes = xmlDoc.getElementsByTagName('attribute');
		for(i=0; i < attributeNodes.length; i++){
			var code = attributeNodes[i].getAttribute('code');
			switch(code){
				case 'photoCaption': 
					captionForReplacement = attributeNodes[i].firstChild.firstChild.nodeValue;
					break;
				case 'fileURL':
					imageToLoad = attributeNodes[i].firstChild.firstChild.nodeValue;
				default:
					//maybe default load failed caption and image
					break;
			}
		}
		
		var loader = new Image();
	
		var fxDiv = new Element('img', {
			styles: {
				width: imageEl.getStyle('width'),
				height: imageEl.getStyle('height'),
				left: imageEl.getStyle('left'),
				top: imageEl.getStyle('top')
			}
		});
	
		var fx = fxDiv.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
		var fxText = new Fx.Styles($('caption'), { duration: 500, wait: false, transition: Fx.Transitions.Quint.easeIn } )
		
		loader.onload = loader.onabort = loader.onerror = function() {
			var mainImage = $('mainimage');
			fxDiv.src = loader.src;
			fxDiv.setStyles({
				width: imageEl.getStyle('width'),
				height: imageEl.getStyle('height'),
				left: imageEl.getLeft([$('scroll-view')]),
				top: imageEl.getTop([$('scroll-view')]),
				position: 'absolute',
				zIndex: 50
			});
			fxDiv.inject(document.body);
			
			loadingDiv.remove();

			fxText.start({
				'opacity': [1, 0]
			}).chain(function(){
				$('caption').setHTML(captionForReplacement);
				fxText.start({
					'opacity': [0, 1]
				});
			});		
	
			fx.start({
				'width': mainImage.getStyle('width'),
				'height': mainImage.getStyle('height'),
				'top': mainImage.getTop(),
				'left': mainImage.getLeft(),
				'padding': "21px 0pt 0pt 21px"
			}).chain(function(){
				fxDiv.remove();
				mainImage.src = loader.src;
			});			
		};
		
		loader.src = this.imageServer + imageToLoad;
	}
	
	
});