/**
* @author jcrane
* version 1.1 // OO
* this is a refactoring of the articleTabs function for indulge
*/
// creates tabs for article, photos and videos on story detail pages
var ind = {
articleTabs: function(){
var href, hasPhotos, hasMap, hasVideo;
var context = this;
this.videoTab = 'article_videos';
this.photoTab = 'article_photos';
this.mapTab = 'article_map';
this.commentsTab = 'article_comments';
var $sc = $('#story_content_container');
var $sc_tabs = $sc.tabs();
var tabHash = window.location.hash.replace('#','');
var selected = $sc.tabs('option', 'selected');
var matches = $.map($sc.find('.tab_links li a'), function(elem, index) {
return ($(elem).attr('href')).replace('#','');
});
this.doTab = function(href){
// debugger;
// console.time("doTab timer");
if (!href) {
href = tabHash;
}
if (href.match(context.photoTab)) {
if (hasPhotos !== 'true') {
// console.log('showing photos');
ind.makeGallery(600, 400);
hasPhotos = 'true';
}
// else don't do anything because we already have our photos
}
else if (href.match(context.videoTab)) {
if (hasVideo !== 'true') {
// console.log('showing video');
// get the media id from the name attribute of the embedded_video div, which is set in the template
media_id = $('#embedded_video').attr('name');
// get the main video and the latest videos stack
getVmixVideoDetail(media_id);
// getVmixVideoDetailStack();
// variable to see if video already loaded, so we don't load each time the tab is selected
var hasVideo = 'true';
// $('#photo_asset_thumb').hide();
}
}
else if (href.match(context.mapTab)) {
// console.log('map matched');
if (hasMap !== 'true') {
// console.log('showing map');
// get the api key from the name attribute of the map, which is set in the template
api_key = $('#article_map .map').attr('name');
// load the maps api, which will callback to the function to the load the maps
initMapLoader(api_key);
// variable to see if map is already loaded, so we don't load it each time the tab is selected
var hasMap = 'true';
}
// else don't do anything because we already have our map
}
// console.timeEnd("doTab timer");
};
if(tabHash.length) {
// console.time("tab hash timer");
if ($.inArray(tabHash, matches) != -1) {
context.doTab(tabHash);
}
// console.timeEnd("tab hash timer");
}
$('.tab_links li').addClass('ui-corner-all');
ind.selectTabs();
},
// TODO -> review this function to do same thing as we've done above
selectTabs : function() {
var context = this;
var hrefs = [];
var $story_content_tabs = $('#story_content_container').tabs();
// toyed with firing doTab function on tabselect rather than tabshow, but gallery js relies on offsetWidth, which depends on elements being visible. tabshow waits to fire until they are visible
$story_content_tabs.bind('tabsshow', function(event, ui){
href = ui.tab.href.split('#');
href1 = href[1];
// console.time('match 3 times on or');
if ((href1 == context.photoTab) || (href1 == context.videoTab) || (href1 == context.mapTab)) {
var n = $.inArray(href1, hrefs);
if (n == -1) {
hrefs.push(href1);
context.doTab(href[1]);
}
}
// console.timeEnd('match 3 times on or');
/* console.time('match on $array');
allTabs = [context.photoTab, context.videoTab, context.mapTab];
if ($.inArray(href1, allTabs) != -1) {
var n = $.inArray(href1, hrefs);
if (n == -1) {
hrefs.push(href1);
context.doTab(href[1]);
}
}
console.timeEnd('match on $array'); */
});
$('#story_assets .photo_link, #photo_asset_thumb img').click(function() {
$story_content_tabs.tabs('select','#article_photos');
return false;
});
$('#story_body .map').click(function() {
$story_content_tabs.tabs('select','#article_map');
return false;
});
$('#video_asset_thumb').click(function() {
$story_content_tabs.tabs('select','#article_videos');
return false;
});
},
makeGallery : function(photo_width, photo_height, np_top) {
// console.log('makeGallery next and prev top is ' + np_top);
$('#in_photos').adGallery({
width: photo_width ? photo_width : 350, // Width of the image, set to false and it will read the CSS width
height: photo_height ? photo_height : 264, // Height of the image, set to false and it will read the CSS height
next_and_prev_top: np_top ? np_top : false,
display_back_and_forward: true, // Are you allowed to scroll the thumb list?
scroll_jump: 0, // If 0, it jumps the width of the container
slideshow: {
enable: false
},
effect: 'none', // or 'slide-vert', 'resize', 'fade', 'none' or false
// All callbacks has the AdGallery objects as 'this' reference
callbacks: {
// Executes right after the internal init, can be used to choose which images
// you want to preload
init: function() {
// preloadAll uses recursion to preload each image right after one another
this.preloadAll();
var caption_toggle = false;
ind.replaceAds();
},
afterImageVisible: function(){
ind.makePhotoModal();
},
beforeImageVisible: function(new_image, old_image) {
$('.ad-image-modal').dialog('destroy');
$('.ad-image-modal').remove();
}
}
});
$('#in_photos .show-more-caption').live('click', function() {
var ct = $(this).text();
// console.log(ct);
if (ct == 'More') {
$(this).text('Less').siblings('.more-caption').removeClass('hide');
}
else {
$(this).text('More').siblings('.more-caption').addClass('hide');
}
return false;
})
// $('.photo-story .ad-controls').insertAfter('.ad-next').show();
},
makePhotoModal : function(tested) {
var new_height, new_width;
$d_photo = $('.ad-image img', '#in_photos');
new_src = $d_photo.attr('src');
if (!new_src.match(/sff/)) {
new_src = new_src.replace('standalone', 'fullscreen')
photo_width = $d_photo.attr('width');
photo_height = $d_photo.attr('height');
if (photo_width > photo_height) {
new_height_x = 1000 / photo_width;
new_height = photo_height * new_height_x;
new_width = '1000';
}
else {
new_width_x = 700 / photo_height;
new_width = photo_width * new_width_x;
new_height = '700';
}
$('').appendTo('#in_photos')
$d_photo.clone().attr('src', new_src).attr('width', new_width).attr('height', new_height).appendTo('.ad-image-modal');
$('.ad-image-modal').dialog({
autoOpen: false,
dialogClass: 'ind-dialog',
modal: true,
open: function(event, ui) {
$(this).siblings('.ui-dialog-titlebar').children('a').children('span').addClass('ind-dialog-close');
// $(this).parents('.ui-dialog').before('');
},
close: function(event, ui) {
// $('#dialog_close').remove();
},
width: 1020,
resizable: false
});
$d_photo.click(function(){
$('.ad-image-modal').dialog('open');
})
}
},
topCycle : function(containerID) {
$('#' + containerID).cycle({
fx: 'fade',
speed: 'fast',
// next: '.in_top_card',
timeout: 0,
pager: '#in_card_nav',
prev: '.in_card_nav_prev',
next: '.in_card_nav_next',
pagerAnchorBuilder: function(idx, slide) {
return '' + (idx + 1) + '';
}
});
},
adInjector : function(width, height, ad_src, container, stats){
this.ad = document.createElement('IFRAME');
this.ad.width = width ? width : '300';
this.ad.height = height ? height : '250';
this.ad.scrolling = 'no';
this.ad.frameBorder = '0';
this.ad.marginheight = '0';
this.ad.marginwidth = '0';
this.ad.align = 'left';
this.ad.src = ad_src;
this.container = container;
this.stats = stats;
},
replaceAds : function() {
$('.ad-thumb-list a').add('.ad-prev').add('.ad-next').click(function() {
// console.log('thumb clicked');
rec0.injectAd();
rec1.injectAd();
rec0.addStats;
})
}
};
ind.adInjector.prototype.injectAd = function() {
$(this.container).html(this.ad); // .addClass('injected');
}
ind.adInjector.prototype.addStats = function() {
console.log('statsend_pre');
if (this.stats != 'undefined') {
console.log('statsend in if');
s.pageName = "AJAX: " + mistats.pagename;
mistats_resend();
s.pageName = null;
}
}