var trace = window.console ? console.log : function() {};

jQuery.fn.extend({
  cinematic: function(imageArray, settings) 
  {
    _owner = this;

    if (!settings) {
      settings = {
	delay: 7,
	transition: 'medium'
      };
    }

    my = {
      owner: _owner,
      conf: settings,
      div1: null,
      div2: null,
      img:  imageArray,
      index: 1,
      toggles: 0,
      next: function(callback)
      {
	if (this.index >= this.img.length)
	  this.index = 0;
	this.toggles++;

	return $('<img src="' + this.img[this.index++] + '"/>').load(function() {
	  if (callback) callback();
	});
      }
    };

    this.css({ height: this.height(), width: this.width() });

    init();
    var iv = setTimeout(function() {
      run();
    }, my.conf.delay*1000);

    function init() {
      var img1 = my.owner.find('img');
      trace(img1);
      var p = { width: my.owner.width(), height: my.owner.height(),
                opacity: 1, position: 'absolute' };
      my.div1 = $('<div id="div-1"/>').css(p).css('z-index', '1001');
      my.div2 = $('<div id="div-2"/>').css(p).css('z-index', '1000');

      my.owner.empty().append(my.div1.append(img1)).append(my.div2);
    }

    function run()
    {
      var idiv, odiv;

      if (my.toggles % 2 == 0) {
	odiv = my.div1;
	idiv = my.div2;
      }
      else {
	odiv = my.div2;
	idiv = my.div1;
      }

      idiv.append(my.next(function() {
	idiv.fadeIn(my.conf.transition);
	odiv.fadeOut(my.conf.transition, function() { 
	  $(this).empty();
	  setTimeout(function() {
	    run();
	  }, my.conf.delay*1000);
	});
      }));
    }
  }
});

function scrollWin(to, speed)
{
  $('html, body').animate({
    scrollTop: $(to).offset().top
  }, 1000||speed, null, function() { document.location.href = to; });
}

var Collage = function(div)
{
  this.div      = $(div);
  this.id       = this.div.attr('id');
  this.num      = this.id.substring(this.id.indexOf('-')+1);
  this.targetId = '#chp-' + this.num;
  this.target   = $(this.targetId);
  this.isActive = false;

  var my = this;

  this.div.mouseover(function() {
    $(this).css('cursor', 'pointer');
    if (!my.isActive && CollageGroup.invoked)
      my.div.css('opacity', 0.8);
  });

  this.div.mouseout(function() {
    if (!my.isActive && CollageGroup.invoked)
      my.div.css('opacity', 0.5);
  });

  this.div.click(function() {
    CollageGroup.Show(my);
    scrollWin(my.targetId);
    return false;
  });
};

Collage.prototype =
{
  Reset: function()
  {
    this.target.css('display','none');
    this.div.addClass('active-collage');
    this.isActive = false;
  },

  Activate: function()
  {
    this.target.css('display','block');
    this.target.find('caption').find('a').each(function(i, a) {
      $(a).click(function() {
	scrollWin($(this).attr('href'));
	return false;
      });
    });
    this.div.removeClass('active-collage');
    this.Undim();
    this.isActive = true;
  },

  Undim: function()
  {
    this.div.css('opacity', 1);
  },

  Dim: function()
  {
    this.div.css('opacity', 0.5);
  }
}

var CollageGroup = 
{
  elements: [],
  current: null,
  invoked: false,

  Add: function(collage)
  {
    this.elements.push(collage);
  },

  Show: function(caller)
  {
    this.invoked = true;

    if (this.current && this.current.id == caller.id)
      return;

    if (this.current)
      this.current.Reset();

    this.current = caller;
    this.current.Activate();
    this.dim();
  },

  dim: function()
  {
    for (var i = 0; i < this.elements.length; i++) {
      if (this.elements[i].id != this.current.id)
	this.elements[i].Dim();
    }
  }
}

var img = null;
var Usitall =
{
  OnLoad: function()
  {
    $('div.story-box').each(function(i, div) {
      var a = $(div).find('a.lnk');
      $(div).click(function() {
	document.location.href = a.attr('href');
      }).mouseover(function() {
	$(this).addClass('story-box-over');
	$(this).css('cursor','pointer');
      }).mouseout(function() {
	$(this).removeClass('story-box-over');
      });
    });

    img && $('#splash').cinematic(img, { delay: 8, transition: 2500 });
    
    $('div.collage').each(function(i, div) {
      CollageGroup.Add(new Collage(div));
    });

    $('div.collage-target').each(function(i, div) {
      $(div).css('display','none');
    });
  }
};

$(function() { Usitall.OnLoad(); });