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);
	deltaContent = seeWidth;
	
	if(contentWidth > 0) {
	
		$('scrollface').setStyle({width:(550/scrollWidth)*550+"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 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;
}

function fetchWork(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;
            slider.setValue(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(transport){
                    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(transport){
                	var response = transport.responseText;
                	if(response.length != 0) {
                    	$('work_wrap').appear({ duration: 0.1 });
                    } else {
                    	$('work_wrap').fade({ duration: 0.1 });
                    }
                    new Effect.toggle(specdiv, 'appear', { duration: 0.1 });
                }
                });
            } });
    }    
    return false;
}

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;
}