﻿// JScript File

(function($){
$.fn.galleryView = function(options) {
var opts = $.extend($.fn.galleryView.defaults,options);

var id;
var iterator = 0;
var gallery_width;
var gallery_height;
var frame_margin_top = 5 ;
var strip_height;
var wrapper_height;
var item_count = 0;
var slide_method;
var paused = false;
var frame_caption_size = 20;
var frame_margin_left = 5;
var pointer_width = 2;

//Define jQuery objects for reuse
var j_gallery;
var j_filmstrip;
var j_frames;
var j_panels;
var j_pointer;

/************************************************/
/* Plugin Methods        */
/************************************************/
function showItem(i) {
 //Disable next/prev buttons until transition is complete
 $('img.nav-next').unbind('click');
 $('img.nav-prev').unbind('click');
 j_frames.unbind('click');
 if(has_panels) {
  if(opts.fade_panels) {
   //Fade out all panels and fade in target panel
   j_panels.fadeOut(opts.transition_speed).eq(i%item_count).fadeIn(opts.transition_speed,function(){
    if(!has_filmstrip) {
     $('img.nav-prev').click(showPrevItem);
     $('img.nav-next').click(showNextItem);
    }
   });
  }
 }

 if(has_filmstrip) {
  //Slide either pointer or filmstrip, depending on transition method
  if(slide_method=='strip') {
   //Stop filmstrip if it's currently in motion
   j_filmstrip.stop();
 
   //Determine distance between pointer (eventual destination) and target frame
   var distance = getPos(j_frames[i]).top - (getPos(j_pointer[0]).top+2);
   var topstr = (distance>=0?'-=':'+=')+Math.abs(distance)+'px';
 
   //Animate filmstrip and slide target frame under pointer
   //If target frame is a duplicate, jump back to 'original' frame
   j_filmstrip.animate({
    'top':topstr
   },opts.transition_speed,opts.easing,function(){
    //Always ensure that there are a sufficient number of hidden frames on either
    //side of the filmstrip to avoid empty frames
    if(i>item_count) {
     i = i%item_count;
     iterator = i;
     j_filmstrip.css('top','-'+((opts.frame_height+frame_margin_top)*i)+'px');
    } else if (i<=(item_count-strip_size)) {
     i = (i%item_count)+item_count;
     iterator = i;
     j_filmstrip.css('top','-'+((opts.frame_height+frame_margin_top)*i)+'px');
    }
  
    if(!opts.fade_panels) {
     j_panels.hide().eq(i%item_count).show();
    }
    $('img.nav-prev').click(showPrevItem);
    $('img.nav-next').click(showNextItem);
    enableFrameClicking();
   });
  } else if(slide_method=='pointer') {
   //Stop pointer if it's currently in motion
   j_pointer.stop();
   //Get position of target frame
   var pos = getPos(j_frames[i]);
   //Slide the pointer over the target frame
   j_pointer.animate({
    'top':(pos.top-2+'px')
   },opts.transition_speed,opts.easing,function(){
    if(!opts.fade_panels) {
     j_panels.hide().eq(i%item_count).show();
    }
    $('img.nav-prev').click(showPrevItem);
    $('img.nav-next').click(showNextItem);
    enableFrameClicking();
   });
  }

  if($('a',j_frames[i])[0]) {
   j_pointer.unbind('click').click(function(){
    var a = $('a',j_frames[i]).eq(0);
    if(a.attr('target')=='_blank') {window.open(a.attr('href'));}
    else {location.href = a.attr('href');}
   });
  }
 }
};
function showNextItem() {
 $(document).stopTime("transition");
 if(++iterator==j_frames.length) {iterator=0;}
 showItem(iterator);
 $(document).everyTime(opts.transition_interval,"transition",function(){
  showNextItem();
 });
};
function showPrevItem() {
 $(document).stopTime("transition");
 if(--iterator<0) {iterator = item_count-1;}
 //alert(iterator);
 showItem(iterator);
 $(document).everyTime(opts.transition_interval,"transition",function(){
  showNextItem();
 });
};
function getPos(el) {
 var left = 0, top = 0;
 var el_id = el.id;
 if(el.offsetParent) {
  do {
   left += el.offsetLeft;
   top += el.offsetTop;
  } while(el = el.offsetParent);
 }
 //If we want the position of the gallery itself, return it
 if(el_id == id) {return {'left':left,'top':top};}
 //Otherwise, get position of element relative to gallery
 else {
  var gPos = getPos(j_gallery[0]);
  var gLeft = gPos.left;
  var gTop = gPos.top;

  return {'left':left-gLeft,'top':top-gTop};
 }
};
function enableFrameClicking() {
 j_frames.each(function(i){
  //If there isn't a link in this frame, set up frame to slide on click
  //Frames with links will handle themselves
  if($('a',this).length==0) {
   $(this).click(function(){
    $(document).stopTime("transition");
    showItem(i);
    iterator = i;
    $(document).everyTime(opts.transition_interval,"transition",function(){
     showNextItem();
    });
   });
  }
 });
};

function buildPanels() {
 //If there are panel captions, add overlay divs
 if($('.panel-overlay').length>0) {j_panels.append('<div class="overlay"></div>');}

 if(!has_filmstrip) {
  //Add navigation buttons
  $('<img />').addClass('nav-next').attr('src',opts.img_path+opts.nav_theme+'/next.png').appendTo(j_gallery).css({
   'position':'absolute',
   'zIndex':'1100',
   'cursor':'pointer',
   'top':((opts.panel_height-22)/2)+'px',
   'right':'10px',
   'display':'none'
  }).click(showNextItem);
  $('<img />').addClass('nav-prev').attr('src',opts.img_path+opts.nav_theme+'/prev.png').appendTo(j_gallery).css({
   'position':'absolute',
   'zIndex':'1100',
   'cursor':'pointer',
   'top':((opts.panel_height-22)/2)+'px',
   'left':'10px',
   'display':'none'
  }).click(showPrevItem);

  $('<img />').addClass('nav-overlay').attr('src',opts.img_path+opts.nav_theme+'/panel-nav-next.png').appendTo(j_gallery).css({
   'position':'absolute',
   'zIndex':'1099',
   'top':((opts.panel_height-22)/2)-10+'px',
   'right':'0',
   'display':'none'
  });

  $('<img />').addClass('nav-overlay').attr('src',opts.img_path+opts.nav_theme+'/panel-nav-prev.png').appendTo(j_gallery).css({
   'position':'absolute',
   'zIndex':'1099',
   'top':((opts.panel_height-22)/2)-10+'px',
   'left':'0',
   'display':'none'
  });
 }
 j_panels.css({
  'width':(opts.panel_width-parseInt(j_panels.css('paddingLeft').split('px')[0],10)-parseInt(j_panels.css('paddingRight').split('px')[0],10))+'px',
  'height':(opts.panel_height-parseInt(j_panels.css('paddingTop').split('px')[0],10)-parseInt(j_panels.css('paddingBottom').split('px')[0],10))+'px',
  'position':'absolute',
  'top':'0px',
  'left':(opts.filmstrip_position=='left'?(opts.frame_width+(frame_margin_left*2))+'px':'0px'),
  'overflow':'hidden',
  'background':'white',
  'display':'none'
 });
 $('.panel-overlay',j_panels).css({
  'position':'absolute',
  'zIndex':'999',
  'width':(opts.panel_width-20)+'px',
  'height':opts.overlay_height+'px',
  'top':(opts.overlay_position=='top'?'0':opts.panel_height-opts.overlay_height+'px'),
  'left':'0',
  'padding':'0 10px',
  'color':opts.overlay_text_color,
  'fontSize':opts.overlay_font_size
 });
 $('.panel-overlay a',j_panels).css({
  'color':opts.overlay_text_color,
  'textDecoration':'underline',
  'fontWeight':'bold'
 });
 $('.overlay',j_panels).css({
  'position':'absolute',
  'zIndex':'998',
  'width':opts.panel_width+'px',
  'height':opts.overlay_height+'px',
  'top':(opts.overlay_position=='top'?'0':(opts.panel_height-opts.overlay_height)+'px'),
  'left':'0',
  'background':opts.overlay_color,
  'opacity':opts.overlay_opacity
 });
 $('.panel iframe',j_panels).css({
  'width':opts.panel_width+'px',
  'height':(opts.panel_height-opts.overlay_height)+'px',
  'border':'0'
 });
};

function buildFilmstrip() {
 //Add wrapper to filmstrip to hide extra frames
 j_filmstrip.wrap('<div class="strip_wrapper"></div>');
 if(slide_method=='strip') {
  j_frames.clone().appendTo(j_filmstrip);
  j_frames.clone().appendTo(j_filmstrip);
  j_frames = $('li',j_filmstrip);
 }
 //If captions are enabled, add caption divs and fill with the image titles
 if(opts.show_captions) {
  j_frames.append('<div class="caption"></div>').each(function(i){
   $(this).find('.caption').html($(this).find('img').attr('title'));  
  });
 }

 j_filmstrip.css({
  'listStyle':'none',
  'margin':'0',
  'padding':'0',
  'width':opts.frame_width+'px',
  'position':'absolute',
  'zIndex':'900',
  'top':'0',
  'left':'0',
  'height':(gallery_height)+'px',
  'background':opts.background_color
 });
 j_frames.css({
  'position':'relative',
  'height':opts.frame_height+'px',
  'zIndex':'901',
  'marginTop':frame_margin_top+'px',
  'marginBottom':'0px',
  'marginLeft':frame_margin_left+'px',
  'marginRight':frame_margin_left+'px',
  'padding':'0',
  'cursor':'pointer'
 });
 $('img',j_frames).css({
  'border':'none'
 });
 $('.strip_wrapper',j_gallery).css({
  'position':'absolute',
  'top':'0'+"px",
  'left':(opts.filmstrip_position=='left'?'0px':opts.panel_width+'px'),
  'width':opts.frame_width+frame_margin_left+'px',
  // Change Height heigh
  'height':(wrapper_height+40)+'px',
  overflow:"hidden"
 });
 $('.caption',j_gallery).css({
  'position':'absolute',
  'top':opts.frame_height+'px',
  'left':'0',
  'margin':'0',
  'width':opts.frame_width+'px',
  'padding':'0',
  'color':opts.caption_text_color,
  'textAlign':'center',
  'fontSize':'10px',
  'height':frame_caption_size+'px',

  'lineHeight':frame_caption_size+'px'
 });
 var pointer = $('<div></div>');
 pointer.attr('id','pointer').appendTo(j_gallery).css({
   'position':'absolute',
   'zIndex':'1000',
   'cursor':'pointer',
   'top':getPos(j_frames[0]).top-(pointer_width/2)+'px',
   'left':getPos(j_frames[0]).left-(pointer_width/2)+'px',
   'height':opts.frame_height-pointer_width+'px',
   'width':opts.frame_width-pointer_width+'px',
   'border':(has_panels?pointer_width+'px solid '+(opts.nav_theme=='dark'?'black':'white'):'none')
 });
 j_pointer = $('#pointer',j_gallery);
 if(has_panels) {
  var pointerArrow = $('<img />');
  pointerArrow.attr('src',opts.img_path+opts.nav_theme+'/pointer'+(opts.filmstrip_position=='left'?'-right':'-left')+'.png').appendTo($('#pointer')).css({
   'position':'absolute',
   'zIndex':'1001',
   'top':((opts.frame_height/2)-10)+'px',
   'left':(opts.filmstrip_position=='right'?'-'+(10+pointer_width)+'px':opts.frame_height+'px')
  });
 }

 //If the filmstrip is animating, move the strip to the middle third
 if(slide_method=='strip') {
  j_filmstrip.css('top','-'+((opts.frame_height+frame_margin_top)*item_count)+'px');
  iterator = item_count;
 }
 //If there's a link under the pointer, enable clicking on the pointer
 if($('a',j_frames[iterator])[0]) {
  j_pointer.click(function(){
   var a = $('a',j_frames[iterator]).eq(0);
   if(a.attr('target')=='_blank') {window.open(a.attr('href'));}
   else {location.href = a.attr('href');}
  });
 }
 //if(opts.display_nav_buttons){
  //Add navigation buttons
  //$('<img />').addClass('nav-next').attr('src',opts.img_path+opts.nav_theme+'/next.png').appendTo(j_gallery).css({
   //'position':'absolute',
  // 'cursor':'pointer',
   //'top':'0px',
  // 'left':(opts.filmstrip_position=='left'?0:opts.panel_width)+frame_margin_left+((opts.frame_width-22)/2)+'px'
  //}).click(showNextItem);
  //$('<img />').addClass('nav-prev').attr('src',opts.img_path+opts.nav_theme+'/prev.png').appendTo(j_gallery).css({
   //'position':'absolute',
   //'cursor':'pointer',
   //'top':'0px',
   //'left':(opts.filmstrip_position=='left'?0:opts.panel_width)+frame_margin_left+((opts.frame_width-22)/2)+'px'
  //}).click(showPrevItem);
 //}
};

//Check mouse to see if it is within the borders of the panel
//More reliable than 'mouseover' event when elements overlay the panel
function mouseIsOverPanels(x,y) {
 var pos = getPos(j_gallery[0]);
 var top = pos.top;
 var left = pos.left;
 return x > left && x < left+opts.panel_width && y > top && y < top+opts.panel_height;  
};

/************************************************/
/* Main Plugin Code       */
/************************************************/
return this.each(function() {
 j_gallery = $(this);

 //Hide gallery to prevent Flash of Unstyled Content (FoUC) in IE
 j_gallery.css('visibility','hidden');

 //Assign elements to variables for reuse
 j_filmstrip = $('.filmstrip',j_gallery);
 j_frames = $('li',j_filmstrip);
 j_panels = $('.panel',j_gallery);

 id = j_gallery.attr('id');

 has_panels = j_panels.length > 0;
 has_filmstrip = j_frames.length > 0;

 if(!has_panels) opts.panel_height = 0;

 //Number of frames in filmstrip
 item_count = has_panels?j_panels.length:j_frames.length;

 //Number of frames that can display within the screen's width
 //64 = width of block for navigation button * 2
 //5 = minimum frame margin
 strip_size = has_panels?Math.floor((opts.panel_height)/(opts.frame_height+frame_margin_top+(opts.show_captions?frame_caption_size:0)+(opts.display_nav_buttons?frame_margin_top:0))):Math.min(item_count,opts.filmstrip_size);

 /************************************************/
 /* Determine transition method for filmstrip */
 /************************************************/
   //If more items than strip size, slide filmstrip
   //Otherwise, slide pointer
   if(strip_size >= item_count) {
    slide_method = 'pointer';
    strip_size = item_count;
   }
   else {slide_method = 'strip';}

 /************************************************/
 /* Determine dimensions of various elements */
 /************************************************/
 
   //Width of gallery block
   gallery_width = (has_panels?opts.panel_width:0)+(has_filmstrip?opts.frame_width+(frame_margin_left*2):0);
 
   //Height of gallery block = screen + filmstrip + captions (optional)
   gallery_height = (has_panels?opts.panel_height:0);
 
   //Height of filmstrip
   if(slide_method == 'pointer') {strip_height = (opts.frame_height*item_count)+(frame_margin_top*(item_count));}
   else {strip_height = (opts.frame_height*item_count*3)+(frame_margin_top*(item_count*3));}
 
   //Height of filmstrip wrapper (to hide overflow)
   wrapper_height = ((strip_size*opts.frame_height)+((strip_size-1)*frame_margin_top));

 /************************************************/
 /* Apply CSS Styles       */
 /************************************************/
   j_gallery.css({
    'position':'relative',
    'margin':'0',
    'background':opts.background_color,
    'border':opts.border,
    'width':gallery_width+'px',
    'height':gallery_height+'px'
   });

 /************************************************/
 /* Build filmstrip and/or panels    */
 /************************************************/
   if(has_filmstrip) {
    buildFilmstrip();
   }
   if(has_panels) {
    buildPanels();
   }


 /************************************************/
 /* Add events to various elements    */
 /************************************************/
   if(has_filmstrip) enableFrameClicking();
 
  
  
    $().mousemove(function(e){     
     if(mouseIsOverPanels(e.pageX,e.pageY)) {
      if(opts.pause_on_hover) {
       $(document).oneTime(500,"animation_pause",function(){
        $(document).stopTime("transition");
        paused=true;
       });
      }
      if(has_panels && !has_filmstrip) {
       $('.nav-overlay').fadeIn('fast');
       $('.nav-next').fadeIn('fast');
       $('.nav-prev').fadeIn('fast');
      }
     } else {
      if(opts.pause_on_hover) {
       $(document).stopTime("animation_pause");
       if(paused) {
        $(document).everyTime(opts.transition_interval,"transition",function(){
         showNextItem();
        });
        paused = false;
       }
      }
      if(has_panels && !has_filmstrip) {
       $('.nav-overlay').fadeOut('fast');
       $('.nav-next').fadeOut('fast');
       $('.nav-prev').fadeOut('fast');
      }
     }
    });


 /************************************************/
 /* Initiate Automated Animation    */
 /************************************************/
   //Show the first panel
   j_panels.eq(0).show();

   //If we have more than one item, begin automated transitions
   if(item_count > 1) {
    $(document).everyTime(opts.transition_interval,"transition",function(){
     showNextItem();
    });
   }
 
   //Make gallery visible now that work is complete
   j_gallery.css('visibility','visible');
});
};

$.fn.galleryView.defaults = {
panel_width: 400,
panel_height: 300,
frame_width: 150,
frame_height: 100,
filmstrip_size: 3,
overlay_height: 50,
overlay_font_size: '1em',
transition_speed: 400,
transition_interval: 6000,
overlay_opacity: 0.6,
overlay_color: 'black',
background_color: 'black',
overlay_text_color: 'white',
caption_text_color: 'white',
border: '1px solid black',
nav_theme: 'light',
easing: 'swing',
img_path: "img/gallery/",
filmstrip_position: 'right',
overlay_position: 'bottom',
show_captions: false,
fade_panels: true,
pause_on_hover: false,
display_nav_buttons:false
};
})(jQuery);


