var Zoom = {
	initialize: function(options){	
	
		this.options = Object.extend({
			id:          'zoomPanel',
			className:   'zoomPanel',
			backgroundSrc:  'images/zoom/zoom-background.png',
			thumbId:      '',
			defaultThumbWidth:  '75',
			defaultThumbHeight: '55',
			defaultWidth:  '1040',
			defaultHeight: '690',
			state:      false,
			activeItem: false,
			activeIndex: 0
		}, options || {});
		
		
		this.anchors = $$('a.zoom');
		
		this.divElement  = new Element('div', {'id': this.options.id, 'styles' : {'display' : 'block'} , 'class' : this.options.className });	
		this.divElement.setStyle('z-index', '26000');
		
		this.divElement.setStyle('left', this.getPopupLeftLocation());
		this.divElement.setStyle('width', this.options.defaultWidth + 'px');
		this.divElement.setStyle('height', this.options.defaultHeight + 'px');
		
		this.divElement.setStyle('top', this.getPopupTopLocation());	
		this.divElement.setStyle('display', 'none');
				
		this.divElement.injectInside(document.body);
		
		this.divCloseElement  = new Element('div', {'id': this.options.id + '-close', 'class' : this.options.className+'-close' });	
		this.divCloseElement.injectInside(this.divElement);
		
		this.anchorCloseElement  = new Element('a', {'id': this.options.id + '-close-anchor', 'class' : this.options.className+'-close-anchor' });	
		this.anchorCloseElement.href = "#close"
		this.anchorCloseElement.innerHTML = 'close'
		this.anchorCloseElement.onclick = this.closeOnClick.pass(this);
		this.anchorCloseElement.injectInside(this.divCloseElement);
		
		this.imgBackgroundElement  = new Element('img', {'id': this.options.id + '-background-img', 'class' : this.options.className+'-background' });	
		this.imgBackgroundElement.src = this.options.backgroundSrc;
		this.imgBackgroundElement.injectInside(this.divElement, 'bottom');
		
		this.divContent  = new Element('div', {'id': this.options.id + '-content', 'class' : this.options.className+'-content' });	
		this.divContent.injectInside(this.divElement, 'bottom');
		
		this.divFeature  = new Element('div', {'id': this.options.id + '-feature', 'class' : this.options.className+'-feature' });	
		this.divFeature.injectInside(this.divContent);
		
		this.imgFeature  = new Element('img', {'id': this.options.id + '-img', 'class' : this.options.className+'-img' });
		this.imgFeature.src = this.anchors[0].href;
		this.imgFeature.injectInside(this.divFeature);
		
		this.divNav  = new Element('div', {'id': this.options.id + '-nav', 'class' : this.options.className+'-nav' });	
		this.divNav.injectInside(this.divContent, 'bottom');
		
		this.divNavUl  = new Element('ul', {'id': this.options.id + '-nav-ul', 'class' : this.options.className+'-nav-ul' });	
		this.divNavUl.injectInside(this.divNav);

		this.divNavLists   = new Array();
		this.divNavAnchors = new Array();
		this.divNavThumbs  = new Array();
		//this.ImagesRaw  = new Array();

		var i = 0;
		
		$each(this.anchors, function(el){
			this.divNavLi   = new Element('li', {'id': this.options.id + '-nav-li-' + i, 'class' : this.options.className+'-nav-li' });	
			this.divNavLi.injectInside(this.divNavUl,'bottom');
			this.divNavLists.push(this.divNavLi);
			
			this.divNavA    = new Element('a', {'id': this.options.id + '-nav-a-' + i, 'class' : this.options.className+'-nav-a' });	
			this.divNavA.injectInside(this.divNavLi,'bottom');
			this.divNavA.onclick = this.thumbOnClick.pass(el, this);
			this.divNavAnchors.push(this.divNavA);
			
			this.divNavImg  = new Element('img', {'id': this.options.id + '-nav-img-' + i, 'src' : this.getThumbNailFileName(el.href, this.options.thumbId), 'class' : this.options.className+'-nav-img', 'width' : this.options.defaultThumbWidth,'height' : this.options.defaultThumbHeight  });	
			this.divNavImg.addClass('inactive');
			this.divNavImg.injectInside(this.divNavA,'bottom');		
			this.divNavThumbs.push(this.divNavImg)	;
			i = i + 1;
		}, this);
				
		var i = 0;
		$each(this.anchors, function(el){
			el.index = i;
			el.onclick = this.onclick.pass(el, this);
			i = i + 1;
		}, this);
		
	},
	
	onclick: function(link) {		
		this.state = true;
		this.divElement.setStyle('left', this.getPopupLeftLocation());
		this.divElement.setStyle('top', this.getPopupTopLocation());	
		this.featureFadeIn(link)
		this.divElement.setStyle('display', 'block');
		
		return false;
	},
	
	
	thumbOnClick: function(link) {
		this.featureFadeOut(link);
		this.featureFadeIn(link);
		return false;
	},
	
	closeOnClick: function(link) {
		link.divElement.setStyle('display', 'none');
		link.state = false;
		return false;
	},
	
	featureFadeIn: function(link) {
		this.divNavThumbs[this.options.activeIndex].removeClass('active');
		this.divNavThumbs[link.index].addClass('inactive');
		this.options.activeIndex = link.index;
		this.divNavThumbs[link.index].addClass('active');
		
		this.divFeature.innerHTML = "";
		
		this.imgFeature  = new Element('img', {'id': this.options.id + '-img', 'class' : this.options.className+'-img' });
		this.imgFeature.src = this.anchors[link.index].href;
		this.imgFeature.style.display = 'inline';
		this.imgFeature.style.verticalAlign = 'middle';
		this.imgFeature.injectInside(this.divFeature);
		this.divFeature.style.verticalAlign = 'middle';
		//this.imgFeature.src = link.href;
		
	},
	
	featureFadeOut: function(link) {
		this.divFeature.innerHTML = "";
		//this.imgFeature.style.display = 'none';
		//this.imgFeature.src = link.href;
	},	
	
	getPopupLeftLocation: function() {
		var scrollX;
		if (document.all != null) {	scrollX = (document.documentElement.clientWidth / 2) - (this.options.defaultWidth / 2) + document.documentElement.scrollLeft;}	
		else	{	scrollX = (window.innerWidth / 2) - (this.options.defaultWidth / 2) + window.scrollX;	}
		if(scrollX < 0) {
			scrollX = 15;
		}
		return scrollX + "px";
	},
	
	getPopupTopLocation: function() {
    var scrollY;
    if (document.all != null) { scrollY = (document.documentElement.clientHeight / 2) - (this.options.defaultHeight / 2) + document.documentElement.scrollTop;  } 
		else { scrollY = Math.round((window.innerHeight / 2) - (this.options.defaultHeight / 2) + window.scrollY);}
    if(scrollY < 0) {
			scrollY = 15;
		}
		return scrollY + "px";
	},	
	
	getThumbNailFileName: function(url, value){
		var urlArray = url.split('/'); 
		var returnStrg
		urlArray = urlArray.slice(3,urlArray.length)
		var fileName = urlArray[urlArray.length-1].split(".");
		return '/' + urlArray.slice(0,urlArray.length-1).join("/") + '/' + fileName[0] + value + '.' + fileName[1];
	}
	
}
window.addEvent('domready',  Zoom.initialize.bind(Zoom));