//
// Set up an object to store and manipulate data
//
var winten = {};
//
// Configuration needs to be worked out still
// But can be configured either from the JS here,
// Or JS that is in the HTML itself.
//

// How long the photos wait until they fade
// Value is in  in milliseconds: 5000 = 5 Seconds
winten['fadeTime'] = 5000;

// List of photos and details of photos. Might be nice to be more elegant.
// jQuery makes it easy to grab this data from tag attributes,
// so that could work instead.
// For related : 0 means no relations. If related 1, 2, or 3 news box.
winten['photoList'] = [
                        {
                          src: 'images/main3.jpg',
                          related: 1,
                          action: 'Register Your Interest',
                          link: 'http://www.138walker.com.au/contact.html'
                        },
                        {
                          src: 'images/main1.jpg',
                          related: 2,
                          action: 'Visit Website',
                          link: 'http://www.55miller.com.au/'
                        },
                        {
                          src: 'images/main5.jpg',
                          related: 3,
                          action: 'Find Out More',
                          link: '/profile/profile.php'
                        },
                        {
                          src: 'images/main2.jpg',
                          related: 0,
                          action: '',
                          link: ''
                        },
						{
                          src: 'images/main4.jpg',
                          related: 0,
                          action: '',
                          link: '#'
                        }
                      ];

//
// The code below isn't really configurable
//

var wintenScripts = function() {
  return {
    init: function() {
      this.setUp();
      this.setUpTitleText();
      this.setUpNavigation();
      this.makeDropdown();
      $(window).resize(function() {
        wintenScripts.setUpTitleText();
      });
    },
    setUp: function() {
      winten['div'] = $('.slideshow');
      winten['current'] = 0;
      winten['related'] = [];
      winten['items'] = $('#news li h2');
      winten['total'] = winten.photoList.length - 1;
      $.each(winten.photoList, function(i, x) {
        x['order'] = i;
        x['related'] -= 1;
        x['news'] = winten.items[x.related];
        x['color'] = $(x.news).css('backgroundColor')
      });
      winten['image'] = new wintenImage();
    },
    setUpNavigation: function() {
      var kinds = $('#navigation ul li ul.switchcontent').parent()

      $(kinds).each(function(i, x) {
        $(x).click(function(e) {
          e.preventDefault();
          $(this).find('.switchcontent').toggle();
          wintenScripts.clearDropdown();
        });
      });
    },
    setUpTitleText: function() {
      var top = $('#news').position().top + 5;
      var nav = $('#navigation');
      var where = nav.position();
      var total = nav.width() + where.left + 50;
      var title =  $('#title');
      title.css({ width: total + 'px', left: 0, top: top + 'px' })
           .find('li p span').css({ paddingLeft: total - nav.width() + 'px' });
    },
    makeDropdown: function() {
      $('.quickmenu').click(function(e) {
        e.preventDefault();
        var where = $('.quickmenu').position();
        $(this).css({ opacity: 0 });
        $('.hidden').show()
          .css({ opacity: 1, top: where.top, left: where.left, zIndex: 999 })
          .find('img')
          .click(function(e2) {
            e2.preventDefault();
            wintenScripts.clearDropdown();
          });
      });
    },
    clearDropdown: function() {
      $('.hidden').css({ opacity: 0 }).hide();
      $('.quickmenu').css({ opacity: 1 });
    }
  };
}();


//
// This Object is an Interactive Slideshow
//
function wintenImage() {
  this.array = winten.photoList;
  this.initialise();
  return this;
};

wintenImage.prototype = new Object();

// Make it happen
wintenImage.prototype.initialise = function() {
  this.main = this.array[0];
  this.src = this.main.src;
  this.action = this.main.action;
  this.link = this.main.link;
  this.fadeTime = winten.fadeTime;

  this.startTimer();
  this.setUpImage();
  this.setUpNews();
};


wintenImage.prototype.setUpImage = function() {
  var _this = this;
  winten.div.find('img')
        .bind('mouseover', function() {
          _this.clearTimer();
          _this.setActive();
          _this.makeLink();
        }).bind('mouseout', function() {
          _this.startTimer();
          _this.clearActive();
        }).bind('mousedown', function() {
          _this.goURL();
  });
};

// Timing of Fades
wintenImage.prototype.startTimer = function() {
  var _this = this;
  winten.timer = setTimeout(function() { _this.doFade() }, _this.fadeTime);
};

wintenImage.prototype.clearTimer = function() {
  clearTimeout(winten.timer);
  winten.timer = null;
};

// Fader
wintenImage.prototype.doFade = function() {
  this.goTo()
  this.startTimer();
};

wintenImage.prototype.goTo = function(i) {
  var ii = (i > -1);

  if (ii) { winten.current = i };
  var _this = this;
  var speed = 'fast';
  var src = (ii) ? this.array[i].src : _this.doCycle();

  winten.div.find('img')
    .fadeOut(speed, function() {
      $(this).attr({ src: src }).fadeIn(speed);
    });
};

// Setup Interactive News Items
wintenImage.prototype.setUpNews = function() {
  var _this = this;
  $.each(this.array, function(i, x) {
    if (x.news) {
      $(x.news).bind('mouseover', function() {
        winten.current = i;
        $(this).addClass('active')
            .find('img')
            .css({ borderColor: $(this).css('background-color') });

        _this.clearTimer();
        _this.makeLink();
        _this.goTo(i);
        _this.setActive();
      }).bind('mouseout', function() {
        _this.startTimer();
        _this.clearActive();
      }).bind('mousedown', function() {
        _this.goURL();
      });
    };
  });
};

wintenImage.prototype.setActive = function(i) {
  if (i > -1) { winten.current = i };
  var active = this.array[winten.current];
  if (active.news) {
    var news = active.news;
    $(news).addClass('active')
           .find('img')
           .css({ borderColor: $(news).css('background-color') });
  };
};

wintenImage.prototype.clearActive = function() {
  $('.action').fadeOut('fast', function() { $(this).remove(); });
  $('.active').removeClass('active');
  $('#news').find('img').css({ borderColor: $('body').css('background-color') });
};


// Utilities
wintenImage.prototype.makeLink = function() {
  var obj = this.array[winten.current];
  // If there is a related object, show action link
  if (obj && obj.related > -1) {
    var _this = this;
    var text = obj.action;
    var link = $('<div></div>').addClass('action')
                .text(text)
                .wrapInner('<span />')
                .insertAfter(winten.div)
                .find('span')
                .css({ opacity: 0, background: obj.color })
                .animate({ opacity: 1 }, 500)
  };
};

wintenImage.prototype.doCycle = function() {
  winten.current = (winten.current < winten.total) ? winten.current + 1 : 0;
  var current = this.array[winten.current];
  return current.src;
};

wintenImage.prototype.goURL = function() {
  winten.div.find('img').animate({ opacity: 0.2 }, 300, function() {
    $(this).animate({ opacity: 1 }, 300)
  })

};




$(document).ready(function() {
  wintenScripts.init();
});