slider = new Array();
big = new Array();
big["width"] = 295;
big["height"] = 193;
big["height2"] = big["height"] + 28;
small = new Array();
small["width"] = 115;
small["height"] = 193;
small["height2"] = small["height"] + 28;
font = new Array();
font["big"] = 16;
font["small"] = 12;
timer = -1;

function synch() {
    $('#slider ul li').each(function(i) {
        d = Math.abs(actual - i);
        var a = $(this);
        var img = a.children('img');
                
        switch (d) {
            case 0:
                img.animate({ width: big["width"], height: big["height"] });
                a.animate({ width: big["width"], height: big["height2"] });
                break;
            case 1:
                if (slider[i] == 1) {
                    slider[i] = 0;
                    a.css({ display: 'inline', width: '0px', height: '0px' });
                    img.css({ width: '0px', height: '0px' });                    
                }
                img.animate({ width: small["width"], height: small["height"] });
                a.animate({ width: small["width"], height: small["height2"] });
                break;
            default:
                if (slider[i] != 1) {
                    slider[i] = 1;
                    a.hide('fast');
                }
                break;
        }
    });
	
}
function actual_change(diff) {
	if (actual + diff > 0 && actual + diff < max) {
		actual = actual + diff;
		return true;
	}
	return false;
};

$(document).ready(function() {
    
    $('#slider ul').css('overflow', 'hidden');
    $('#slider ul').prepend('<li><img src="images/hide.png" alt="" /></li>');
    max = $('#slider ul li').size();
    
    i = 0;
    actual = (!isNaN(i) && i > 0 && i < max) ? i : 1;

    $('#slider ul li').each(function(i) {
        d = Math.abs(actual - i);
        var a = $(this);
        var img = a.children('img');

        switch (d) {
            case 0:
                img.css({ width: big["width"] + 'px', height: big["height"] + 'px' });
                a.css({ height: big["height2"] + 'px' });
                break;
            case 1:
                img.css({ width: small["width"] + 'px', height: small["height"] + 'px' });
                a.css({ width: small["width"] + 'px', height: small["height2"] + 'px' });
                break;
            default:
                a.css({ display: 'none', width: '0px', height: '0px' });
                break;
        }
    });
    $('#butleft').click(function() {
        if (actual_change(-1))
            synch();
        return false;
    });
    $('#butright').click(function() {
        if (actual_change(+1))
            synch();
        return false;
    });
});