$("document").ready(
	function(){
            $("#promotions-info .promo1").css("background","url('/assets/uploads/arrow-currentpromo.gif') no-repeat right");
            $("#promotions-info div").mouseover(function(){ //when you mouseover the promotions-info div..
                var currentBanner=$(this).attr("class"); //get the class attribute of this div (e.g. "promo1") and put it into currentBanner variable
                $("#promotions-banner div").addClass("promo-hidden").removeClass("promo-current"); //apply hidden class to all divs first..
                
                $("#promotions-info div").css("background","url('/assets/uploads/arrow-promo.gif') no-repeat right"); //show grey arrow to all divs
                $(this).css("background","url('/assets/uploads/arrow-currentpromo.gif') no-repeat right"); //show blue arrow on selected div
                
                $("#promotions-banner div[id='"+currentBanner+"']").addClass("promo-current").removeClass("promo-hidden"); // then apply current class to the one you rollover (one that has an id same as the class of the one you rolled over)
                $("#promotions-info div").find("h3").removeClass("promoinfo-selected").addClass("promoinfo"); //remove the selected class from all paragraphs inside this div
                $(this).find("h3").addClass("promoinfo-selected").removeClass("promoinfo"); //add selected class to the paragraph inside the currently hovered div

            })
    });