Непонятная работа скрипта
 

Доброго времени суток всем форумчанам. Нужен Ваш совет. Я никак не могу разобраться где поселился баг. Сам только начинаю изучать jquery и вообще js. В общем проблема в следующем. Есть сайт в разработке: http://7.osp.z8.ru/. Там на главной странице слайдер, который работает нормально, но нужно было организовать смену фона синхронно со слайдером. Решил не мудрствовать лукаво, и при инициализации написал примерно следующее:

$(function(){
				$("div.slider").carousel({
                    loop: true,
                    autoSlide: true,
                    autoSlideInterval: 5000,
                    callback: function(){
                        var left = $('div.slider ul').css('left');
                        var str = left.substring(1);
                        var div = $('.cristall');
						
                            if(div.hasClass('bg_body1')){
                                div.removeClass('bg_body1');
                            }else if(div.hasClass('bg_body2')){
                                div.removeClass('bg_body2');
                            }else if(div.hasClass('bg_body3')){
                                div.removeClass('bg_body3');
                            }else if(div.hasClass('bg_body4')){
                                div.removeClass('bg_body4');
                            }
							
							if(str == 'px'){
								var cls = 'bg_body1';
							}else if(str == '1000px'){
								var cls = 'bg_body2';
							}else if(str == '2000px'){
								var cls = 'bg_body3';
							}else if(str == '3000px'){
								var cls = 'bg_body4';
							}
                            div.addClass(cls);
                            
                    }
                });
			});

Понимаю что реализация убогая, но я нуб в js, потому и прошу совета. В общем как все это работает, устраивает до тех пор, пока не начинаешь клацать по кнопкам. Ели кликнуть по кнопке, которая листает слайдер в обратном направлении, то слайдер двигается назад, а вот класс диву присваивается такой, как будто он двигается вперед. Причем, так происходит только при первом клике по кнопке. В результате получается несоответствие картинок в слайдере и бекграунде.

Обьясните дураку, как надо сделать или в чем причина такого поведения, буду очень признателен.

Фона чего и зачем ? что картинки прозрачные ? - ну не читаю я мыслей пока (не волшебник) - ток учусь
Возможно пояснения и дадут понять как лучше

Изъял эту часть

if(div.hasClass('bg_body1')){
                                div.removeClass('bg_body1');
                            }else if(div.hasClass('bg_body2')){
                                div.removeClass('bg_body2');
                            }else if(div.hasClass('bg_body3')){
                                div.removeClass('bg_body3');
                            }else if(div.hasClass('bg_body4')){
                                div.removeClass('bg_body4');
                            }
							
							if(str == 'px'){
								var cls = 'bg_body1';
							}else if(str == '1000px'){
								var cls = 'bg_body2';
							}else if(str == '2000px'){
								var cls = 'bg_body3';
							}else if(str == '3000px'){
								var cls = 'bg_body4';
							}
                            div.addClass(cls);

Перемен при автодвижении - не заметил

там меняется фон сайта самого, полупрозрачная картинка под самим слайдером. Четыре картинки в самом слайдере и четыре разных бекграунда на заднем фоне. Неужели настолько незаметно? Зачем? Это вопрос к заказчику, не ко мне...