(function($){
$.fn.popeye=function(options){
var obj=$(this)
var opts=$.extend({},$.fn.popeye.defaults,options)
function debug(msg){
if(window.console&&window.console.log&&opts.debug){
window.console.log(msg)}}
return this.each(function(){
function display(i,transition){
transition=transition || false
var stageIm={
backgroundImage: 'url('+im.small[i]+')',
backgroundPosition: 'center'}
if(transition){
ppyStageWrap.addClass(opts.lclass)
ppyStage.fadeTo(100,0,function(){
updateCounter(i)
ppyStage.css(stageIm)
})}
else{
ppyStage.css(stageIm)
updateCounter(i)}
preloader.onload=function(){
ppyStageWrap.removeClass(opts.lclass)
if(transition){
ppyStage.fadeTo(100,1)
displayCaption(im.title[i])}}
if(enlarged){
enlarge(i)}
else{
preloader.src=im.small[i]
debug('$.fn.popeye.display: Thumbnail '+i+' loaded')
preloader2.onload=function(){
debug('$.fn.popeye.display: Image '+i+' loaded')}
preloader2.src=im.large[i]}}
function updateCounter(i){
ppyTotal.text(' '+tot)
ppyCur.text((i+1)+' ')
debug('$.fn.popeye.updateCounter: Displaying image '+(i+1)+' of '+tot)}
function preloadAdjacent(i){
var next=i
if(next<(tot-1)){
next++
}else{
next=0}
preloaderNext.onload=function(){
debug('$.fn.popeye.preloadAdjacent: Next image ('+next+') loaded')}
preloaderNext.src=im.large[next]
var prev=i
if(prev<=0){
prev=tot-1
}else{
prev--}
preloaderPrev.onload=function(){
debug('$.fn.popeye.preloadAdjacent: Previous image ('+prev+') loaded')}
preloaderPrev.src=im.large[prev]}
function displayCaption(cap){
ppyText.text(cap)
if(opts.countpos=='caption'){
updateCounter(cur)}
if(cap){
var cssPpyCaption={
visibility: 'visible',
width: ppyStage.outerWidth()}
ppyCap.css(cssPpyCaption)
ppyCap.animate({"height": ppyTextWrap.outerHeight()},{
queue: false,
duration: 90,
easing: opts.easing
})}
else{
hideCaption(true)}}
function hideCaption(transition){
transition=transition || false
var cssPpyCaption={
visibility: 'hidden',
overflow: 'hidden',
width: maxWidth}
var duration=false
if(transition){
duration=70}
else{
duration=0}
ppyCap.animate({"height": '0px'},{
queue: false,
duration: duration,
easing: opts.easing,
complete: function(){
ppyCap.css(cssPpyCaption)}
})}
function init(){
obj.find('li').each(function(i){
im.width[i]=$(this).find('img').width(275)
im.height[i]=$(this).find('img').height(275)
debug('$.fn.popeye.init -> im.width['+i+']: '+im.width[i]+', im.height['+i+']: '+im.height[i])
if(maxWidth>im.width[i]){
maxWidth=im.width[i]}
if(maxHeight>im.height[i]){
maxHeight=im.height[i]}
})
debug('$.fn.popeye.init -> maxWidth: '+maxWidth+', maxHeight: '+maxHeight)
cssCompactStage={
width: maxWidth,
height: maxHeight}
cssPpyTools={
opacity: 0}
debug('$.fn.popeye.init -> Starting in COMPACT MODE')
obj.find('ul').remove()
if(opts.nojsclass){
obj.find('.'+opts.nojsclass).remove()}
obj.append(ppyStageWrap)
ppyStageWrap.append(ppyStage)
ppyStage.append(ppyTools)
if(opts.countpos=='overlay'){
ppyStage.append(ppyCount)}
ppyTools.append(ppyPrev)
ppyTools.append(ppySwitch)
ppyTools.append(ppyNext)
if(opts.caption){
ppyStageWrap.after(ppyCap)}
ppyCount.append(ppyCur)
ppyCount.append(ppyTotal)
ppyCur.after(opts.oflabel)
ppyCap.append(ppyTextWrap)
if(opts.countpos=='caption'){
ppyTextWrap.prepend(ppyCount)}
ppyTextWrap.append(ppyText)
if(opts.jsclass){
obj.addClass(opts.jsclass)}
if(opts.direction=='left'){
ppyTools.addClass(opts.dlclass)}
else if(opts.direction=='right'){
ppyTools.addClass(opts.drclass)}
ppyStage.css(cssCompactStage)
ppyTools.css(cssPpyTools)
display(cur)
hideCaption()
var imHeight=ppyStageWrap.outerHeight()
var imWidth=ppyStageWrap.outerWidth()
var imTop=obj.offset().top-parseInt(obj.css('marginTop'),10)
var imLeft=obj.offset().left-parseInt(obj.css('marginLeft'),10)
var imRight=$(window).width()-(obj.offset().left+imWidth)-parseInt(obj.css('marginRight'),10)
var imFloat=obj.css('float')
var imMarginTop=obj.css('margin-top')
var imMarginRight=obj.css('margin-right')
var imMarginBottom=obj.css('margin-bottom')


var imMarginLeft=obj.css('margin-left')
var cssPlaceholder={
height: imHeight,
width: imWidth,
float: imFloat,
marginTop: imMarginTop,
marginRight: imMarginRight,
marginBottom: imMarginBottom,
marginLeft: imMarginLeft}
ppyStage.hover(
function(e){
ppyTools.stop().fadeTo(100,opts.opacity)
},
function(e){
ppyTools.stop().fadeTo(500,0)}
)
ppyTools.mouseleave(
function(e){
ppyTools.stop().fadeTo(500,0)}
)
ppyTools.mouseenter(
function(e){
ppyTools.stop().fadeTo(100,opts.opacity)}
)
obj.hover(
function(e){
displayCaption(im.title[cur])
},
function(e){
hideCaption(true)}
)
ppyPrev.click(function(){
if(cur<=0){
cur=tot-1
}else{
cur--}
display(cur,true)
return false
})
ppyNext.click(function(){
if(cur<(tot-1)){
cur++
}else{
cur=0}
display(cur,true)
return false
})}
var preloader=new Image()
var preloader2=new Image()
var preloaderNext=new Image()
var preloaderPrev=new Image()
var preloaders=[]
var ppyPlaceholder=$('<div class="ppy-placeholder" />')
var ppyStageWrap=$('<div class="ppy-stagewrap" />')
var ppyStage=$('<div class="ppy-stage" />')
var ppyTools=$('<div class="ppy-tools" />')
var ppyPrev=$('<div class="ppy-prev">'+opts.plabel+'</div>')
var ppyNext=$('<div class="ppy-next">'+opts.nlabel+'</div>')
var ppySwitch=$('<div class="ppy-enlarge">'+opts.blabel+'</div>')
var ppyCap=$('<div class="ppy-cap" />')
var ppyCount=$('<div class="ppy-count" />')
var ppyCur=$('<em class="ppy-cur" />')
var ppyTotal=$('<em class="ppy-total" />')
var ppyTextWrap=$('<div class="ppy-textwrap" />')
var ppyText=$('<span class="ppy-text" />')
var im={
small: [],
title: [],
large: [],
width: [],
height: []}
var maxWidth=275
var maxHeight=275
var cur=0
var tot=obj.find('img').length
var togo=tot
debug('$.fn.popeye -> '+tot+' thumbnails found.')
var cssCompactStage={}
var cssPpyTools={}
var enlarged=false
obj.find('li').each(function(i){
im.small[i]=$(this).find('img').attr('src')
im.title[i]=$(this).find('img').attr('alt')
im.large[i]=$(this).find('a').attr('href')
debug('$.fn.popeye -> Loading "'+im.small[i]+'"')
$(this).find('img').load(function(){
if(--togo<1){
debug('$.fn.popeye -> All thumbnails loaded!')
init()}
}).attr('src',im.small[i])
})
})}
$.fn.popeye.defaults={
jsclass: 'ppy-js',
nojsclass: 'ppy-no-js',
eclass: 'ppy-expanded',
lclass: 'ppy-loading',
dlclass: 'ppy-left',
drclass: 'ppy-right',
direction: 'left',
duration: 250,
opacity: 0.7,
countpos: 'overlay',
caption: true,
easing: 'swing',
nlabel: '',
plabel: '',
oflabel: 'of',
blabel: '',
clabel: 'Click to close',
debug: false}
})(jQuery)