//Document Ready
$(document).ready(function(){
    Slider.element = $('.slider-overflow').children();
    Slider.container = $('.slider-overflow');
    Slider.counter = 1;
    Slider.posArray = [];
    Slider.timer;
    Slider.controlArray = [];
    
    Slider.initialize();
    
    $(".vimeo").click(function(e) {
        
        e.preventDefault();
        var url = $(this).attr('href').split('http://vimeo.com/');
        
        $.fancybox({
            'padding': 0,
            'autoScale': false,
            'autoPlay' : true,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'title': this.title,
            'width': 700,
            'height': 394,
            'href': 'http://www.vimeo.com/moogaloop.swf?clip_id='+url[1]+'&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1&autoplay=1&loop=0',
            'type': 'swf',
            'swf': {'wmode': 'transparent', 'allowfullscreen' : 'true'}
        });
        return false;
    });
    
    ProjectInfo.buttons = $('.proj-cont').children().find('button');
    
    $( ProjectInfo.buttons).click(function(e){
        e.preventDefault();
        ProjectInfo.findInfo($(this));
        
    });
    
    ImageSwap.inputs = $('.radio');
    ImageSwap.buttons = $('.control').find('button');
    ImageSwap.imgSwitch = $('.image-switch');
    ImageSwap.imgLength = $('.image-switch').width();

    $(ImageSwap.buttons).click(function(){
       var button = $(this);
       var index = button.attr('data-image') - 1;
       var slider = button.parent().siblings();

       $(this).addClass('button-hover');
       $(this).siblings('button').removeClass('button-hover');

       var input = button.siblings().children().find('.radio');
       $(input[0]).attr('checked', 'checked');

       var pos = index * ImageSwap.imgLength;

       var images = $(slider).children().find('li');
       $.each(images, function(){
           if($(this).attr('data-target') == button.attr('data-image')){
               $(this).attr('data-change', 'true');
               $(this).siblings('li').attr('data-change', 'false');
               ImageSwap.defaultImg = $(this).siblings().children();
           }
       });

       $(slider).stop(true, true).animate({scrollLeft: pos}, 500, function(){
           $(ImageSwap.defaultImg[0]).animate({opacity: 0}, 30);
           $(ImageSwap.defaultImg[1]).animate({opacity: 1}, 30);
       });
    });

    ImageSwap.changer(ImageSwap.inputs);

    $('#photo-slide').children('button').click(function(){
         ImageSlide.click(this, '#photo-contain');
    });

    $('#photo-slide').children('button').first().addClass('button-on');

    $('.control').each(function(){
         $(this).children('button').first().addClass('button-hover');
    });
    
    
    $('#my-process-contain').stop(true, true).delay(500).animate({'left': 0}, 750);
    
});

//Set up slider namespace
var Slider = {};

//This function calls all of the other slider methods and sets it up for page load
Slider.initialize = function() {
    Slider.containerSize();
    Slider.getSlides();
    Slider.controlObject();
    //Slider.pause();
    Slider.slideOne = new Image();
    Slider.slideOne.onload = function() {
      $('.slider-overflow').stop(true, true).animate({'left': 0}, 750, function(){
        Slider.controlHighlight(Slider.controlArray[0]);
        Slider.animation();
      });
    };
    Slider.slideOne.src = "/assets/i/jon-cole-slide-1.jpg";
};

//This function finds the position of the element that is passed in
Slider.getPosition = function(el) {
  var pos = $(el).position().left;
  return pos;  
};

//This function iterates through the slides and adds their position to the position array
Slider.getSlides = function() {
    $.each(Slider.element, function(){
       var pos = Slider.getPosition(this);
       Slider.posArray.push(pos);
    });
};

//This function sizes the width of the slider container based on how many slides are present
Slider.containerSize = function(){
    var slides = Slider.element.length;
    var width = Slider.element.width();
    Slider.container.css('width', slides * width);
};

//This is the main animation function
Slider.animation = function() {
    Slider.timer = setInterval(function() {
        var pos = Slider.posArray[Slider.counter];
        var el = Slider.element[Slider.counter];

        if(Slider.counter >= Slider.posArray.length){
            Slider.moveSlide(0, Slider.element[0]);
            Slider.controlHighlight(Slider.controlArray[0]);
            Slider.counter = 1;
        } else {
            Slider.moveSlide(pos, el);
            Slider.controlHighlight(Slider.controlArray[Slider.counter]);
            Slider.counter++;
        }
    }, 8000);
};

//This function moves the slider container to the position that is passed in
Slider.moveSlide = function(pos, el) {
    var dbl = $(el).children('a#reel-slide, a#proc-slide');
    if(dbl.length > 0){
        $.each(dbl, function(index){
            $(dbl[index]).hide();
        });
        $(dbl[0]).css('left', '-900px');
        $(dbl[1]).css('right', '-900px');
        $('#slider').stop(true, true).animate({scrollLeft: pos}, 750, function(){
            $.each(dbl, function(index){
                $(dbl[index]).show();
            });;
            $(dbl[0]).stop(true, true).delay(300).animate({left: '0px'}, 500, function(){
                $(dbl[1]).stop(true, true).delay(300).animate({right: '0px'}, 500);
            });
        });
    }else{
        var div = $(el).children('div');
        div.hide();
        div.children().css('opacity', 0);
        div.css('left', '-900px');
        $('#slider').stop(true, true).animate({scrollLeft: pos}, 750, function(){
            div.show();
            div.stop(true, true).delay(300).animate({left: '0px'}, 500, function(){
                div.children().delay(300).animate({opacity: 1}, 500);
            });
        }); 
    }
};

//This function dynamically creates a list of slider controls, based on how many slides are present
Slider.controlObject = function() {
    $.each(Slider.element, function(index){
        var control = $('<li></li>');
        control.attr('data-count', index + 1);
        Slider.controlClick(control, this);
        Slider.controlArray.push(control);
        $('#controls').append(control);
    });
};

//This function highlights the appropriate control item based on which slide is showing
Slider.controlHighlight = function(el){
    $.each(Slider.controlArray, function(){
       $(this).removeClass('highlight'); 
    });
    $(el).addClass('highlight'); 
}

//This function controls the click event for the slider controls
Slider.controlClick = function(el, slide) {
  $(el).click(function(){
      clearInterval(Slider.timer);
      $.fx.off = false;
      $('#pause').removeClass('paused');

      var pos = Slider.posArray[$(this).index()];
      Slider.counter = $(this).attr('data-count');

      Slider.moveSlide(pos);
      Slider.controlHighlight(Slider.controlArray[Slider.counter - 1]);
      Slider.animation();
  });
};

//This function stops the animation from happening
// Slider.pause = function() {
//   $('#pause').click(function() {
//       clearInterval(Slider.timer);
//       $.fx.off = true;
//       $(this).addClass('paused');
//   });
// };


var ProjectInfo = {};

ProjectInfo.findInfo = function(element){
    var info = $(element).parent().parent().siblings('.proj-window').find('.proj-info');
    ProjectInfo.animate(info, element);
};

ProjectInfo.animate = function(element, button){
    if($(element).attr('data-open') == 'false'){
        $(element).attr('data-open', 'true');
        $(button).html('Hide Project Info');
        $(button).addClass('button-hide');
        $(element).stop(true, true).animate({'margin-left': '0px'}, 300, function(){
            $(element).find('h2, p').delay(300).fadeIn();
        });
    } else if($(element).attr('data-open') == 'true') {
        $(element).attr('data-open', 'false');   
        $(button).html('View Project Info');
        $(button).removeClass('button-hide');             
        $(element).find('h2, p').fadeOut(300, function(){
            $(element).animate({'margin-left': '702px'}, 300);
        });
    }

};

var ImageSwap = {};

ImageSwap.changer = function(el){
    $(el).change(function(){
        var changer = $(this);
        $.each(ImageSwap.imgSwitch, function(){
            
            if($(this).children().attr('data-target') == changer.attr('name')){
                var parent = $(this).children();
                ImageSwap.findImage(changer.val(), parent);
            }
        });
    });
};

ImageSwap.findImage = function(target, parent){
    $.each($(parent).children(), function(){
        if($(this).attr('data-change') == 'true'){
            $.each($(this).children(), function(){
                if($(this).attr('data-switch') == target){
                    ImageSwap.animate(this);
                }
            });
        }
    });
};

ImageSwap.animate = function(el){
    $(el).animate({opacity: 1}, 200, function(){
        $(el).siblings().animate({opacity: 0}, 200);
    });
};

var ImageSlide = {};

ImageSlide.animate = function(el, pos){
    $(el).stop(true, true).animate({scrollLeft: pos}, 500);
};

ImageSlide.click = function(el, slider){
    var pos = ($(el).attr('data-set') - 1) * 970;
    $(el).siblings().removeClass('button-on');
    $(el).addClass('button-on');
    ImageSlide.animate(slider, pos);
};

 
 $(".grouped_elements").fancybox({
     width: 800,
     padding: 0
 });