// Panels!
// (c)opyright 2009 TripTrip.co.uk

var imageBase='http://images.triptrip.co.uk/panels/';
var lIndex=pIndex=0;

var imagesLandscape=new Array(
  '400x200_A_great_day_skiing_by_hortongrou.jpg',
  '400x200_Airplane_red_sunset_by_Zela.jpg',
  '400x200_Beautiful_town_at_sea_by_iprole.jpg',
  '400x200_Bok_Sanctuary_Path_by_winterdove.jpg',
  '400x200_Cave_Egress_by_treyvoni.jpg',
  '400x200_Desert_road_by_killick1.jpg',
  '400x200_Diving_in_Egypt_near_Dahab_in_the_red_sea_by_phutureuk.jpg',
  '400x200_Dubai_Sunset_windance.jpg',
  '400x200_Heart_shaped_stones_by_plrang.jpg',
  '400x200_Lencois_maranhenses_2_by_proof.jpg',
  '400x200_Pastel_Beach-Huts-1_by_woodsy.jpg',
  '400x200_Road_2_by_MaryMarchi.jpg',
  '400x200_Venice_in_Summer_by_ellejustic.jpg',
  '400x200_Winter_in_Holland_1_by_Winschoten.jpg',
  '400x200_by_night_by_barunpatro.jpg',
  '400x200_leaving_the_cave_by_shirleybnz.jpg',
  '400x200_red_sea_by_phunphoto.jpg',
  '400x200_sawanna_2_by_mcleod.jpg',
  '400x200_sunset_on_Galapagos_islands_by_eschu1952.jpg',
  '400x200_winter_road_3_by_night_fate.jpg'
);
var imagesPortrait=new Array(
  '200x400_A_great_day_skiing_by_hortongrou.jpg',
  '200x400_Bok_Sanctuary_Path_by_winterdove.jpg',
  '200x400_Cachoeira_by_XICOXAVES.jpg',
  '200x400_camel_by_ryas.jpg',
  '200x400_Cave_Egress_by_treyvoni.jpg',
  '200x400_Desert_road_by_killick1.jpg',
  '200x400_Dubai_Beach_windance.jpg',
  '200x400_Taj_Mahal_late_afternoon_lights_by_zatrokz.jpg',
  '200x400_Underwater_exploration_by_vp.jpg',
  '200x400_Walls_in_colours_by_kitsos13.jpg',
  '200x400_pinacle_rock_by_eschu1952.jpg',
  '200x400_sawanna_2_by_mcleod.jpg',
  '200x400_Sunset_by_claudmey.jpg',
  '200x400_winter_road_3_by_night_fate.jpg'
);

window.addEvent('load', function() {
  // Shuffle the image arrays
  imagesLandscape=shuffle(imagesLandscape);
  imagesPortrait=shuffle(imagesPortrait);
  // Perform the first image swap
  for (var i=1; i <= 3; i++) swapImage('panel' + i);
});

function swapImage(panel) {
  // Reset the index if we've reached the end of the set
  if (lIndex > imagesLandscape.length) lIndex=0;
  if (pIndex > imagesPortrait.length) pIndex=0;
  // Grab a new image based on whether the div is portrait or landscape
  var imgName=($(panel).getSize().x > $(panel).getSize().y) ? imagesLandscape[lIndex++] : imagesPortrait[pIndex++];
  // Preload the image, creating an <img> tag if one doesn't already exist)
  var img=$(panel).getElement('img');
  if (!img) var img=new Element('img');
  img.set('src', imageBase + imgName);
  img.addEvent('load', function() { fadeOut(panel) });
  img.inject($(panel));
  // Set up a new swap event
  setTimeout("swapImage('" + panel + "')", parseInt(Math.random() * 5000) + 10000);
}

function fadeOut(panel) {
  var effect=new Fx.Morph($(panel), {duration: 1500});
  effect.addEvent('complete', function() { fadeIn(panel) });
  effect.start({'opacity': 0});
}
function fadeIn(panel) {
  // Find out which image has been preloaded and set it as the new background
  var img=$(panel).getElement('img');
  $(panel).setStyle('background', 'url(' + img.get('src') + ')');
  // Fade in the new image!
  $(panel).fade('in');
}

// http://jsfromhell.com/array/shuffle [rev. #1]
function shuffle(v) {
  for (var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
  return v;
}