// number of images or movies for each section
var Animation = 7;
var Design = 12;
var Illustration = 12;
var Branding = 12;
var Web = 7;
var Packaging = 12;
var Bio = 4;
var Contact = 4;

// offset of large image mouseover
var offsets = { x:20, y:-200 };

var Juan = new Class({
  initialize: function() {
    // center container
    this.resize();
    window.addEvent('resize', this.resize);
    
    // preload images
    var elements = $$('.preload');
		var timer = function() {
			var loaded = true;
			
			elements.each(function(item) {
				if (!PreLoad.isLoaded(item)) loaded = false;
			}, this);
			
			if (loaded) {
				$('main').fadeIn(600, function() {
				  var s1 = new SWFObject("flash/mediaplayer.swf","mediaplayer","320","230","7");
          s1.addParam("allowfullscreen","true");
          s1.addVariable("width","320");
          s1.addVariable("height","230");
          s1.addVariable("file","/flash/home.flv");
          s1.addVariable("autostart","true");
          s1.addVariable("screencolor","0x000000");
          s1.write('movie');
				});
				$clear(timer);
			}
		}.periodical(1000, this);
	  
	  // image scroller
		var scroller = new Scroller('nav_top', { area: 120, velocity:0.1 });
		scroller.start();
		
		// nav
		var nav    = $$('.nav');
		var nav_on = $$('.nav_on');
		
		nav.addEvent('mouseover', function(e) {
		  if (e.target.getParent().id != 'nav_bot') return;
		  var el = nav_on[nav.indexOf(e.target) - nav_on.length];
    	el.setStyle('left', e.target.getPosition().x - $('container').getPosition().x);
    	el.fadeIn();
		}.bindWithEvent());
		
		nav_on.addEvent('mouseout', function(e) {
	    nav_on.fadeOut();
		}.bindWithEvent());
		
		$('bg').addEvent('mouseover', function(e) {
	    nav_on.fadeOut();
		}.bindWithEvent());
		
		nav.extend(nav_on).addEvent('click', function(e) {
		  this.hideAll('title');
		  this.hideAll('content');
		  $('content').show();
		  $$('.' + e.target.alt).fadeIn();
		}.bindWithEvent(this));
		
		$$('area').addEvent('click', function(e) {
		  this.hideAll('title');
		  this.hideAll('content');
		  $('content').show();
		  $$('.Home').fadeIn();
		  e.stop();
		}.bindWithEvent(this));
	  
	  // content	  
	  [ 'Design', 'Illustration', 'Branding', 'Packaging' ].each(function(item) {
	    var el = $$('#content .' + item)[0];
	    el.setHTML($('template_images').render({ count: eval(item), alt: item }, true));
	    
	    var images  = $ES('img', el);
	    var options = {
        offsets:   $merge({}, offsets),
        fixed:     false,
        showDelay: 0,
        hideDelay: 0,
        onShow: function(t) { t.fadeIn(100); },
        onHide: function(t) { if (t.fadeOut) t.fadeOut(100); }
      };
      (3).times(function(x) {
        if (x * 4 > images.length)
          return;
        options.offsets.y -= 50;
        new Tips (images.slice(x * 4, x * 4 + 4), options);
      });
	  });
	  
	  [ 'Web' ].each(function(item) {
	    var el = $$('#content .' + item)[0];
	    el.setHTML($('template_images').render({ count: eval(item), alt: item }, true));
	    
	    var images  = $ES('img', el);
	    
	    [0,2,3,4,6].each(function(index) {
	      var item = images[index];
	      item.setStyle('cursor', 'pointer');
	      item.addEvent('click', function() {
  	      window.open('http://' + [ 'sheafashion.com/catalog/SheaSite.php',
  	        '',
  	        'www.nonihawaii.com/catalog',
  	        'www.fyremarketing.com',
  	        'www.doggyinstyle.com/catalog',
  	        '',
  	        'zmei.net/catalog'
  	      ][index]);
  	    });
	    });
	    
	    var options = {
        offsets:   $merge({}, offsets),
        fixed:     false,
        showDelay: 0,
        hideDelay: 0,
        onShow: function(t) { t.fadeIn(100); t.setStyles({ background: '#fff', width: 160 }); },
        onHide: function(t) { if (t.fadeOut) t.fadeOut(100); }
      };
      options.offsets.y = -200;
      new Tips(images, options);
	  });
	  
	  [ 'Animation' ].each(function(item) {
	    el = $$('#content .' + item)[0];
	    el.setHTML($('template_movies').render({ count: eval(item), alt: item }, true));
	    
	    var movies = $$('.movie', el)[0].getChildren();
	    $ES('img', el.getFirst().getFirst()).each(function(img, index) {
	      img.setStyle('cursor', 'pointer');
	      img.addEvent('click', function() {
	        movies.hide();
	        var s1 = new SWFObject("flash/mediaplayer.swf","mediaplayer","320","230","7");
          s1.addParam("allowfullscreen","true");
          s1.addVariable("width","320");
          s1.addVariable("height","230");
          s1.addVariable("file","/flash/" + item.toLowerCase() + "/Video" + (index+1) + ".flv");
          s1.addVariable("autostart","true");
          s1.addVariable("screencolor","0x000000");
          s1.write(movies[index].id);
          movies[index].fadeIn();
	      });
	      if (index == 0)
	        img.fireEvent('click');
	    });
	    
	    el = $ES('.arrow_up, .arrow_down', el);
	    
	    var timer;
	    var wind = $$('.thumbs')[0];
	    
	    el[0].addEvent('mouseover', function() {
	      timer = function() {
	        var size = wind.getSize();
	        if (size.scroll.y > 0)
	          wind.scrollTo(size.scroll.x, size.scroll.y - 2);
	      }.periodical(1, this);
	    });
	    
	    el[0].addEvent('mouseout', function() {
	      $clear(timer);
	    });
	    
	    el[1].addEvent('mouseover', function() {
	      timer = function() {
	        var size = wind.getSize();
	        if (size.scroll.y < (size.scrollSize.y))
	          wind.scrollTo(size.scroll.x, size.scroll.y + 2);
	      }.periodical(1, this);
	    });
	    
	    el[1].addEvent('mouseout', function() {
	      $clear(timer);
	    });
	  });
	  
	  // home movie
	  //writeMovie("home_movie");
  },
  hideAll: function(id) {
    $(id).getChildren().each(function(item) {
      item.hide();
    });
  },
  resize: function() {
		$('container').setStyles({
			top: 	(window.getHeight() - 450) / 2 + 'px',
			left: (window.getWidth() - 850) / 2 + 'px'
		});
	},
	showRollover: function(id) {
	  $(id).fadeIn();
	},
	hideRollover: function(id) {
	  $(id).fadeOut();
	}
});

var numberToArray = function(num) {
  var arr = [];
  num.times(function(x) { arr.push(x+1); });
  return arr;
};

var Site;
window.addEvent('domready', function() { Site = new Juan(); });