//version 1.1

var pageLoaded = 0;
var viewer;
var viewerImg;
var loaderImgUrl = "js/switcher/loading-black.gif";

window.addEvent('domready', function() {
	pageLoaded = 1;
	viewer = $('viewer');
	viewerImg = $('viewerImg');
	if(!$('otherView')) {
		viewer.setStyles({
			'width': $('itemSingle').getStyle('width'),
			'margin': 0
		});
	}
	var imgBorder = (viewerImg.getStyle('border-width').toInt() + viewerImg.getStyle('padding').toInt()) * 2;
	if(viewerImg.getStyle('width').toInt() + imgBorder >= viewer.getStyle('width').toInt()) {
		viewerImg.setStyle('width', viewer.getStyle('width').toInt() - imgBorder);
	}
});

function switcher(el){
	if (pageLoaded == 1) {
		if(typeof(automate) != 'undefined') {clearInterval(automate);}
		var oldImg = viewerImg;
		if(typeof(loader) == 'undefined') { 
			var loader = new Element('div', {id: 'loader'});
			loader.wraps(viewerImg);
			loader.setStyles({
				background: '#000 url('+ loaderImgUrl +') center no-repeat'
			});
		}
		var newImg = new Image();
		newImg.src = el.href;
		automate = setInterval(function(){loadImg(el, newImg);}, 100);
		
		$(el).addEvent('mouseout', function(){
				oldImg.setStyle('opacity', 1);
				clearInterval(automate);
		});
		
		function loadImg(el, img){
			var viewerWidth = viewer.getStyle('width').toInt();
			var imgBorder = (viewerImg.getStyle('border-width').toInt() + viewerImg.getStyle('padding').toInt()) * 2;
			
			if (img.complete) {
				clearInterval(automate);
				oldImg.src = img.src;
				if (img.width > 0) {
					oldImg.setStyle('opacity', 1);
					if (img.width + imgBorder >= viewerWidth) {
						oldImg.setStyle('width', viewerWidth - imgBorder);
						$('loader').setStyles({
							'width' : viewerWidth,
							'margin' : 0
						});
					} else {
						oldImg.setStyle('width', img.width);
						var marginLeft = ((viewerWidth - img.width + imgBorder) / 2) + (viewer.getStyle('margin-right').toInt() / 2);
						$('loader').setStyles({
							'margin-left' : marginLeft.round(),
							'margin-right' :  0,
							'width' : img.width + imgBorder
						});
					}
				} else {
					oldImg.setStyle('opacity', 0.5);
				}
			} else {
				oldImg.setStyle('opacity', 0.5);		
			}
		}
	}
}