// starting the script on page load
jQuery('document').ready(function($) {
$.ajaxSetup({
cache: false
});
tooltip();
$.fn.TopBannerRotate();
$.fn.ToggleViewButtons();
$.fn.SetLandingPage();
$.fn.JigsawPuzzle();
$.fn.Quiz();
$.fn.PhotoNumbers();
$.fn.ChangeThemeClick();
$.fn.LogOut();
$.fn.SMBadge();
$('#feature-photo-group div:first-child')
.css("display", "block");
//$("#tweetcomments").click(function(){
// $('.btc-twitter').toggle('slow');
//});
//$('#profile_output a[href^="http"]').attr('rel','nofollow');
});
//SM Badge floatbox
$.fn.SMBadge = function () {
if ($('#SMBadges').length) {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#SMBadges').offset().top - parseFloat($('#SMBadges').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('#SMBadges').addClass('fixed');
} else {
// otherwise remove it
$('#SMBadges').removeClass('fixed');
}
});
}
}
}
function navigate(direction) {
// Check if any of the menu items is selected
if($("#menu ul li .itemhover").size() == 0) {
currentSelection = -1;
}
if(direction == 'up' && currentSelection != -1) {
if(currentSelection != 0) {
currentSelection--;
}
} else if (direction == 'down') {
$(this).parent().next().find('.wp-caption').focus();
}
}
function mySideChange(front) {
if (front) {
$(this).parent().find('div.front').show();
$(this).parent().find('div.back').hide();
} else {
$(this).parent().find('div.front').hide();
$(this).parent().find('div.back').show();
}
}
$('#content-index-top li').hover(
function () {
$(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
},
function () {
$(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
}
);
$.fn.TopBannerRotate = function() {
///
/// Top banner photo rotator
///
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 7500,
type: 'sequence',
containerheight: '155px'
});
}
$.fn.JigsawPuzzle = function() {
///
/// Mixes photo into a number of pieces for jigsaw puzzle
///
$('#page div.puzzle').puzzle( 100 );
}
$.fn.SetLandingPage = function() {
///
/// set cookie for landing page
///
$("#change_landing_welcome").click(function(event){
event.preventDefault();
$.cookie('landing_type', 'welcome',{ path: '/', expires: 360 });
window.location = "/";
});
$("#change_landing_first").click(function(event){
event.preventDefault();
$.cookie('landing_type', null,{ path: '/', expires: 0 });
window.location = "/";
});
}
$.fn.ToggleViewButtons = function() {
///
/// 3 different types of views for showing post summaries
///
$(".layout-small").click(function(){
$('.archive-list').removeClass('nodisplay');
$('.post-summary-photo-wrapper').addClass('nodisplay');
$('.archive-list li').removeClass('archive-layout-wide');
$('.archive-list li').addClass('archive-layout-small');
$('.archive-postmetadata').addClass('nodisplay');
$('.archive-excerpt').addClass('nodisplay');
$('.layout-small').removeClass('button-off');
$('.layout-summary').addClass('button-off');
$('.layout-summary-photowide').addClass('button-off');
$('.layout-wide').addClass('button-off');
});
$(".layout-summary").click(function(){
$('.archive-list').removeClass('nodisplay');
$('.post-summary-photo-wrapper').addClass('nodisplay');
$('.archive-list li').removeClass('archive-layout-small');
$('.archive-list li').addClass('archive-layout-wide');
$('.archive-postmetadata').removeClass('nodisplay');
$('.archive-excerpt').removeClass('nodisplay');
$('.layout-small').addClass('button-off');
$('.layout-summary').removeClass('button-off');
$('.layout-summary-photowide').removeClass('button-off');
$('.layout-wide').addClass('button-off');
});
$(".layout-summary-photowide").click(function(){
$('.archive-list').removeClass('nodisplay');
$('.post-summary-photo-wrapper').addClass('nodisplay');
$('.archive-list li').removeClass('archive-layout-small');
$('.archive-list li').removeClass('archive-layout-wide');
$('.archive-list li').addClass('archive-layout-photowide');
$('.archive-postmetadata').removeClass('nodisplay');
$('.archive-excerpt').removeClass('nodisplay');
$('.layout-small').addClass('button-off');
$('.layout-summary').removeClass('button-off');
$('.layout-summary-photowide').removeClass('button-off');
$('.layout-wide').addClass('button-off');
});
$(".layout-wide").click(function(){
$('.post-summary-photo-wrapper').removeClass('nodisplay');
$('.archive-list').addClass('nodisplay');
$('.layout-small').addClass('button-off');
$('.layout-summary').addClass('button-off');
$('.layout-summary-photowide').addClass('button-off');
$('.layout-wide').removeClass('button-off');
});
}
$.fn.PhotoNumbers = function() {
///
/// Add Numbers to Photos
///
$('#photo-content-main .photo-entry .wp-caption-text').each(function (i) {
i = i+1;
//if (i > 4) { return false; }
$(this).prepend("#" + i + " ");
});
}
$.fn.Quiz = function() {
///
/// Toggle Quiz Answers
///
$('#content .quiz li').click(function(){
var target = $(this).find(".quiz-answer");
target.toggle();
});
}
$.fn.ChangeThemeClick = function () {
///
/// Toggle BlackTheme
///
$('#ChangeTheme').toggle(function(){
//var body_background = $("#container").css("background-color");
$("body").addClass('backgroundblack');
$("#container").addClass('backgroundblack');
}, function(){
$("body").removeClass('backgroundblack');
$("#container").removeClass('backgroundblack');
});
};
(function() {
// Override default jQuery css() method to support CSS 'transform' property
// uniformly across Webkit/Safari and Firefox 3.1+
// 2009 Zachary Johnson www.zachstronaut.com
function getTransformProperty(element) {
// Try transform first for forward compatibility
var properties = ['transform', 'WebkitTransform', 'MozTransform'];
var p;
while (p = properties.shift()) {
if (typeof element.style[p] != 'undefined') {
return p;
}
}
// Default to transform also
return 'transform';
}
var proxied = jQuery.fn.css;
jQuery.fn.css = function(key, value) {
if (key == 'transform') {
if (typeof jQuery.props[key] == 'undefined') {
jQuery.props[key] = getTransformProperty(this.get(0));
}
// We force the property mapping here because jQuery.attr() does
// property mapping with jQuery.props when setting a CSS property,
// but curCSS() does *not* do property mapping when *getting* a
// CSS property. (It probably should since it manually does it
// for 'float' now anyway.)
key = jQuery.props[key];
}
return proxied.apply(this, arguments);
};
})();
(function ($) {
// rotate3Di v0.9 - 2009.03.11 Zachary Johnson www.zachstronaut.com
// "3D" isometric rotation and animation using CSS transformations
// Visual effect currently supported in Safari/WebKit and Firefox 3.1+
var calcRotate3Di = {
direction: function (now) {return (now < 0 ? -1 : 1);},
degrees: function (now) {return (Math.floor(Math.abs(now))) % 360;},
scale: function (degrees) {return (1 - (degrees % 180) / 90)
* (degrees >= 180 ? -1 : 1);}
}
// Custom animator
$.fx.step.rotate3Di = function (fx) {
direction = calcRotate3Di.direction(fx.now);
degrees = calcRotate3Di.degrees(fx.now);
scale = calcRotate3Di.scale(degrees);
if (fx.options && typeof fx.options['sideChange'] != 'undefined') {
if (fx.options['sideChange']) {
var prevScale = $(fx.elem).data('rotate3Di.prevScale');
// negative scale means back side
// positive scale means front side
// if one is pos and one is neg then we have changed sides
// (but one could actually be zero).
if (scale * prevScale <= 0) {
// if one was zero, deduce from the other which way we are
// flipping: to the front (pos) or to the back (neg)?
fx.options['sideChange'].call(
fx.elem,
(scale > 0 || prevScale < 0)
);
// this was commented out to prevent calling it more than
// once, but then that broke legitimate need to call it
// more than once for rotations of 270+ degrees!
//fx.options['sideChange'] = null;
// this is my answer to commenting the above thing out...
// if we just flipped sides, flip-flop the old previous
// scale so that we can fire the sideChange event correctly
// if we flip sides again.
$(fx.elem).data(
'rotate3Di.prevScale',
$(fx.elem).data('rotate3Di.prevScale') * -1
);
}
}
// Making scale positive before setting it prevents flip-side
// content from showing up mirrored/reversed.
scale = Math.abs(scale);
}
// Since knowing the current degrees is important for detecting side
// change, and since Firefox 3.0.x seems to not be able to reliably get
// a value for css('transform') the first time after the page is loaded
// with my flipbox demo... I am storing degrees someplace where I know
// I can get them.
$(fx.elem).data('rotate3Di.degrees', direction * degrees);
$(fx.elem).css(
'transform',
'skew(0deg, ' + direction * degrees + 'deg)'
+ ' scale(' + scale + ', 1)'
);
}
// fx.cur() must be monkey patched because otherwise it would always
// return 0 for current rotate3Di value
var proxied = $.fx.prototype.cur;
$.fx.prototype.cur = function () {
if(this.prop == 'rotate3Di') {
var style = $(this.elem).css('transform');
if (style) {
var m = style.match(/, (-?[0-9]+)deg\)/);
if (m && m[1]) {
return parseInt(m[1]);
} else {
return 0;
}
}
}
return proxied.apply(this, arguments);
}
$.fn.rotate3Di = function (degrees, duration, options) {
if (typeof duration == 'undefined') {
duration = 0;
}
if (typeof options == 'object') {
$.extend(options, {duration: duration});
} else {
options = {duration: duration};
}
if (degrees == 'toggle') {
// Yes, jQuery has the toggle() event but that's only good for
// clicks, and likewise hover() is only good for mouse in/out.
// What if you want to toggle based on a timer or something else?
if ($(this).data('rotate3Di.flipped')) {
degrees = 'unflip';
} else {
degrees = 'flip';
}
}
if (degrees == 'flip') {
$(this).data('rotate3Di.flipped', true);
var direction = -1;
if (
typeof options == 'object'
&& options['direction']
&& options['direction'] == 'clockwise'
) {
direction = 1;
}
degrees = direction * 180;
} else if (degrees == 'unflip') {
$(this).data('rotate3Di.flipped', false);
degrees = 0;
}
var d = $(this).data('rotate3Di.degrees') || 0;
$(this).data(
'rotate3Di.prevScale',
calcRotate3Di.scale(calcRotate3Di.degrees(d))
);
$(this).animate({rotate3Di: degrees}, options);
}
})(jQuery);
$.fn.LogOut = function () {
///
/// Logout of Site for Users
///
$(".logout").click( function() {
var page = $(this).attr('href').split(/\?/)[1];
$.ajax({
type: 'POST',
url: '/wp-content/plugins/profiler/logout.php',
data: page,
success: function(content) {
$('.logout').html(content); // replace
window.location.replace("http://shibuya246.com/about");
},
failure: function(content) {
$('.logout').html("error occured");
}
});
return false; // to stop link
});
};
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
///
(function($) {
$.fn.addMenu = function(options) {
}
$.fn.annotateImage = function(options) {
///
/// Creates annotations on the given image.
/// Images are loaded from the "getUrl" propety passed into the options.
///
this.hover(function() {
// Add the canvas
var currentId = $(this).attr('id');
//alert(currentId);
var id = currentId.split('-');
id = id[1];
//alert(id);
if (id)
{
var image = this;
this.image = $(this);
this.notes = new Array();
this.mode = 'view';
this.id = id;
this.editable = true;
this.canvas = $('
');
this.canvas.children('.image-annotate-exif').hide();
this.canvas.children('.image-annotate-menu').hide();
this.canvas.children('.image-annotate-edit').hide();
this.canvas.children('.image-annotate-view').hide();
this.image.after(this.canvas);
//alert(this.id);
// Give the canvas and the container their size and background
this.canvas.height(this.image.height());
this.canvas.width(this.image.width());
this.canvas.css('background-image', 'url("' + this.image.attr('src') + '")');
this.canvas.css('background-repeat', 'no-repeat');
this.canvas.css('background-position', 'center');
this.canvas.children('.image-annotate-view, .image-annotate-edit, .image-annotate-exif').height(this.image.height());
this.canvas.children('.image-annotate-view, .image-annotate-edit, .image-annotate-exif').width(this.image.width());
// Add the behavior: hide/show the comments and menu when hovering the picture
this.canvas.hover(function() {
if ($(this).children('.image-annotate-edit').css('display') == 'none') {
$(this).children('.image-annotate-view').show();
$(this).children('.image-annotate-menu').animate({ opacity: "show" }, "slow");
}
}, function() {
$(this).children('.image-annotate-view').hide();
$(this).children('.image-annotate-menu').hide();
});
this.canvas.children('.image-annotate-view').hover(function() {
$(this).show();
}, function() {
$(this).hide();
});
// Hide the original
this.image.hide();
$('image-annotate-canvas-'+id).attr('id','');
this.canvas.attr('id','image-annotate-canvas-'+id);
// Add Notice and Error divs
$('#image-annotate-canvas-'+id).prepend('');
$('#image-annotate-canvas-'+id+'-notice').width(this.image.width()-12); // -12 for padding
$('#image-annotate-canvas-'+id).prepend('');
$('#image-annotate-canvas-'+id+'-error').width(this.image.width()-12);
// Add Menu div
$.fn.annotateImage.ajaxMenuLoad(this);
this.canvas.children('.image-annotate-menu').children('#photoBarContent').children('.photoMenu_ImageID').text("Img #" + id);
// hover over Menu means hover over image
//this.canvas.children('.image-annotate-menu').hover(function() { this.hover; });
$.fn.annotateImage.ajaxLoad(this);
};
});
};
/**
* Plugin Defaults
**/
$.fn.annotateImage.defaults = {
getUrl: '/wp-content/themes/WBear2/js/jquery-image-annotation-1.3/1.3.2/get.php',
saveUrl: '/wp-content/themes/WBear2/js/jquery-image-annotation-1.3/1.3.2/save.php',
deleteUrl: '/wp-content/themes/WBear2/js/jquery-image-annotation-1.3/1.3.2/delete.php',
editable: true,
useAjax: true,
notes: new Array()
};
$.fn.annotateImage.clear = function(image) {
///
/// Clears all existing annotations from the image.
///
for (var i = 0; i < image.notes.length; i++) {
image.notes[image.notes[i]].destroy();
}
image.notes = new Array();
};
$.fn.annotateImage.ajaxLoad = function(image) {
///
/// Loads the annotations from the "getUrl" property passed in on the
/// options object.
///
var item_uid = $('.post').attr('id');
item_uid = item_uid.split('-');
item_uid = item_uid[item_uid.length-1]; // this gets the id of the post from the class that WP adds in
$.ajax({
url: '/wp-content/themes/WBear2/callback.php',
type: 'POST',
data: 'from=image_annotate&action=load&ticks=' + $.fn.annotateImage.getTicks()+'&comment_post_ID='+item_uid+'&item_type=post&image_id='+image.id,
beforeSend: function () {
$.fn.annotateImage.showLoading(image.id);
},
error: function(e) {
$('#image-annotate-canvas-'+image.id+'-notice').hide();
$.fn.annotateImage.showError(image.id, "An error occured loading the image notes.")
},
success: function(data) {
$('#image-annotate-canvas-'+image.id+'-notice').fadeOut(1200);
if(data.ok===false) {
image.notes = new Array();
} else {
image.notes = data;
}
$.fn.annotateImage.load(image);
},
dataType: "json"
});
};
$.fn.annotateImage.ajaxMenuLoad = function(image) {
var menubox = new $.fn.imageMenu(image);
};
$.fn.annotateImage.showError = function(id, msg) {
$('#image-annotate-canvas-'+id+'-error').hide();
$('#image-annotate-canvas-'+id+'-error').html(msg);
$('#image-annotate-canvas-'+id+'-error').fadeIn('slow');
};
$.fn.annotateImage.showLoading = function(id) {
$('#image-annotate-canvas-'+id+'-notice').hide();
$('#image-annotate-canvas-'+id+'-notice').append(' Loading image comments...');
$('#image-annotate-canvas-'+id+'-notice').fadeIn('slow');
};
$.fn.annotateImage.showNotice = function(id, msg) {
$('#image-annotate-canvas-'+id+'-notice').hide();
$('#image-annotate-canvas-'+id+'-notice').text(msg);
$('#image-annotate-canvas-'+id+'-notice').fadeIn('slow');
};
$.fn.annotateImage.load = function(image) {
///
/// Loads the annotations from the notes property passed in on the
/// options object.
///
var product_count = 0; var authornote_count = 0; var comment_count = 0; var people_count = 0;
for (var i = 0; i < image.notes.length; i++) {
if (image.notes[i].type == 'product') { product_count++; }
if (image.notes[i].type == 'people') { people_count++; }
if (image.notes[i].type == 'author-imagenote') { authornote_count++; }
if (image.notes[i].type == '') { comment_count++; }
image.notes[image.notes[i]] = new $.fn.annotateView(image, image.notes[i]);
}
$('#image-annotate-canvas-' + image.id).find('#Note-Products').append( ' (' + product_count + ')' );
$('#image-annotate-canvas-' + image.id).find('#Note-Comments').append( ' (' + comment_count + ')' );
$('#image-annotate-canvas-' + image.id).find('#Note-Author').append( ' (' + authornote_count + ')' );
//$('#Note-People').append( ' (' + people_count + ')' );
};
$.fn.annotateImage.loadExif = function(image) {
///
/// Loads the exif data passed in on the
/// options object.
///
//image.exif = new $.fn.annotateExif(image, parentHREF, exif);
};
$.fn.annotateImage.getTicks = function() {
///
/// Gets a count of the ticks for the current date.
/// This is used to ensure that URLs are always unique and not cached by the browser.
///
var now = new Date();
return now.getTime();
};
$.fn.annotateImage.add = function(image) {
///
/// Adds a note to the image.
///
if (image.mode == 'view') {
image.mode = 'edit';
// Create/prepare the editable note elements
var editable = new $.fn.annotateEdit(image);
$.fn.annotateImage.createSaveButton(editable, image);
$.fn.annotateImage.createCancelButton(editable, image);
}
};
$.fn.annotateImage.addExif = function(image, parentHREF) {
///
/// Adds an exif to the image.
///
// Create/prepare the menu elements
var exifbox = new $.fn.annotateExif(image, parentHREF);
$.fn.annotateImage.createExifCloseButton(exifbox, image);
};
$.fn.annotateImage.createSaveButton = function(editable, image, note) {
///
/// Creates a Save button on the editable note.
///
var ok = $('OK');
ok.click(function() {
var form = $('#image-annotate-edit-form form');
var text = $('#image-annotate-text').val();
$.fn.annotateImage.appendPosition(form, editable)
image.mode = 'view';
// Save via AJAX
var item_uid = $('.post').attr('id');
item_uid = item_uid.split('-');
item_uid = item_uid[item_uid.length-1]; // this gets the id of the post from the class that WP adds in, gets last element on post id
$.ajax({
url: '/wbpro-comments-post.php',
type: 'POST',
data: form.serialize() + 'from=image_annotate&action=add&ticks='+ $.fn.annotateImage.getTicks() + '&comment_post_ID='+item_uid+'&item_type=post&image_id='+image.id,
beforeSend: function () {
$('#image-annotate-canvas-'+image.id+'-error').hide();
$.fn.annotateImage.showNotice(image.id, ' Saving comment...');
},
success: function(data) { // success means it returned some form of json code to us. may be code with custom error msg
//alert(data.error);
//alert(data.msg);
if (data.error === true) {
$('#image-annotate-canvas-'+image.id+'-notice').hide();
$.fn.annotateImage.showError(image.id, data.msg);
}
else {
// append comment to proper place at bottom of page
if(data.comment_parent_id!=0)
{
// reply to other persons comment
var uldata = '
' + data.single_comment + '
';
//alert("parent_id" + data.comment_parent_id);
$('#li-comment-' + data.comment_parent_id).append(uldata);
}
else
{
// new comment
$("#singlecomments").append(data.single_comment);
}
$.fn.annotateImage.showNotice(image.id, data.msg);
$('#image-annotate-canvas-'+image.id+'-notice').fadeOut('slow');
if (data.annotation_id != undefined) {
editable.note.id = data.annotation_id;
}
}
},
error:function (xhr, ajaxOptions, thrownError){
//alert(xhr.responseText);
//alert(thrownError);
$('#image-annotate-canvas-'+image.id+'-notice').hide();
$.fn.annotateImage.showError(image.id, "An error occured.")
},
dataType: "json"
});
// Add to canvas
if (note) {
note.resetPosition(editable, text);
} else {
//editable.note.editable = true;
note = new $.fn.annotateView(image, editable.note)
note.resetPosition(editable, text);
image.notes.push(editable.note);
}
editable.destroy();
});
editable.form.append(ok);
};
$.fn.annotateImage.createCancelButton = function(editable, image) {
///
/// Creates a Cancel button on the editable note.
///
var cancel = $('Cancel');
cancel.click(function() {
editable.destroy();
image.mode = 'view';
$('#image-annotate-canvas-'+image.id+'-notice').hide();
$('#image-annotate-canvas-'+image.id+'-error').hide();
});
editable.form.append(cancel);
};
$.fn.annotateImage.createExifCloseButton = function(exifbox, image) {
image.canvas.find('#photoMenu_Closebutton').click(function() {
image.canvas.find('.image-annotate-exif').hide();
image.mode = 'view';
});
}
$.fn.annotateImage.saveAsHtml = function(image, target) {
var element = $(target);
var html = "";
for (var i = 0; i < image.notes.length; i++) {
html += $.fn.annotateImage.createHiddenField("text_" + i, image.notes[i].text);
html += $.fn.annotateImage.createHiddenField("top_" + i, image.notes[i].top);
html += $.fn.annotateImage.createHiddenField("left_" + i, image.notes[i].left);
html += $.fn.annotateImage.createHiddenField("height_" + i, image.notes[i].height);
html += $.fn.annotateImage.createHiddenField("width_" + i, image.notes[i].width);
}
element.html(html);
};
$.fn.annotateImage.createHiddenField = function(name, value) {
return '<input type="hidden" name="' + name + '" value="' + value + '" /> ';
};
$.fn.imageMenu = function(image) {
///
/// Defines a menu area.
///
this.image = image;
var form = '
';
this.form = form;
image.canvas.children('.image-annotate-menu').prepend(this.form);
$.fn.imageMenu.createPhotoDataLinks(image);
//$('#photoMenu-Puzzle h4').click(function(event) { alert(this.image); $(this.image).puzzle( 100 ); });
//if($.cookie('workingbear_display_name') && $.cookie('workingbear_user_name') ) {
$('.image-annotate-menu #photoMenu_AddComment').click(function(event) {
event.preventDefault();
// This should be done by checking the cookie rather than HTML on the page !!!!!!!!!!!!!!!!!
var LoginName = $("#loginname").html();
if (LoginName == "Hi ")
{
$('#image-annotate-canvas-'+image.id+'-notice').hide();
$.fn.annotateImage.showError(image.id, "You must be a member to leave a comment. Please Login from the menu bar at the top of the page");
}
else
{
$('#image-annotate-canvas-'+image.id+'-error').hide();
$.fn.annotateImage.showNotice(image.id, LoginName + ". You can resize the square and move it around before saving your comment.");
image.canvas.children('.image-annotate-menu').hide();
$.fn.annotateImage.add(image);
}
});
//Add link for Old Button
//this.button = $('Add Note');
//this.button.click(function(event) {
// event.preventDefault();
// $.fn.annotateImage.add(image);
//});
//} else {
// this.button = $('Add Note');
//}
//this.image.parents('.image-wrapper').children('.image-meta').append(this.button);
//this.image.parents('.wp-caption').append(this.button);
};
$.fn.imageMenu.createPhotoDataLinks = function(image) {
///
/// Creats and sets the menu items with photo data
///
this.image = image;
//Get href element if exists for image, check if pointing to flickr
var parentRef = image.image.parent().get(0);
if (parentRef.tagName == 'A' ) {
$(parentRef).attr('id', 'image-annotate-canvas-'+image.id+'-click');
$(parentRef).click( function(e){ e.preventDefault(); return false; } );
var parentHREF = $(parentRef).attr("href");
//alert(parentRef);
var bExists = $("parentRef:contains('flickr.com')");
if ( bExists ) // if the image is linked to flickr.com
{
var box = image.canvas.children('.image-annotate-menu').children('#photoBarContent')
this.box = box;
box.children('#photoMenu-EXIF-'+image.id+'-unclicked').click(function() {
// Make EXIF Box and get data from flickr
$('#image-annotate-canvas-'+image.id+' .image-annotate-exif').show();
$.fn.annotateImage.addExif(image, parentHREF);
box.children('#photoMenu-EXIF-'+image.id+'-unclicked').hide();
box.children('#photoMenu-EXIF-'+image.id+'-clicked').show();
//alert("yes");
});
box.children('#photoMenu-EXIF-'+image.id+'-clicked').click(function() {
// Show already made EXIF Box
image.canvas.children('.image-annotate-exif').show();
});
//image.canvas.children('.image-annotate-menu').children('#photoBarContent').children('#photoMenu-EXIF-clicked').css({ "display" : "block"});
//update and show link to Flickr menu item
box.find('#photoMenu_Flickr a').attr("href", parentHREF);
box.find('#photoMenu_Flickr a').click( function(e){ window.open(parentHREF); return false; } );
box.children('#photoMenu_Flickr').css({ "display" : "block"});
}
}
}
$.fn.imageMenu.prototype.destroy = function() {
///
/// Destroys a Menu area.
///
this.image.canvas.children('.image-annotate-menu').hide();
this.area.resizable('destroy');
this.area.draggable('destroy');
this.area.css('height', '');
this.area.css('width', '');
this.area.css('left', '');
this.area.css('top', '');
this.form.remove();
};
$.fn.annotateExif = function(image, parentHREF, exif) {
///
/// Defines a menu area.
///
this.image = image;
//if (exif) {
// this.exif = exif;
//} else {
var newExif = new Object();
newExif.id = "new";
newExif.top = 340;
newExif.left = 400;
newExif.width = 358;
newExif.height = 265;
newExif.text = "";
this.exif = newExif;
//}
// Set area
var area = image.canvas.children('.image-annotate-exif').children('.image-annotate-exif-area');
this.area = area;
this.area.css('height', this.exif.height + 'px');
this.area.css('width', this.exif.width + 'px');
this.area.css('left', this.exif.left + 'px');
this.area.css('top', this.exif.top + 'px');
var template_url = "/wp-content/themes/WBear2";
// Add the Exif (which we'll load with the form afterwards)
var form = $('
');
var Box = image.canvas.children('.image-annotate-exif').find('#exif_data');
this.box = Box;
this.box.html(this.area);
this.box.children('#exif-div-2').hide(); this.box.children('#exif-div-3').hide(); this.box.children('#exif-div-4').hide();
this.box.find('#click_cameralink_Amazon_US').click(function(){window.open(CameraLink_Amazon_US); return false;});
this.box.find('#click_cameralink_Amazon_JP').click(function(){window.open(CameraLink_Amazon_JP); return false;});
};
})(jQuery);
//JQuery Tooltip ///
////////////////////
/*
* Tooltip script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip5").hover(function(e){
//alert("hi");
this.t = this.title;
this.title = "";
$("body").append("
"+ this.t +"
");
$("#demotip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#demotip").remove();
});
$("a.tooltip5").mousemove(function(e){
$("#demotip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
//JQuery ClearField //
/////////////////
/************************************************************
** Clears a field
** By: Joshua Sowin (fireandknowledge.org)
** HTML:
***********************************************************/
function clearInput(field_id, term_to_clear) {
// Clear input if it matches default value
if (document.getElementById(field_id).value == term_to_clear ) {
document.getElementById(field_id).value = '';
}
// If the value is blank, then put back term
else if (document.getElementById(field_id).value == '' ) {
document.getElementById(field_id).value = term_to_clear;
}
} // end clearSearch()
//JQuery puzzle ////
////////////////////
// Here, we are going to define the jQuery puzzle
// plugin that will create the interface for each
// DIV that contains an image.
jQuery.fn.puzzle = function( intUserSize ){
// Make sure that each of the parent elements
// has a nested IMG tag. We don't want elements
// that lack the image. Once we get those, then
// loop over them to initialize functionality.
return this.filter( ":has( img )" ).each(
function( intI ){
// This is the functionality that will initialize
// the container and img for puzzle. This will only
// be called ONCE the image has been loaded, and once
// per each instance of the target puzzle.
function InitPuzzle(){
var jPiece = null;
var intRowIndex, intColIndex, intI = 0;
// Get the number of columns and rows.
intColumns = Math.floor( jImg.width() / intSize );
intRows = Math.floor( jImg.height() / intSize );
// Get the puzzle width and height based on
// the number of pieces (this may require some
// cropping of the image).
intPuzzleWidth = (intColumns * intSize);
intPuzzleHeight = (intRows * intSize);
// Empty the container element. We don't actually
// want the image inside of it (or any of the
// other elements that might be there).
jContainer.empty();
// Set the container CSS and dimensions.
jContainer
.css(
{
border: "1px solid black",
overflow: "hidden",
display: "block"
}
)
.width( intPuzzleWidth )
.height( intPuzzleHeight )
;
// Check to see how the container is positioned.
// If is relative or absolute, we can keep it,
// but if it is not those, then we need to set
// is to relative explicitly.
if (
(jContainer.css( "position" ) != "relative") &&
(jContainer.css( "position" ) != "absolute")
){
// The container element is not explicitly
// positioned, so position it to be relative.
jContainer.css( "position", "relative" );
}
// Loop over the columns and row to create each
// of the pieces. At this point, we are not going to worry
// about the dimensions of the board - that will happen next.
for (var intRowIndex = 0 ; intRowIndex < intRows ; intRowIndex++){
// For this row, add a new array.
arr2DBoard[ intRowIndex ] = [];
for (var intColIndex = 0 ; intColIndex < intColumns ; intColIndex++){
// Create a new Div tag. We are using a DIV tag as
// opposed to an anchor tag to get around the IE
// bug that has flickering background images on links
// when the browser is not caching images.
jPiece = $( "
" );
// Set the css properties. Since all of the
// pieces have the same background image, they
// all have to have different offset positions.
jPiece
.css(
{
display: "block",
float: "left",
cursor: "pointer",
backgroundImage: "url( '" + jImg.attr( "src" ) + "' )",
backgroundRepeat: "no-repeat",
backgroundPosition: (
(intColIndex * -intSize) + "px " +
(intRowIndex * -intSize) + "px"
),
position: "absolute",
top: ((intSize * intRowIndex) + "px"),
left: ((intSize * intColIndex) + "px")
}
)
.width( intSize )
.height( intSize )
;
// Set the HREF so that the click even registers.
// Then, set up the click handler.
jPiece
.attr( "href", "javascript:void( 0 );" )
.click( PieceClickHandler )
;
// Add the piece to the 2-D representation of the board.
arr2DBoard[ intRowIndex ][ intColIndex ] = jPiece;
// Add to DOM.
jContainer.append( jPiece );
}
}
// Make the last one opaque and give it a special "rel"
// value so that we can easily loacate this one later on.
arr2DBoard[ intRows - 1 ][ intColumns - 1 ]
.css( "opacity", 0 )
.attr( "rel", "empty" )
;
// In order to shuffle the board, we are going to simulate
// a certain number of clicks. This is to ensure that any
// state the board gets into, it is certain that the board
// can get back into a "winning" state.
for (intI = 0 ; intI < 100 ; intI++){
// Select the piece that we want to "click".
// We will do this by randomly selecting a row
// and a column to click.
jPiece = arr2DBoard[
(Math.floor( Math.random() * intRows * intRows ) % intRows)
][
(Math.floor( Math.random() * intColumns * intColumns ) % intColumns)
];
// Simulate the click.
jPiece.click();
}
// Now that we have initialized, turn on the animation.
blnShowAnimation = true;
// Return out.
return( true );
}
// This sets up the click handler for the pieces.
function PieceClickHandler( objEvent ){
// Get the jQuery objects for the piece clicked as
// well as the empty square within the board.
var jPiece = $( this );
var jEmpty = jContainer.find( "div[ rel = 'empty' ]" );
// Get the CSS position for the current piece.
var objPiecePos = {
top: parseInt( jPiece.css( "top" ) ),
left: parseInt( jPiece.css( "left" ) )
};
// Get the CSS position for the empty piece
var objEmptyPos = {
top: parseInt( jEmpty.css( "top" ) ),
left: parseInt( jEmpty.css( "left" ) )
};
var intRowIndex, intColIndex = 0;
// Check to see if we are in the middle of an animation.
// If we are, then just return out since we don't want
// to update values yet.
if (blnInAnimation){
return( false );
}
// Blur the current piece to get rid of the dotted box.
jPiece.blur();
// Base on the CSS of the current piece and the size of
// each of the pieces, we can calculate the row and column
// of the given piece.
objPiecePos.row = (objPiecePos.top / intSize);
objPiecePos.col = (objPiecePos.left / intSize);
// Base on the CSS of the empty piece and the size of
// each of the pieces, we can calculate the row and column
// of the given piece.
objEmptyPos.row = (objEmptyPos.top / intSize);
objEmptyPos.col = (objEmptyPos.left / intSize);
// Now that we have the row and column of the target piece
// as well as the empty piece, we can check to see if anything
// needs to be moved. Remember, we ONLY need to move pieces
// if the target piece and the empty piece share a row
// or a column.
// Check to see if they share the same row.
if (objPiecePos.row == objEmptyPos.row){
// Check to see which direction we are moving in.
if (objPiecePos.col > objEmptyPos.col){
// Move left.
for (intColIndex = objEmptyPos.col ; intColIndex < objPiecePos.col ; intColIndex++){
arr2DBoard[ objPiecePos.row ][ intColIndex ] = arr2DBoard[ objPiecePos.row ][ intColIndex + 1 ];
}
// Put empty in place.
arr2DBoard[ objPiecePos.row ][ intColIndex ] = jEmpty;
} else {
// Move right.
for (intColIndex = objEmptyPos.col ; intColIndex > objPiecePos.col ; intColIndex--){
arr2DBoard[ objPiecePos.row ][ intColIndex ] = arr2DBoard[ objPiecePos.row ][ intColIndex - 1 ];
}
// Put empty in place.
arr2DBoard[ objPiecePos.row ][ intColIndex ] = jEmpty;
}
// Update the CSS of the entire row (to make it easy).
for (intColIndex = 0 ; intColIndex < intColumns ; intColIndex++){
if (blnShowAnimation){
// Flag that an animation is about to being.
blnInAnimation = true;
// Animate the CSS move.
arr2DBoard[ objPiecePos.row ][ intColIndex ].animate(
{
left: ((intSize * intColIndex) + "px")
},
200,
function(){
blnInAnimation = false;
}
);
} else {
// Update the CSS for the given piece.
arr2DBoard[ objPiecePos.row ][ intColIndex ].css(
"left",
((intSize * intColIndex) + "px")
);
}
}
// Check to see if we should move vertically.
} else if (objPiecePos.col == objEmptyPos.col){
// Check to see which direction we are moving in.
if (objPiecePos.row > objEmptyPos.row){
// Move up.
for (intRowIndex = objEmptyPos.row ; intRowIndex < objPiecePos.row ; intRowIndex++){
arr2DBoard[ intRowIndex ][ objPiecePos.col ] = arr2DBoard[ intRowIndex + 1 ][ objPiecePos.col ];
}
// Put empty in place.
arr2DBoard[ intRowIndex ][ objPiecePos.col ] = jEmpty;
} else {
// Move down.
for (intRowIndex = objEmptyPos.row ; intRowIndex > objPiecePos.row ; intRowIndex--){
arr2DBoard[ intRowIndex ][ objPiecePos.col ] = arr2DBoard[ intRowIndex - 1 ][ objPiecePos.col ];
}
// Put empty in place.
arr2DBoard[ intRowIndex ][ objPiecePos.col ] = jEmpty;
}
// Update the CSS of the entire column (to make it easy).
for (intRowIndex = 0 ; intRowIndex < intRows ; intRowIndex++){
if (blnShowAnimation){
// Flag that an animation is about to being.
blnInAnimation = true;
// Animate the CSS move.
arr2DBoard[ intRowIndex ][ objPiecePos.col ].animate(
{
top: ((intSize * intRowIndex) + "px")
},
200,
function(){
blnInAnimation = false;
}
);
} else {
// Update the CSS for the given piece.
arr2DBoard[ intRowIndex ][ objPiecePos.col ].css(
"top",
((intSize * intRowIndex) + "px")
);
}
}
}
// Return false so nothing happens.
return( false );
}
// ASSERT: At this point, we have defined all the class
// methods for this plugin instance. Now, we can act on
// the instance properties and call methods.
// Get a jQUery reference to the container.
var jContainer = $( this );
// Get a jQuery reference to the first image
// - this is the one that we will use to make
// the image puzzle.
var jImg = jContainer.find( "img:first" );
// This is the array that will hold the 2-dimentional
// representation of the board.
var arr2DBoard = [];
// The height and width of the puzzle.
var intPuzzleWidth = 0;
var intPuzzleHeight = 0;
// The width / height of each piece. This can be overriden
// by the user when the initialize the puzzle plug-in.
var intSize = intUserSize || 100;
// The number of columns that are in the board.
var intColumns = 0;
// The number of rows that in the board.
var intRows = 0;
// Flag for wether or not to show animation.
var blnShowAnimation = false;
// Flag for wether or not an animation is in the midst. We
// are going to need this to prevent further clicking during
// and anmiation sequence.
var blnInAnimation = false;
// Check check to make sure that the size value is valid.
// Since this can be overridden by the user, we want to
// make sure that it is not crazy.
intSize = Math.floor( intSize );
if ((intSize < 40) || (intSize > 300)){
intSize = 100;
}
// Check to see if the image has complietely
// loaded (for some reason, this does NOT
// work with the attr() function). If the
// image is complete, call Init right away.
// If it has not loaded, then set an onload
// handler for initialization.
if ( jImg[ 0 ].complete ){
// The image has loaded so call Init.
InitPuzzle();
} else {
// The image has not loaded so set an
// onload event handler to call Init.
jImg.load(
function(){
InitPuzzle();
}
);
}
}
);
/*
* Copyright 2007-2009 by Tobia Conforto
*
* This program is free software; you can redistribute it and/or modify it under the terms of the GNU General
* Public License as published by the Free Software Foundation; either version 2 of the License, or (at your
* option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the
* implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
* for more details.
*
* You should have received a copy of the GNU General Public License along with this program; if not, write to
* the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*
* Versions: 0.1 2007-08-19 Initial release
* 2008-08-21 Re-released under GPL v2
* 0.1.1 2008-09-18 Compatibility with prototype.js
* 0.2 2008-10-15 Linkable images, contributed by Tim Rainey
* 0.3 2008-10-22 Added option to repeat the animation a number of times, then stop
* 0.3.1 2008-11-11 Better error messages
* 0.3.2 2008-11-11 Fixed a couple of CSS bugs, contributed by Erwin Bot
* 0.3.3 2008-12-14 Added onclick option
* 0.3.4 2009-03-12 Added shuffle option, contributed by Ralf Santbergen
* 0.3.5 2009-03-12 Fixed usage of href parameter in 'Ken Burns' mode
* 0.3.6 2009-04-16 Added alt option
* 0.3.7 2009-05-14 Fixed bug when container div doesn't have a position CSS attribute
*/
jQuery.fn.crossSlide = function(opts, plan) {
var self = this,
self_width = this.width(),
self_height = this.height();
// generic utilities
function format(str) {
for (var i = 1; i < arguments.length; i++)
str = str.replace(new RegExp('\\{' + (i-1) + '}', 'g'), arguments[i]);
return str;
}
function abort() {
arguments[0] = 'crossSlide: ' + arguments[0];
throw format.apply(null, arguments);
}
// first preload all the images, while getting their actual width and height
(function(proceed) {
var n_loaded = 0;
function loop(i, img) {
// for (i = 0; i < plan.length; i++) but with independent var i, img (for the closures)
img.onload = function(e) {
n_loaded++;
plan[i].width = img.width;
plan[i].height = img.height;
if (n_loaded == plan.length)
proceed();
}
img.src = plan[i].src;
if (i + 1 < plan.length)
loop(i + 1, new Image());
}
loop(0, new Image());
})(function() { // then proceed
// utility to parse "from" and "to" parameters
function parse_position_param(param) {
var zoom = 1;
var tokens = param.replace(/^\s*|\s*$/g, '').split(/\s+/);
if (tokens.length > 3) throw new Error();
if (tokens[0] == 'center')
if (tokens.length == 1)
tokens = ['center', 'center'];
else if (tokens.length == 2 && tokens[1].match(/^[\d.]+x$/i))
tokens = ['center', 'center', tokens[1]];
if (tokens.length == 3)
zoom = parseFloat(tokens[2].match(/^([\d.]+)x$/i)[1]);
var pos = tokens[0] + ' ' + tokens[1];
if (pos == 'left top' || pos == 'top left') return { xrel: 0, yrel: 0, zoom: zoom };
if (pos == 'left center' || pos == 'center left') return { xrel: 0, yrel: .5, zoom: zoom };
if (pos == 'left bottom' || pos == 'bottom left') return { xrel: 0, yrel: 1, zoom: zoom };
if (pos == 'center top' || pos == 'top center') return { xrel: .5, yrel: 0, zoom: zoom };
if (pos == 'center center') return { xrel: .5, yrel: .5, zoom: zoom };
if (pos == 'center bottom' || pos == 'bottom center') return { xrel: .5, yrel: 1, zoom: zoom };
if (pos == 'right top' || pos == 'top right') return { xrel: 1, yrel: 0, zoom: zoom };
if (pos == 'right center' || pos == 'center right') return { xrel: 1, yrel: .5, zoom: zoom };
if (pos == 'right bottom' || pos == 'bottom right') return { xrel: 1, yrel: 1, zoom: zoom };
return {
xrel: parseInt(tokens[0].match(/^(\d+)%$/)[1]) / 100,
yrel: parseInt(tokens[1].match(/^(\d+)%$/)[1]) / 100,
zoom: zoom
};
}
// utility to compute the css for a given phase between p.from and p.to
// phase = 1: begin fade-in, 2: end fade-in, 3: begin fade-out, 4: end fade-out
function position_to_css(p, phase) {
switch (phase) {
case 1:
var pos = 0;
break;
case 2:
var pos = fade_ms / (p.time_ms + 2 * fade_ms);
break;
case 3:
var pos = 1 - fade_ms / (p.time_ms + 2 * fade_ms);
break;
case 4:
var pos = 1;
break;
}
return {
left: Math.round(p.from.left + pos * (p.to.left - p.from.left )),
top: Math.round(p.from.top + pos * (p.to.top - p.from.top )),
width: Math.round(p.from.width + pos * (p.to.width - p.from.width )),
height: Math.round(p.from.height + pos * (p.to.height - p.from.height))
};
}
// check global params
if (! opts.fade)
abort('missing fade parameter.');
if (opts.speed && opts.sleep)
abort('you cannot set both speed and sleep at the same time.');
// conversion from sec to ms; from px/sec to px/ms
var fade_ms = Math.round(opts.fade * 1000);
if (opts.sleep)
var sleep = Math.round(opts.sleep * 1000);
if (opts.speed)
var speed = opts.speed / 1000,
fade_px = Math.round(fade_ms * speed);
// set container css
self.empty().css({
overflow: 'hidden',
padding: 0
});
if (! /^(absolute|relative|fixed)$/.test(self.css('position')))
self.css({ position: 'relative' });
if (! self.width() || ! self.height())
abort('container element does not have its own width and height');
// random sorting
if (opts.shuffle)
plan.sort(function() {
return Math.random() - 0.5;
});
// prepare each image
for (var i = 0; i < plan.length; ++i) {
var p = plan[i];
if (! p.src)
abort('missing src parameter in picture {0}.', i + 1);
if (speed) { // speed/dir mode
// check parameters and translate speed/dir mode into full mode (from/to/time)
switch (p.dir) {
case 'up':
p.from = { xrel: .5, yrel: 0, zoom: 1 };
p.to = { xrel: .5, yrel: 1, zoom: 1 };
var slide_px = p.height - self_height - 2 * fade_px;
break;
case 'down':
p.from = { xrel: .5, yrel: 1, zoom: 1 };
p.to = { xrel: .5, yrel: 0, zoom: 1 };
var slide_px = p.height - self_height - 2 * fade_px;
break;
case 'left':
p.from = { xrel: 0, yrel: .5, zoom: 1 };
p.to = { xrel: 1, yrel: .5, zoom: 1 };
var slide_px = p.width - self_width - 2 * fade_px;
break;
case 'right':
p.from = { xrel: 1, yrel: .5, zoom: 1 };
p.to = { xrel: 0, yrel: .5, zoom: 1 };
var slide_px = p.width - self_width - 2 * fade_px;
break;
default:
abort('missing or malformed "dir" parameter in picture {0}.', i + 1);
}
if (slide_px <= 0)
abort('picture number {0} is too short for the desired fade duration.', i + 1);
p.time_ms = Math.round(slide_px / speed);
} else if (! sleep) { // full mode
// check and parse parameters
if (! p.from || ! p.to || ! p.time)
abort('missing either speed/sleep option, or from/to/time params in picture {0}.', i + 1);
try {
p.from = parse_position_param(p.from)
} catch (e) {
abort('malformed "from" parameter in picture {0}.', i + 1);
}
try {
p.to = parse_position_param(p.to)
} catch (e) {
abort('malformed "to" parameter in picture {0}.', i + 1);
}
if (! p.time)
abort('missing "time" parameter in picture {0}.', i + 1);
p.time_ms = Math.round(p.time * 1000)
}
// precalculate left/top/width/height bounding values
if (p.from)
jQuery.each([ p.from, p.to ], function(i, from_to) {
from_to.width = Math.round(p.width * from_to.zoom);
from_to.height = Math.round(p.height * from_to.zoom);
from_to.left = Math.round((self_width - from_to.width) * from_to.xrel);
from_to.top = Math.round((self_height - from_to.height) * from_to.yrel);
});
// append the image (or anchor) element to the container
var elm;
if (p.href)
elm = jQuery(format('', p.href, p.src));
else
elm = jQuery(format('', p.src));
if (p.onclick)
elm.click(p.onclick);
if (p.alt)
elm.find('img').attr('alt', p.alt);
elm.appendTo(self);
}
speed = undefined; // speed mode has now been translated to full mode
// find images to animate and set initial css attributes
var imgs = self.find('img').css({
position: 'absolute',
visibility: 'hidden',
top: 0,
left: 0,
border: 0
});
// show first image
imgs.eq(0).css({ visibility: 'visible' });
if (! sleep)
imgs.eq(0).css(position_to_css(plan[0], 2));
// create animation chain
var countdown = opts.loop;
function create_chain(i, chainf) {
// building the chain backwards, or inside out
if (i % 2 == 0) {
if (sleep) {
// still image sleep
var i_sleep = i / 2,
i_hide = (i_sleep - 1 + plan.length) % plan.length,
img_sleep = imgs.eq(i_sleep),
img_hide = imgs.eq(i_hide);
var newf = function() {
img_hide.css('visibility', 'hidden');
setTimeout(chainf, sleep);
};
} else {
// single image slide
var i_slide = i / 2,
i_hide = (i_slide - 1 + plan.length) % plan.length,
img_slide = imgs.eq(i_slide),
img_hide = imgs.eq(i_hide),
time = plan[i_slide].time_ms,
slide_anim = position_to_css(plan[i_slide], 3);
var newf = function() {
img_hide.css('visibility', 'hidden');
img_slide.animate(slide_anim, time, 'linear', chainf);
};
}
} else {
if (sleep) {
// still image cross-fade
var i_from = Math.floor(i / 2),
i_to = Math.ceil(i / 2) % plan.length,
img_from = imgs.eq(i_from),
img_to = imgs.eq(i_to),
from_anim = {},
to_init = { visibility: 'visible' },
to_anim = {};
if (i_to > i_from) {
to_init.opacity = 0;
to_anim.opacity = 1;
} else {
from_anim.opacity = 0;
}
var newf = function() {
img_to.css(to_init);
if (from_anim.opacity != undefined)
img_from.animate(from_anim, fade_ms, 'linear', chainf);
else
img_to.animate(to_anim, fade_ms, 'linear', chainf);
};
} else {
// cross-slide + cross-fade
var i_from = Math.floor(i / 2),
i_to = Math.ceil(i / 2) % plan.length,
img_from = imgs.eq(i_from),
img_to = imgs.eq(i_to),
from_anim = position_to_css(plan[i_from], 4),
to_init = position_to_css(plan[i_to], 1),
to_anim = position_to_css(plan[i_to], 2);
if (i_to > i_from) {
to_init.opacity = 0;
to_anim.opacity = 1;
} else {
from_anim.opacity = 0;
}
to_init.visibility = 'visible';
var newf = function() {
img_from.animate(from_anim, fade_ms, 'linear');
img_to.css(to_init);
img_to.animate(to_anim, fade_ms, 'linear', chainf);
};
}
}
// if the loop option was requested, push a countdown check
if (opts.loop && i == plan.length * 2 - 2) {
var newf_orig = newf;
newf = function() {
if (--countdown) newf_orig();
}
}
if (i > 0)
return create_chain(i - 1, newf);
else
return newf;
}
var animation = create_chain(plan.length * 2 - 1, function() { return animation(); });
// start animation
animation();
});
return self;
};
}
Loading image comments...');
$('#image-annotate-canvas-'+id+'-notice').fadeIn('slow');
};
$.fn.annotateImage.showNotice = function(id, msg) {
$('#image-annotate-canvas-'+id+'-notice').hide();
$('#image-annotate-canvas-'+id+'-notice').text(msg);
$('#image-annotate-canvas-'+id+'-notice').fadeIn('slow');
};
$.fn.annotateImage.load = function(image) {
/// 
'
+ '
' +
' ' +
'View this camera at Amazon.com
' +
' ' +
'View this lens at Amazon.com