var cache = [];
var start_left = 0;
var start_top = 0;
var image_map = new Array();
var link_map = new Array();
//please note: these also need to be added lower down to the image preloader.
image_map['link_1'] = "/agency/images/carousel/01_xl.png";
image_map['link_2'] = "/agency/images/carousel/03_xl.png";
image_map['link_3'] = "/agency/images/carousel/02_xl.png";
image_map['link_4'] = "/agency/images/carousel/04_xl.png";
image_map['link_5'] = "/agency/images/carousel/05_xl.png";
image_map['link_6'] = "/agency/images/carousel/06_xl.png";
image_map['link_7'] = "/agency/images/carousel/07_xl.png";
image_map['link_8'] = "/agency/images/carousel/02_xl.png";
image_map['link_9'] = "/agency/images/carousel/09_xl.png";

link_map['link_1'] = "/agency/jackpotjoy/";
link_map['link_2'] = "/agency/thomas-cook/";
link_map['link_3'] = "/agency/iceland/";
link_map['link_4'] = "/agency/gumtree/";
link_map['link_5'] = "/agency/good-beta/";
link_map['link_6'] = "/agency/good-beta/";
link_map['link_7'] = "/agency/thomas-cook/";
link_map['link_8'] = "/agency/iceland/";
link_map['link_9'] = "/agency/thomas-cook/";

$(document).ready(function(){
    jQuery('#mycarousel').jcarousel({
        wrap:"circular",
        scroll:1,
        buttonNextHTML:"<div id='next_button'><img title='Left arrow' src='/agency/images/arrowLeft.gif'></div>",
        buttonPrevHTML:"<div id='prev_button'><img title='Right arrow' src='/agency/images/arrowRight.gif'></div>"
    });
    
    //this is the image preloaderfor the carousel rollovers
    jQuery.preLoadImages("/agency/images/loader.gif", "/agency/images/carousel/01_xl.png","/agency/images/carousel/02_xl.png","/agency/images/carousel/03_xl.png","/agency/images/carousel/04_xl.png","/agency/images/carousel/05_xl.png","/agency/images/carousel/06_xl.png","/agency/images/carousel/07_xl.png","/agency/images/carousel/09_xl.png");

    $("#carousel_large_image_image").live("click",function(){
        //alert("Hello, I'm the movie for image with id: " + $(this).attr("rel"));
        window.location = link_map[$(this).attr("rel")];
    })

    //add the expanding div now, and make it invisible.
    start_left = 480;
    start_top = 50;
   $("#image_carousel").append("<div id='carousel_large_image'><img src='/agency/images/loader.gif'></div>");
   $("#carousel_large_image").css({'top':start_top,'left':start_left});
   $("#carousel_large_image").css({'width':'1px','height':'1px'});

   $(".scrolling_links").mouseover(function(){
        $("#carousel_large_image").css({'width':'1px','height':'1px', 'display':'block'});
        //now we'll annimate our div.
        end_top = start_top - 100;
        end_left = start_left - 160;
        $("#carousel_large_image").html("<img id='carousel_large_image_image' src='" + image_map[$(this).attr('id')] + "' rel='"+ $(this).attr('id') +"'>");
        $("#carousel_large_image").animate({'width':'320','height':'180','top':end_top,'left':end_left},200);
    })

    $("#carousel_large_image").mouseout(function(){
        jQuery.remove_large_image();        
    })
    $(".no_large_image").mouseover(function(){
        jQuery.remove_large_image();
    })

    $("#ContainerNewsFlash").mouseover(function(){
        jQuery.remove_large_image();
    })
    $("#ContainerFooter").mouseover(function(){
        jQuery.remove_large_image();
    })



    //scrolling on hover
    $("#prev_button").mouseenter(function(){
        $('#prev_button').click();
        p_id = setInterval ( "$('#prev_button').click()", 1000 );
        $("#prev_button").mouseleave(function(){
            clearInterval(p_id);
        });
    })

    $("#next_button").mouseenter(function(){
        $('#next_button').click();
        n_id = setInterval ( "$('#next_button').click()", 1000 );
        $("#next_button").mouseleave(function(){
            clearInterval(n_id);
        });
    })
})

  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }

  $.remove_large_image = function(){
      if( $("#carousel_large_image").width() > 100)
      {
          $("#carousel_large_image").animate({'width':'0','height':'0','top':start_top,'left':start_left},200, function(){
               $("#carousel_large_image").css({'display':'none'});
         });
      }
  }