Event.observe(window, 'load', function() {
	var scroll = $('scroll');
	var box = $('thumbHolder');
	var seeWidth = $('thumbnails').getWidth();
	
	var thumbs = $$('#thumbHolder .thumbLink');
	var contentWidth = 0;
	var scrollWidth = 0;
	
	for (i=0;i<thumbs.length;i++) {
		contentWidth += (thumbs[i].getWidth()+4);
	}
	scrollWidth = contentWidth;
	contentWidth -= (seeWidth+4);
	maxContent = contentWidth;
	deltaContent = seeWidth;
	
	if(contentWidth > 0) {

		$('scrollface').setStyle({width:(seeWidth/scrollWidth)*seeWidth+"px"});
		
        slider = new Control.Slider(scroll.down('.handle'), scroll, {
			range: $R(0, contentWidth),
			sliderValue: 0,
			onSlide: function(value) {
				$('thumbHolder').setStyle({marginLeft:-value+"px"});
			},
			onChange: function(value) {
				$('thumbHolder').setStyle({marginLeft:-value+"px"});
		}
		});
	} else {
	   $$('#scroll div')[0].remove();
	}
});

var clickability = true;
var slider = false;
var deltaContent = 0;
var maxContent = 0;
var offsetStart = 225;
var skipBy = 3;

function contentGetWidth(_t) {
    var thumbs = $$('#thumbHolder .thumbLink');
	var contentWidth = 0;
	var limit = 0;
	if(_t+skipBy < thumbs.length) limit = _t+skipBy;
	else limit = thumbs.length;
	for (i=0;i<limit;i++) {
		contentWidth += (thumbs[i].getWidth()+4);
	}
	return contentWidth;
}

// slider easig function
function moveSlider(value){ 
	var moveTarget = value;
	var moveCurrent = slider.value;
	
	
	// floor + ceiling for target value
	if(moveTarget > maxContent){
		moveTarget = maxContent;
	} else if(moveTarget <= 0){
		moveTarget = 0;
	}
	
	var targetDist = Math.abs(moveCurrent - moveTarget);
	moveCurrent += (moveTarget - moveCurrent) * 0.5;
	slider.setValue(moveCurrent);
	
	// recursive function
	function doWork(){
		moveSlider(moveTarget);
	}
	
	// set loop
	timer = setTimeout(doWork,30);
	
	// break loop
	if(targetDist < 0.5) {
	  clearTimeout(timer);
	  // return false;
	 }
	
	
}

function fetchWork(thisImg, whereTo, id){
	// alert(thisImg + " /// " + whereTo + " /// " + id);
	if(clickability) {
        var currImg = $$("a.currImg")[0];
        
        currImg.removeClassName('currImg');
        thisImg.addClassName('currImg');
        
        if(slider!=false) {
            var el_num = thisImg.previousSiblings().length+1;
            var moveBy = contentGetWidth(el_num)-deltaContent-4;
			moveSlider(moveBy);
        }
        
        params_img = "id="+id+"&type=image";
        container = $('workImage');
        
        clickability = false;
        new Effect.toggle(container, 'appear', { duration: 0.1, 
            afterFinish: function(){
                new Ajax.Updater(container, whereTo,{
                method: 'post', 
                parameters: params_img,
                onComplete:function(){
                    new Effect.toggle(container, 'appear', { duration: 0.2, afterFinish: function() { 
                        clickability = true;
                    } });
                    }
                });
            } });
            
        params_spec = "id="+id+"&type=spec";
        specdiv = $('workInfo');
    
        new Effect.toggle(specdiv, 'appear', { duration: 0.1, 
            afterFinish: function(){
                new Ajax.Updater(specdiv, whereTo,{
                method: 'post', 
                parameters: params_spec,
                onComplete:function(){
                    new Effect.toggle(specdiv, 'appear', { duration: 0.1 });
                    }
                });
            } });
    }
}

function prevWork() {
	if(clickability){
		var currImg = $$("a.currImg")[0];
		var prevImg = $$("a.currImg")[0].previous();
		if(prevImg != null) {
			var address = prevImg.readAttribute('href').split('?');
			if(address.length == 2) {
				fetchWork(prevImg,address[0],address[1]);
			}
		}
	}
	return false;
}

function nextWork() {
	if(clickability){
		var currImg = $$("a.currImg")[0];
		var nextImg = $$("a.currImg")[0].next();
		if(nextImg != null) {
			var address = nextImg.readAttribute('href').split('?');
			if(address.length == 2) {
				fetchWork(nextImg,address[0],address[1]);
			}
		}
	}
	return false;
}