var picture_width = new Array();
var from_left = 90;
var padding = 5;
var img_arr = '';
left = 0;

initialize = function(jump) {
	img_arr = $('images').getElementsByTagName('li');

    $('prev_pic').onclick = function() {
    	slideTo('prev'); return false;
    }

    $('prev_pic').onmouseover = function() {
    	document.getElementById('left').src = 'bilder/work-left.png'; return true;
    }

    $('prev_pic').onmouseout = function() {
    	document.getElementById('left').src = 'bilder/blank.gif'; return true;
    }

    $('next_pic').onclick = function() {
    	slideTo('next'); return false;
    }

    $('next_pic').onmouseover = function() {
    	document.getElementById('right').src = 'bilder/work-right.png'; return true;
    }

    $('next_pic').onmouseout = function() {
    	document.getElementById('right').src = 'bilder/blank.gif'; return true;
    }

	left = from_left;

    for(i=0; i < img_arr.length; i++) {
    	if(i == 0) {
    		left = left;
    	} else {
    		left = left + parseInt(picture_width[(i-1)]) + padding;
    	}

    	img_arr[i].style.left = left + 'px';
    }

    if(jump != '') {
    	slideTo('thumb' + (jump-1));
    } else {
    	slideTo('thumb0');
    }
}


current = 0;
active = false;

slideTo = function(id) {
    if(!active) {
        active = true;

        if(id == 'prev' || id == 'next') {
            if(id == 'prev') {
            	id = current - 1;
            }
            if(id == 'next') {
            	id = current + 1;
            }
        } else {
			id = parseInt(id.replace(/thumb/, ''));
		}


        document.getElementById('prev_pic').style.visibility = "visible";
        document.getElementById('next_pic').style.visibility = "visible";

        if(id <= 0) {
            id = 0;

            document.getElementById('prev_pic').style.visibility = "hidden";
        }

        if(id >= (img_arr.length-1)) {
            document.getElementById('next_pic').style.visibility = "hidden";
            id = (img_arr.length - 1);
        }

        document.getElementById('next_pic').style.left = (parseInt(picture_width[id]) + from_left + padding) + 'px';

        if(id == 0) {
        	new_width = 0;
        } else {
        	new_width = parseInt(img_arr[(id-1)].style.left) + parseInt(picture_width[(id-1)]) - from_left + padding;
        }

        if(id > 0) {
        	img_arr[(id-1)].className = '';
        }

        img_arr[id].className = 'active';

        if(id < img_arr.length && typeof(img_arr[(id+1)]) != "undefined") {
        	img_arr[(id+1)].className = '';
        	document.getElementById('next_pic').style.width = parseInt(picture_width[id+1]) + 'px';
        }

        $('images').morph('left:-' + new_width + 'px', {
            duration:0.7,
            afterFinish:function() {
                active = false;
            }
        });

        current = id;
    }
}