var Zoom = new Class({
	Implements: Options,

	options: {
		id:          'zoomPanel',
		className:   'zoomPanel',
		backgroundSrc:  '/images/boxes/zoom-background.png',
		thumbId:      '',
		defaultThumbWidth:  '75',
		defaultThumbHeight: '55',
		defaultWidth:  '880',
		defaultHeight: '605',
		state:      false,
		activeItem: false,
		activeIndex: 0
	},
	
	initialize: function(options){				
		
		this.anchors = $$('a.zoom');
		
		if(this.anchors.length > 0) {
			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();
			
			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', function() {
	Zoom = new Zoom();		
});