var viewer = null;

$(document).ready(function(){

	//add extra markup for viewer
	$('#imagechanger').prepend('<div id="viewer"></div>').append('<a href="#" title="View slideshow of images" class="slideshow">view slideshow &gt;</a>');
	$('#imagechanger ul').wrap('<div class="tnholder"><div></div></div>');
	$('#imagechanger .tnholder').prepend('<a href="" class="prev">prev</a>').append('<a href="" class="next">next</a>');
	$('#imagechanger .tnholder ul li:first').addClass('current');
	$('#imagechanger').before('<p class="instructions">Drag and zoom image</p>');
	buttons();
	//initiate seadreagon viewer
	init(0);

});
$(window).load(function(){

	//preload slideshow images
	$('body').append('<div id="preloader" style="position:absolute;left:-100px;width:10px;overflow:hidden;"></div>');
	for(var i=1;i<14;i++){
		$('#preloader').append('<img src="includes/img/snappy_med/snappy'+i+'.jpg" alt="snappy '+i+' preloader" />')
	}
	
});
function buttons() {
    $('#imagechanger a.next').unbind().click(function(){
	
		var imgCount = $('#imagechanger ul li').length;
		var offSetLimit = parseInt(imgCount / 3) * -225;
		//if (imgCount % 3) {offSetLimit -= 225;}
		
		//alert(offSetLimit);
		
		var curOffSet = parseInt($('#imagechanger ul').css('left'));
		if(curOffSet > offSetLimit && curOffSet % 225 == 0) {
			$('#imagechanger ul').stop().animate({'left':'-=225px'},'normal','swing');            		
		}
		return false;
	
	});
	$('#imagechanger a.prev').unbind().click(function(){
	
		var curOffSet = parseInt($('#imagechanger ul').css('left'));
		if(curOffSet < 0 && curOffSet % 225 == 0) {
			$('#imagechanger ul').stop().animate({'left':'+=225px'},'normal','swing');            		
		}
		return false;
	
	});
	$('#imagechanger ul a').unbind().click(function(){
	
		var index = $('#imagechanger ul li').index( $(this).parents('li') );
		displayZoomImg(index);
		return false;
	
	});
	
	$('a.slideshow').unbind().click(function(){
		
		$('#viewer').empty();
		
		$('#imagechanger ul').stop();
		//disable buttons
		$('#imagechanger a.prev, #imagechanger a.next, #imagechanger a.slideshow').click(function(){	return false; }).animate({'opacity':'0'},'fast');
		$('#imagechanger ul a').unbind().click(function(){
	
			//display the image in question 
			var index = $('#imagechanger ul li').index( $(this).parents('li') );
			init(index);
			//stop the slideshow            			
			clearTimeout(rotateTimeout);				
			$('#imagechanger a.prev, #imagechanger a.next, #imagechanger a.slideshow').animate({'opacity':'1'},'fast','linear',function(){buttons();$('#imagechanger #viewer').unbind();});
			return false;
	
		});
		$('#imagechanger #viewer').unbind().click(function(){
		
			$('#imagechanger ul li.current a').trigger('click');
		
		});
		
	    //define a few initial values
		var itemCount = $('#imagechanger ul li').length;
		var rotateTimeout;
		var currentItem = 0;
		var oldItem = 0;
		
		//display first headline
		displaySlideshowImg(0);	
		
		//define ticker function
		var tick = function(){
				
				currItem = (oldItem + 1) % itemCount;
				if(currItem > 0){
					displaySlideshowImg(currItem);
					rotateTimeout = setTimeout(tick, 1500);
				} else {
					$('#imagechanger a.prev, #imagechanger a.next, #imagechanger a.slideshow').animate({'opacity':'1'},'fast','linear',function(){
						buttons();
						$('#imagechanger #viewer').unbind();
						clearTimeout(rotateTimeout);
						init(0);
					});
					
				}
				oldItem = currItem;
			
		}
		//initiate ticker
		rotateTimeout = setTimeout(tick, 1500);
		            		
		return false;
	
	});

}
function displaySlideshowImg(index){
	//move the thumbnails
	var offSet = parseInt(index / 3 ) * -225;
	$('#imagechanger ul').stop().animate({'left':offSet+'px'},'normal','swing');
	$('#imagechanger ul li').removeClass('current');
	$('#imagechanger ul li:eq('+index+')').addClass('current');            
	//load the new image
	var imgLink = $('#imagechanger ul li:eq('+index+')').children('a').attr('href'); 
	$('#viewer').html('<img src="'+imgLink.replace(/snappy\//, "snappy_med/")+'" style="display:none;" />');
	$('#viewer img').fadeIn('fast');
}
function displayZoomImg(index){
	//move the thumbnails            
	var offSet = parseInt(index / 3 ) * -225;
	$('#imagechanger ul').stop().animate({'left':offSet+'px'},'normal','swing');
	$('#imagechanger ul li').removeClass('current');
	$('#imagechanger ul li:eq('+index+')').addClass('current');
	viewer.openDzi("includes/img/snappy_zoom/snappy"+((index*1)+1)+"/dzc_output.xml");
	
}



function init(index) {
   	$('#viewer').empty();
    viewer = new Seadragon.Viewer("viewer");
    viewer.clearControls();
    viewer.addControl(makeControl('home','home'), Seadragon.ControlAnchor.BOTTOM_RIGHT);
    viewer.addControl(makeControl('zoomout','zoomout'), Seadragon.ControlAnchor.BOTTOM_RIGHT);
    viewer.addControl(makeControl('zoomin','zoomin'), Seadragon.ControlAnchor.BOTTOM_RIGHT);
    displayZoomImg(index);
   
}

function makeControl(cText,cClass) {
    var control = document.createElement("a");
    var controlText = document.createTextNode(cText);
    
    control.href = cText;              
    control.className = cClass;
    control.appendChild(controlText);
    
    Seadragon.Utils.addEvent(control, "click", onControlClick);
    return control;


    function onControlClick(event) {
      	
      	//prevent default link dehaviour
        Seadragon.Utils.cancelEvent(event);
        
        
        if (!viewer.isOpen()) {
            return;
        } else if(cClass == "zoomin"){
        	viewer.viewport.zoomBy(2);
        } else if(cClass == "zoomout"){
        	viewer.viewport.zoomBy(0.5);
        } else if(cClass == "home"){
        	viewer.viewport.goHome();
        } else if(cClass == "fullscreen"){
        	viewer.viewport.goHome();
        }
        viewer.viewport.ensureVisible();
        
    }
}

// 
