$(document).ready( function() {
var PORTRAIT_DIR = '/static/guide_portraits/850h/'; // with trailing slash
/// fetch logo specs from API
$.getJSON( '/api/guides/it', function(data) {
var guides = data;
var guideIds = Object.keys(guides);
console.log(guides);
// fill some tiles
$('.cell-guide-photo').each( function(ix,cell) {
fillTile( $(cell), preparePhoto( getRandomGuide() ) );
});
$('.cell-guide-text').each( function(ix,cell) {
fillTile( $(cell), prepareText( getRandomGuide() ) );
});
// functions
function getRandomGuide() {
var randomId = guideIds[ Math.floor( Math.random() * guideIds.length) ];
return guides[randomId];
}
function preparePhoto( guide) {
var src = PORTRAIT_DIR + guide.photo;
return $(''
);
}
function prepareText( guide) {
return $(''+ guide.quote +'
');
}
function fillTile( tgt, html) {
if( !tgt) {
console.error('did not get a target '+tgt);
return;
}
tgt.css('height','100%').css('width','100%');
tgt.html(html);
if( html) {
html = hoverize( linkize(html) );
}
}
function linkize(el) {
// NOTE: needs already to be attached to DOM!
return el.wrap('');
}
function hoverize(el) {
return el.css('opacity',0.5)
.hover( function(ev) {
$(ev.target).css('opacity',1);
}, function(ev) {
$(ev.target).css('opacity',0.5);
});
}
});
});