$(function() {
  $('#container.home').resize_intro();
	$('#container.project').resize_controls();
  $(window).resize(function() { 
    $('#container.home').resize_intro();
		$('#container.project').resize_controls();
  })
  $('#container.home #intro').init_images();
	$('#container.project #controls').add_controls();
  $('#container.home #intro-quotes').init_quotes();
})

$('#container.home').entwine({
  Intro_Width: 0,
  resize_intro: function() {
    
      container_width = $(this).outerWidth();
      leftcol_width = 340;
      $(this).setIntro_Width(container_width-leftcol_width);
      $('#container.home #intro').width($(this).getIntro_Width());
      $(this).adjust_image_margins();
      
   
    
  },
  // If the #intro container is smaller than 1200x800
  // negative margins are applied to the visible image
  // to keep it centered
  adjust_image_margins: function() {

    
      // margins on home
      var $iw = $(this).getIntro_Width();
      var $ih = $(window).height();
      var $img = $('#container.home #intro img');
      var difference;
      var percent;
      
      if ($iw < 1200 && $ih < 800) {
        difference = 1200-$iw;
        $img.css('margin-left', -(difference/2));
        difference = 800-$ih;
        //$img.css('margin-top', -(difference/2));
      }
      else if($iw > 1200 && $ih < 800){
        $img.width($iw);
        percent = $iw/1200;
        
        $img.height(800*percent);
        difference = ((800*percent)-$ih);
        //$img.css('margin-top', -(difference/2))
      }
      else if($iw < 1200 && $ih > 800)
      {
        $img.height($ih);
        percent = $ih/800;

        $img.width(1200*percent);
        difference = ((1200*percent)-$iw);
        $img.css('margin-left', -(difference/2));
      }
      else
      {
        if($iw/$ih > 1200/800)
        {
          // wider 
          $img.width($iw);
          percent = $iw/1200;
          
          $img.height(800*percent);
          difference = ((800*percent)-$ih);
          //$img.css('margin-top', -(difference/2))
        }
        else
        {
          // taller
          $img.height($ih);
          percent = $ih/800;

          $img.width(1200*percent);
          difference = ((1200*percent)-$iw);
          $img.css('margin-left', -(difference/2));
         }

    }

  }
});

$('#container.project').entwine({
	resize_controls: function(){
		var intro = $(this).find("#intro");
    var $c = $(this).find("#controls");
		$c.css("width" , intro.outerWidth());
		$c.css("height" , intro.outerHeight());
    $c.position_controls();
	}
});

$('#container.project #controls').entwine({
	
	add_controls: function(){
	//	console.log($(this));
		var intro = $('#container.project #intro');
		var controls = $(this);
		$(this).find('#hit_prev').click(function(){
		intro.load_next(-1);
		});
		
		$(this).find('#hit_next').click(function(){
			intro.load_next(1);
		});
		$(this).find('#hit_prev').mouseenter(function(){
			intro.stop_timer();
		  controls.show_controls($(this));
		});
		$(this).find('#hit_prev').mouseleave(function(){
			intro.start_timer();
			controls.hide_controls($(this));
		});
		$(this).find('#hit_next').mouseenter(function(){
			intro.stop_timer();
			controls.show_controls($(this));
		});
		$(this).find('#hit_next').mouseleave(function(){
			intro.start_timer();
			controls.hide_controls($(this));
		});
	},

  position_controls: function()
  {
    $wh = $(window).height();
    if($wh > 800){
      $(this).find('#hit_prev').height(800);
      $(this).find('#hit_next').height(800);
    }
    else
    {
      $(this).find('#hit_prev').height($wh);
      $(this).find('#hit_next').height($wh);
    }
  },
	
	show_controls: function(item){
		item.find(".btn").fadeIn('fast');
	},
	
	hide_controls: function(item){
		item.find(".btn").fadeOut('fast');
	}

});

$('#container.home #intro').entwine({
  Images: [],
  Current_Index: 0,
  init_images: function() {
    images = $('#intro-images').text();
    images = eval("("+images+")");
    $(this).setImages(images);
    $(this).start_slides();
  },
  start_slides: function() {
    images = $(this).getImages();
    if (extension(images[0]) == 'flv') {
      $('#container.home #intro #video').addClass('current');
      $(this).load_video(images[0]);
    }
		
		$(this).start_timer();
  },
  start_timer: function(){
		timer = setInterval(function() {
      $('#container.home #intro').load_next();
    }, 5000);
	},
	stop_timer: function(){
		clearInterval(timer);
	},
  load_next: function(dir) {
    i = $(this).getCurrent_Index();
    images = $(this).getImages();
    if(dir == 1 || dir == null)
		{
    	if (i == images.length) {
	      i = 0;
	    } else {
	      i++;
	    }
		}
		else
		{
			if(i == 0){
				i = images.length-1;
			}else{
				i--;
			}
		}
		
    $(this).setCurrent_Index(i);
    ext = extension(images[i]);
    var current = $('#container.home #intro .current');
    if (ext == 'jpg') {
      var next = $('<img />', {
        'src': images[i],
        'class': 'hidden'
      });
        
      $this = $(this);
      next.load(function(){
        $('#container.home').resize_intro();
      });
      
			// POSITION IN THE RIGHT PLACE...
			
	    // if ($(window).height() < 800) {
	    //   difference = 800-$(window).height();
	    //   next.css('margin-top', -(difference/2));
	    // }

      // append the image
      next.appendTo('#container.home #intro');
      next.css("display","none");
			// once loaded fade out and in
			next.load(function(){
				current.fadeOut(300, function() {
			    // if current is a video
			    if (current.attr('id') == 'video') {
			      // remove the current class
			      current.removeClass('current');
			    // otherwise if current is an image
			    } else {
			      // remove the image
			      current.remove();
			    }
			    // fade in the image
			    next.fadeIn(300, function() {
			      // add the current class
			      next.addClass('current');
			    });
			  });
			});
    } else {
      // transition from image to video
      if (current.is('img')) {
        // fade in the video container first
        $('#container.home #intro #video').fadeIn(100, function() {
          // load the video
          $('#container.home #intro').load_video('/'+images[i]);
          // fade out and remove from the image
          current.fadeOut(300, function() {
            $(this).remove();
          });
        });
      // transition from video to video
      } else {
        // load the video
        $(this).load_video('/'+images[i]);
      }
      // make sure the video container has the current class
      $('#container.home #intro #video').addClass('current');
    }
    $('#container.home #intro-quotes').trigger('next_quote');
  },
  load_video: function(file) {
    if ($f('video')) {
      $f('video').setClip(file).play();
    } else {
      $f('video', '/wp-content/themes/insideout-v2/flowplayer-3.2.1.swf', {
        buffering: false,
        clip: {
          url: file,
          autoPlay: true,
          autoBuffering: true,
          bufferLength: 0,
          controls: null,
          fadeInSpeed: 300,
          onBeforeFinish: function() {
            this.play(0);
            return false;
          },
          onBegin: function() {
            this.getPlugin("play").css({opacity: 0});
          }
        },
        plugins: {
          controls: null
        },
        canvas: {
          background: '#000',
          backgroundGradient: 'none'
        }
      });
    }
  }
});

$('#container.home #intro-quotes').entwine({
  Quotes: [],
  Current_Index: 0,
  Width: 0,
  init_quotes: function() {
    quotes = $(this).text();
    quotes = eval("("+quotes+")");
    $(this).setQuotes(quotes);
    $(this).setWidth($('#container.home .intro-quote.current').width());
  },
  onnext_quote: function() {
    i = $(this).getCurrent_Index();
    quotes = $(this).getQuotes();
    if (i == quotes.length) {
      i = 0;
    } else {
      i++;
    }
    $(this).setCurrent_Index(i);
    quote = quotes[i];
    next = $('<div />', {
      'class': 'box intro-quote hidden',
      'html': '<p>'+quote[0]+'</p><span>'+quote[1]+'</span>',
      'style': 'width:'+$(this).getWidth()+'px;'
    }).insertAfter('#container.home .intro-quote.current');
    current = $('#container.home .intro-quote.current');
    current.animate({left: '-330px'}, 500, function() {
      current.remove();
    });
    next.animate({left: '0'}, 500, function() {
      next.removeClass('hidden').addClass('current');
    })    
  }
});