function initCarousel_html_carousel_hred(cnt) {
    carouselhred = new Carousel('html-carousel-hred', {
        numVisible:3,
        scrollInc:3,
        animHandler:animHandlerHred,
        animParameters:{duration:0.5},
        buttonStateHandler:buttonStateHandlerHred,
        nextElementID:'next-arrow-hred',
        prevElementID:'prev-arrow-hred',
        listClassId:'carousel-list-hred',
        size:cnt})
    };

function initCarousel_html_carousel_hcom(cnt) {
    carouselhcom = new Carousel('html-carousel-hcom', {
        numVisible:4,
        scrollInc:3,
        animHandler:animHandlerHcom,
        animParameters:{duration:0.5},
        buttonStateHandler:buttonStateHandlerHcom,
        nextElementID:'next-arrow-hcom',
        prevElementID:'prev-arrow-hcom',
        listClassId:'carousel-list-hcom',
        size:cnt})
    };

function initCarousel_html_carousel(cnt) {
    carousel = new Carousel('html-carousel', {
        numVisible:7,
        scrollInc:5,
        animHandler:animHandler,
        animParameters:{duration:0.5},
        buttonStateHandler:buttonStateHandler,
        nextElementID:'next-arrow',
        prevElementID:'prev-arrow',
        listClassId:'carousel-list',
        size:cnt})
    };

function buttonStateHandler(button, enabled) {
 if (button == "prev-arrow")
   $('prev-arrow').src = enabled ? "/images/btn_slider_left_on.gif" : "/images/btn_slider_left_off.gif"
 else
   $('next-arrow').src = enabled ? "/images/btn_slider_right_on.gif" : "/images/btn_slider_right_off.gif"
}

function animHandler(carouselID, status, direction) {
  var region = $(carouselID).down(".carousel-clip-region");
  if (status == "before") {
    new Effect.Fade(region, {to: 0.3, queue: { position:'end', scope: "carousel" }, duration: 0.2});
  }
  if (status == "after") {
    new Effect.Fade(region, {to: 1, queue: { position:'end', scope: "carousel" }, duration: 0.2});
  }
}



function buttonStateHandlerHred(button, enabled) {
 if (button == "prev-arrow-hred")
   $('prev-arrow-hred').src = enabled ? "/images/btn_slider_white_left_on.gif" : "/images/btn_slider_white_left_off.gif"
 else
   $('next-arrow-hred').src = enabled ? "/images/btn_slider_white_right_on.gif" : "/images/btn_slider_white_right_off.gif"
}

function animHandlerHred(carouselID, status, direction) {
  var region = $(carouselID).down(".carousel-clip-region-hred");
  if (status == "before") {
    new Effect.Fade(region, {to: 0.3, queue: { position:'end', scope: "carouselhred" }, duration: 0.2});
  }
  if (status == "after") {
    new Effect.Fade(region, {to: 1, queue: { position:'end', scope: "carouselhred" }, duration: 0.2});
  }
}

function buttonStateHandlerHcom(button, enabled) {
 if (button == "prev-arrow-hcom")
   $('prev-arrow-hcom').src = enabled ? "/images/btn_slider_left_on.gif" : "/images/btn_slider_left_off.gif"
 else
   $('next-arrow-hcom').src = enabled ? "/images/btn_slider_right_on.gif" : "/images/btn_slider_right_off.gif"
}

function animHandlerHcom(carouselID, status, direction) {
  var region = $(carouselID).down(".carousel-clip-region-hcom");
  if (status == "before") {
    new Effect.Fade(region, {to: 0.3, queue: { position:'end', scope: "carouselhcom" }, duration: 0.2});
  }
  if (status == "after") {
    new Effect.Fade(region, {to: 1, queue: { position:'end', scope: "carouselhcom" }, duration: 0.2});
  }
}