/*
  Ben Stockley Photographer - Application Javascript - ./_inc/js/application.js
  $ Revision: 1.0 Build 20100107 $
  Copyright (c) 2010 Ben Stockley Photographer. All Rights Reserved.

///////////////     Configuration     /////////////*/

  var config = {
    xOffset: 15,
    yOffset: 15
  }

/*/////////////     Application     /////////////*/

  var application = {
    setup: function() {
      var $books;

      (function() {
        $books = $('#books li a');
        $('<div id="loading" />').appendTo('body');
        $('h1').fadeIn(1000);

        init();
      })();

      function init(){
        $books.bind({
          click: function(){

          },

          mouseenter: function(){
            var $current = $(this);
            $('<div id="preview" />').appendTo('body');

            $books.each(function(){
              $(this).stop().animate({
                opacity: 0.3
              }, 500);
            });

            $current.stop().animate({
              opacity: 1
            }, 500);

            $("#preview").html('<img src="' + $(this).find('img').attr('src') + '" />').fadeIn('fast');
          },

          mousemove: function(e){
            $('#preview').css('top', (e.pageY + config.xOffset) + 'px').css('left', (e.pageX + config.yOffset) + 'px');
          },

          mouseleave: function(){
            $books.each(function(){
              $(this).stop().animate({
                opacity: 1
              }, 500);
            });

            $('#preview').remove();
          }
        });

      }
    },

    navigation: function($section, $state) {
      var $logo, $main_nav;

      (function() {
        $logo = $('h1');
        $main_nav = $('#nav');

        if ($state == 'refresh') {
          refresh();
        } else {
          init();
        }

      })();

      function init() {
        switch ($section) {
          case 'contact':
          case 'biography':
            to_resize();
            $(window).resize(to_resize);
            break;
          case 'portfolio':

            break;
          default:
            $main_nav.css({ left: '25px' });
            $main_nav.fadeIn(500).removeFilter();

            break;


        }
      }

      function refresh() {
        switch ($section) {
          case 'contact':
          case 'biography':
            $main_nav.fadeIn(500, function() {
              $(this).removeFilter();
              to_center();
            });

            $(window).resize(to_resize);
            break;

          case 'portfolio':
          default:
            to_original();
            $(window).unbind('resize');
            break;

        }



      }

      function to_center() {
        $width = $(window).width() / 2;
        $logo.animate({ left: $width - $logo.width() / 2 }, { duration: 1250, specialEasing: 'easeOutCubic'});
        $main_nav.animate({ left: $width - $main_nav.width() / 2 }, { duration: 1250, specialEasing: 'easeOutCubic'});
      }

      function to_resize() {


        $width = $(window).width() / 2;
        $logo.css('left', $width - $logo.width() / 2);
        $main_nav.css('left', $width - $main_nav.width() / 2 );

      }

      function to_original() {
        if ($logo.css('left') != '25px') {
          $logo.animate({ left: 25 }, { duration: 1250, specialEasing: 'easeOutCubic'});
          $main_nav.animate({ left: 25 }, { duration: 1250, specialEasing: 'easeOutCubic'});
        }

      }

    },

    photo: function() {
      var $photos, $position, $thumbnails, $frame, $total, $btnNext, $btnBack;

      (function() {
        $btnNext = $('a.imageNext');
        $btnBack = $('a.imageBack');

        init();
      })();

      function init() {
        $position = 0;
        $photos = $('#photoroll img');
        $thumbnails = $('#photothumbnails li a');
        $frame = $('#photoroll');
        $total = $photos.length;
        $('#totalImages').text(numeric($total));
        $('#navBack').fadeIn(500).removeFilter();
        controls($position);

        $thumbnails.each(function() {
          $(this).find('img').animate({
            opacity: 0.3
          });
        });

        $thumbnails.bind({
          click: function() {
            if ($(this).attr('id') != 'btnThumbBack') {

            $photos.each(function() {
              $(this).css({
                  left: '-9999px',
                  top: '-9999px',
                  opacity: 0
                })

              $(this).removeClass('active');

            });

            $clicked = parseInt($(this).attr('id').substring(9));

            $item = $($photos[$clicked - 1]);

             $('#photothumbnails').fadeOut('slow', function() {
              $('#rollnav').fadeIn('slow').removeFilter();
              $('#photoframe').fadeIn('slow').removeFilter();

              $item.css({
                  opacity: 0,
                  display: 'block',
                  left: '0px',
                  top: '0px'
                }).animate({
                  opacity: 1
                }, 100).addClass('active').removeFilter();

            });

            $thumbnails.each(function() { $(this).removeClass() });

            $position = $clicked;

            $('#imageTitle').text($($photos[$position - 1]).attr('title'));
            controls($position);

            $thumbnails.eq($position).addClass('current');
            } else {
              $('#photothumbnails').fadeOut('slow', function() {
              $('#rollnav').fadeIn('slow').removeFilter();
              $('#photoframe').fadeIn('slow').removeFilter();
              });
            }

            return false;
          },

          mouseenter: function(){
            var $current = $(this);

            $thumbnails.each(function(){
              $(this).find('img').stop().animate({
                opacity: 0.3
              }, 500);
            });

            $current.find('img').stop().animate({
              opacity: 1
            }, 500);
          },

          mouseleave: function(){
            $thumbnails.each(function(){
              $(this).find('img').stop().animate({
                opacity: 0.3
              }, 500);

              if ($(this).hasClass('current')) {
                $(this).find('img').stop().animate({
                  opacity: 1
                }, 500);
              }
            });
          }
        });

        $photos.each(function() {
          var image = $(this);
          var initW = $(this).width();
          var initH = $(this).height();
          var container = $('#photoframe');


          var newSize = resize(container.width(), container.height(), initW, initH);
            image.attr('width', newSize[0]);
            image.attr('height', newSize[1]);

          $(window).resize(function() {
            var newSize = resize(container.width(), container.height(), initW, initH);
            image.attr('width', newSize[0]);
            image.attr('height', newSize[1]);

          });


        });

        $('#photoinside').bind({
            mouseenter: function() {
              if ($position != 0) {

                $('#booksThumbnail').fadeIn('fast').removeFilter(); // .slideDown('fast');
              }
            },

            mouseleave: function() {
              $('#booksThumbnail').fadeOut('fast');
            }
          });

        $('a#btnThumbnail').bind('click', function(e) {
          $('#booksThumbnail').fadeOut('fast');
          $('#rollnav').fadeOut('slow');

          $('#photoframe').fadeOut('slow', function() {
           $thumbnails.each(function() {
              $(this).find('img').css({
                opacity: 0.3
              });
            });
            $('#photothumbnails li a.current').find('img').css({ opacity: 1 });

            $('#photothumbnails').fadeIn('slow').removeFilter();
          });
          e.preventDefault();
        });

        $('a#btnThumbBack').bind('click', function(e) {
          $('#photothumbnails').fadeOut('slow', function() {
            $('#rollnav').fadeIn('slow').removeFilter();
            $('#photoframe').fadeIn('slow').removeFilter();
          });

          e.preventDefault();
        });


        $('a#btnIndex').bind('click', function(e) {
          $('#booksMini').slideDown('200');
          $('#booksThumbnail').fadeOut('fast');

          $(this).addClass('clicked');
          e.preventDefault();
        });

        $photos.first().css({
          opacity: 0,
          display: 'block',
          left: '0px',
          top: '0px'
        }).addClass('active').animate({
          opacity: 1
        }, 500);

        if ($total != 0) {
          $('#rollnav').fadeIn('slow').removeFilter();
        }

     // Next button Interaction
        $('#photoroll img').bind('click', function(e) {
          if ($position == 0) {
            $('#intro').fadeOut('slow');

            $frame.css({
              left: $(window).width() - 100,
              right: ''
            });
            $frame.animate({
              left: 25
            }, { duration: 1000, specialEasing: 'easeOutCubic'});

          }else {
            if ($position != $total) {
              $item = $($photos[$position - 1]);

              $item.animate({
                opacity: 0
              }, 100, function(){
                $(this).css({
                  left: '-9999px',
                  top: '-9999px'
                }).removeClass('active');

                $(this).next().css({
                  opacity: 0,
                  display: 'block',
                  left: '0px',
                  top: '0px'
                }).animate({
                  opacity: 1
                }, 100).addClass('active').removeFilter();

              });


            }


          };

          $thumbnails.each(function() { $(this).removeClass() });

          if ($position != $total) $position = $position+1;

          if ($position != 0) { $('#imageTitle').text($($photos[$position-1]).attr('title')); }
          controls($position);

          $thumbnails.eq($position).addClass('current');
          e.preventDefault();

        });

		$('a.imageFirst').bind('click', function(e) {
			if ($position != 0) {

				$frame.animate({
              		left: $(window).width() - 100
            	}, 1000, 'easeOutCubic', function() {
              		$(this).css({ right: '100px', left: ''});

              		$photos.each(function() {
         		     $(this).css({
               		   left: '-9999px',
                 		 top: '-9999px',
              		  opacity: 0
            	    })

              		$(this).removeClass('active');
           	 	});

					$photos.first().css({
          			opacity: 0,
         		   display: 'block',
          			left: '0px',
          			top: '0px'
       			 }).addClass('active').animate({
          			opacity: 1
        		}, 500);



           		});

				$('#intro').fadeIn('slow').removeFilter();





            	$position = 0;
            	controls($position);

            	$('#imageTitle').text('Introduction');
			}

			e.preventDefault();
		});

        $btnNext.bind('click', function(e) {

          if ($position == 0) {
            $('#intro').fadeOut('slow');

            $frame.css({
              left: $(window).width() - 100,
              right: ''
            });
            $frame.animate({
              left: 25
            }, { duration: 1000, specialEasing: 'easeOutCubic'});

          }
          else {
            if ($position != $total) {
              $item = $($photos[$position - 1]);



              $item.animate({
                opacity: 0
              }, 100, function(){
                $(this).css({
                  left: '-9999px',
                  top: '-9999px'
                }).removeClass('active');

                $(this).next().css({
                  opacity: 0,
                  display: 'block',
                  left: '0px',
                  top: '0px'
                }).animate({
                  opacity: 1
                }, 100).addClass('active').removeFilter();

              });


            }
          };

          $thumbnails.each(function() { $(this).removeClass() });
          if ($position != $total) $position = $position+1;

          if ($position != 0) { $('#imageTitle').text($($photos[$position-1]).attr('title')); }
          controls($position);

          $thumbnails.eq($position).addClass('current');
          e.preventDefault();

        });

        $btnBack.bind('click', function(e) {
          if ($position == 1) {

            $frame.animate({
              left: $(window).width() - 100
            }, { duration: 1000, specialEasing: 'easeOutCubic'}, function() {
              $(this).css({ right: '100px', left: ''});

            });

            $('#intro').fadeIn('slow').removeFilter();
            $('#booksThumbnail').fadeOut('fast');
          }
          else {
            if ($position != 0) {
              $item = $($photos[$position - 1]);

              $item.animate({
                opacity: 0
              }, 100, function(){
                $(this).css({
                  left: '-9999px',
                  top: '-9999px'
                }).removeClass('active');

                $(this).prev().css({
                  opacity: 0,
                  display: 'block',
                  left: '0px',
                  top: '0px'
                }).animate({
                  opacity: 1
                }, 100).addClass('active').removeFilter();

              });
            }
          };


          $thumbnails.each(function() { $(this).removeClass() });
          if ($position != 0) $position = $position-1;

          if ($position == 0) { $('#imageTitle').text('Introduction'); } else { $('#imageTitle').text($($photos[$position-1]).attr('title')); }

          controls($position);

          $thumbnails.eq($position).addClass('current');
          e.preventDefault();
        });


      }


      function resize(maxW, maxH, currW, currH) {
        var ratio = currH / currW;

        if (currW >= maxW && ratio <= 1) {
          currW = maxW;
          currH = currW * ratio;
        } else if (currH >= maxH) {
          currH = maxH;
          currW = currH / ratio;
        }

        return [currW, currH];
      }

      function controls(position) {
        (position == 0) ? $btnBack.animate({opacity:0.3}, 300) : $btnBack.animate({opacity:1}, 300);
        (position == $total) ? $btnNext.animate({opacity:0.3}, 300) : $btnNext.animate({opacity:1}, 300);
        (position == 0) ? $('a.imageFirst').animate({opacity:0.3}, 300) : $('a.imageFirst').animate({opacity:1}, 300);
        $('#currentImage').text(numeric(position));
      }

      function numeric(value) {
        if (value < 10) {
          return '0'+value;
        } else {
          return value;
        }
      }
    },

    featured: function() {
      var $photos, $position, $thumbnails, $frame, $total, $btnNext, $btnBack;

      (function() {
        $btnNext = $('.imageHomeNext');
        $btnBack = $('.imageHomeBack');
        $btnReturn = $('.imageHomeReturn');
        init();
      })();

      function init(){
        $position = 0;
        $photos = $('#featureroll img');

        $frame = $('#featureroll');
        $total = $photos.length;
        $('#totalHomeImages').text(numeric($total));

        controls($position);

        $photos.each(function(){
          var image = $(this);
          var initW = $(this).width();
          var initH = $(this).height();
          var container = $('#featureframe');


          var newSize = resize(container.width(), container.height(), initW, initH);
          image.attr('width', newSize[0]);
          image.attr('height', newSize[1]);

          $(window).resize(function(){
            var newSize = resize(container.width(), container.height(), initW, initH);
            image.attr('width', newSize[0]);
            image.attr('height', newSize[1]);

          });
        });

        $photos.first().css({
          opacity: 0,
          left: '0px',
          top: '0px',
          display: 'block'
        }).addClass('active').animate({
          opacity: 1
        }, 350);
      //    $('#rollnav').fadeIn('slow').removeFilter();


        // Next button Interaction
        $('#featureroll img').bind('click', function(e) {
        	if ($position != $total - 1) {
                $item = $($photos[$position]);

                $item.animate({
                  opacity: 0
                }, 100, function(){
                  $(this).css({
                    left: '-9999px',
                    top: '-9999px'
                  }).removeClass('active');

                  $(this).next().css({
                    opacity: 0,
                    display: 'block',
                    left: '0px',
                    top: '0px'
                  }).animate({
                    opacity: 1
                  }, 100).addClass('active').removeFilter();

                });

                $position = $position + 1;

                controls($position);
              }

              e.preventDefault();

            });


        $btnNext.bind('click', function(e){
          if ($position != $total - 1) {
            $item = $($photos[$position]);

            $item.animate({
              opacity: 0
            }, 100, function(){
              $(this).css({
                left: '-9999px',
                top: '-9999px'
              }).removeClass('active');

              $(this).next().css({
                opacity: 0,
                display: 'block',
                left: '0px',
                top: '0px'
              }).animate({
                opacity: 1
              }, 100).addClass('active').removeFilter();

            });

            $position = $position + 1;

            controls($position);
          }

          e.preventDefault();
        });


        $btnBack.bind('click', function(e){
          if ($position != 0) {
            $item = $($photos[$position]);

            $item.animate({
              opacity: 0
            }, 100, function(){
              $(this).css({
                left: '-9999px',
                top: '-9999px'
              }).removeClass('active');

              $(this).prev().css({
                opacity: 0,
                display: 'block',
                left: '0px',
                top: '0px'
              }).animate({
                opacity: 1
              }, 100).addClass('active').removeFilter();

            });

            $position = $position - 1;
            controls($position);
          }

          e.preventDefault();
        });
      }

      function resize(maxW, maxH, currW, currH) {
        var ratio = currH / currW;

        if (currW >= maxW && ratio <= 1) {
          currW = maxW;
          currH = currW * ratio;
        } else if (currH >= maxH) {
          currH = maxH;
          currW = currH / ratio;
        }

        return [currW, currH];
      }

      function controls(position) {
        (position == 0) ? $btnBack.animate({opacity:0.3}, 300) : $btnBack.animate({opacity:1}, 300);
        (position == $total-1) ? $btnNext.animate({opacity:0.3}, 300) : $btnNext.animate({opacity:1}, 300);
        $('#currentHomeImage').text(numeric(position+1));
      }

      function numeric(value) {
        if (value < 10) {
          return '0'+value;
        } else {
          return value;
        }
      }
    },

    profile: function(){
      var $sections, $position, $current, $total, $btnNext, $btnBack;

      (function(){
        $btnNext = $('a.btnNext');
        $btnBack = $('a.btnBack');

        init();
      })();

      function init(){
        $position = 0;
        $sections = $('.section');
        $total = $sections.length;

        $('#totalSections').text('0' + $total);

        controls($position);

        $sections.first().css({
          opacity: 0,
          left: '0px',
          top: '0px'
        }).addClass('active').animate({
          opacity: 1
        }, 500);
        $('#pagenav').fadeIn('slow').removeFilter();

        // Next button Interaction

        $btnNext.bind('click', function(e){
          if ($position != $total - 1) {
            $item = $($sections[$position]);

            $item.animate({
              opacity: 0.0
            }, 500, function(){
              $(this).removeAttr('style').removeClass('active');
              $(this).next().fadeIn(500, function(){
                $(this).addClass('active').removeFilter();
              });
            });

            $position = $position + 1;
            controls($position);
          }
          e.preventDefault();
        });

        // Back button Interaction

        $btnBack.bind('click', function(e){
          if ($position != 0) {
            $item = $($sections[$position]);

            $item.animate({
              opacity: 0.0
            }, 500, function(){
              $(this).removeAttr('style').removeClass('active');
              $(this).prev().fadeIn(500, function(){
                $(this).addClass('active').removeFilter();
              });
            });

            $position = $position - 1;
            controls($position);
          }
          e.preventDefault();
        });
      }

      function controls(position){
        (position == 0) ? $btnBack.animate({
          opacity: 0.3
        }) : $btnBack.animate({
          opacity: 1
        });
        (position == $total - 1) ? $btnNext.animate({
          opacity: 0.3
        }) : $btnNext.animate({
          opacity: 1
        });
        $('#currentPage').text('0' + (position + 1));
      }
    },

    portfolio: function() {
      var $photos;

      (function() {


        init();
      })();

      function resize(maxW, maxH, currW, currH) {
        var ratio = currH / currW;

        if (currW >= maxW && ratio <= 1) {
          currW = maxW;
          currH = currW * ratio;
        } else if (currH >= maxH) {
          currH = maxH;
          currW = currH / ratio;
        }

        return [currW, currH];
      }


      function init(){
        $photos = $('#featureroll img');
        $photos.each(function(){
          var image = $(this);
          var initW = $(this).width();
          var initH = $(this).height();
          var container = $('#featureframe');


          var newSize = resize(container.width(), container.height(), initW, initH);
          image.attr('width', newSize[0]);
          image.attr('height', newSize[1]);

          $(window).resize(function(){
            var newSize = resize(container.width(), container.height(), initW, initH);
            image.attr('width', newSize[0]);
            image.attr('height', newSize[1]);

          });
        });

      }
    }
  }


/*/////////////     Launcher     /////////////*/

  var benstockley = {
    init: function(e) {
      application.navigation(e, 'init');
      application.setup();
    },

    profile: function() {
      application.profile();
    },

    photo: function() {
      application.photo();

    },


    home: function() {
      application.featured();
    },

    portfolio: function() {
      application.portfolio();
    },

    refresh: function(e) {
      application.navigation(e, 'refresh');
    }
  }