/** * jQuery plugin to activate mouseover summary on a given program title * The summary is controlled with the jQuery.hover function * The hover() function takes params over and out which are both function calls * * The avoid the summary disappearing just because the user moves the cursor (for some browsers even though still hovering over the same element), * or if the user moves mouse from title to summary box we use timeouts to control the visibility of the summary * The showing and hiding are delayed with 500 mili seconds. * If the user has moved its mouse away in these 500 mili seconds, we'll clear the timeout to avoid showing the summary afterwords. * This is all handled from the functions in the __ontv_summary object. */ //to access favorite channels or default channels in horizontal.js var standerdChannels='10769;10770;10771;10772;10062;10774;10778'; jQuery.fn.summary = function() { // On hovering over the element, show program summary $(this).hover(function () { // The hovering is delayed with 500 mili seconds. This is all handled by clearTimeoutHide, setTimeoutHide, clearTimeoutShow and setTimeoutShow __ontv_summary.clearTimeoutHide(); // If summary for this element isn't visible, then start time out or else clear if($("#summary[programid="+ $(this).attr("programid") +"]:visible").length == 0) { __ontv_summary.setTimeoutShow(this); } else { __ontv_summary.clearTimeoutShow(); } },function() { __ontv_summary.setTimeoutHide(); }); } /** * defines a "helper" object with a number of help functions * * timeoutHide: * Holds the current setTimeout instance for the hiding effect * clearTimeoutHide: * Clears the current setTimeout instance for the hiding effect and also any show timeouts * setTimeoutHide: * Starts timeout for hiding a summary * timeoutShow: * Holds the current setTimeout instance for the showing effect * clearTimeoutHide: * Clears the current setTimeout instance for the showing effect and there by annulling the showing * setTimeoutHide: * Starts timeout for showing a summary * show * Shows the actual summary * loaded * Caches summaries shown earlier * setDetails * Helper function for show() funciton. This sets the summary data in the summary element * getTitle * Finds the title of the summary shown just know * date * Formats a date unix timestamp to a string format (a bit like phps date) */ var __ontv_summary = { timeoutHide:undefined, clearTimeoutHide:function() { clearTimeout(__ontv_summary.timeoutHide); __ontv_summary.timeoutHide = undefined; __ontv_summary.clearTimeoutShow(); }, setTimeoutHide:function() { if(typeof(__ontv_summary.timeoutHide) == "undefined") __ontv_summary.timeoutHide = setTimeout(function() {$("#summary").fadeOut();__ontv_summary.clearTimeoutShow();}, 500); }, timeoutShow:undefined, clearTimeoutShow:function() { clearTimeout(__ontv_summary.timeoutShow); __ontv_summary.timeoutShow = undefined; }, setTimeoutShow:function(elm) { if(typeof(__ontv_summary.timeoutShow) == "undefined") __ontv_summary.timeoutShow = setTimeout(function(){__ontv_summary.show(elm);}, 750); }, show:function(elm) { if(isNaN($(elm).attr('programid')) || $(elm).attr('programid') < 1) return; elmPos = $(elm).offset(); pos = $(elm).offset(); pos['top'] += 1; pos['left'] -= 49; // finds position of the left most adspace - we can't allow the summary to be laying over this // for TimeFor.TV Pro users we'll instead compare to screen width adsPlacement = $("#ad160x600t").offset(); mostLeft = adsPlacement["left"]; // we'll give mostLeft 10px less to give some spacing (but 3px is shadow, so just 7) mostLeft -= 7; // and mostLeft needs to take the width of the summary box into account mostLeft -= $("#summary").width(); // if our calculated position is higher than mostLeft, we'll overrule. if(pos['left'] > mostLeft) { pos['left'] = mostLeft; } // if our calculated left is less than 0, we'll give it 10px if(pos['left'] < 5) { pos['left'] = 5; } // positioning the mouseover position arrow $("#summaryTopFrame").css('left',(Math.abs(pos['left'] - elmPos['left'])+5) +'px'); // displays summary and sets id $("#summary").css('left',pos['left']+'px').css('top',(pos['top']+$(elm).height())+'px').fadeIn(); $("#summary").attr('programid', $(elm).attr('programid')); $("#summaryTitle").html(__ontv_summary.getTitle(elm)); // now we'll have to load the actual summary $("#summaryDetails").html('

As TimeFor.TV Pro subscriber you\'ll here be able to read a program summary and get directly access to plan the program, search the title, like it, etc.

TimeFor.TV Pro is priced at EUR 15 an year and gives you a bunch of options.
Read more under "Products" in the menu.

'); $("#summaryLink").attr('href','/products/subscriptions'); // if the user hovers over the actual summary box, we'll also handle this, as if it was on the title // since the user needs to be able to use the functions inside the summary box $("#summary").hover(function() { __ontv_summary.clearTimeoutHide(); },function() { __ontv_summary.setTimeoutHide(); }); }, loaded:[], setDetails:function(summary,callConvertDateTime) { if(callConvertDateTime) summary = convertDateTime(summary); /** * The summary is appended to the summary box. * The actual summary box HTML is created on document ready later in this file… */ var about = ''; // Cuts summary length to max 300 chars if(summary.about!=undefined) if(summary.about.$.length > 300) about = summary.about.$.substr(0,300) + '...'; else about = summary.about.$; else about = ''; // appends time + description to summary box html = ''; // image if(typeof(summary.img) != 'undefined') { html += ''; } // time html += '

'+ __ontv_summary.date("H:i", summary.start.$) +' - '+ __ontv_summary.date("H:i", summary.end.$) + (summary.teaser?' - '+ summary.teaser.$ : '') +'

'; // description html += '

'+ about + (summary.episode?'

Episode: '+ summary.episode.$ +'':'') +'

'; $("#summaryDetails").html(html); $("#summaryTitle").html(summary.title.$); if(summary.link!=undefined) $("#summaryLink").attr('href',summary.link.$); // If the user has indicated that she likes it, then show this if(summary.like!=undefined && summary.like.$ == 'TRUE') { $("#__summaryLikeTxt").css('background-image', 'url(/imgs/icons/likes.png)'); $("#__summaryLikeTxt").html('Don\'t recommend'); } else { $("#__summaryLikeTxt").css('background-image', ''); //empty will make it default to original css stylesheet value $("#__summaryLikeTxt").html('Recommend'); } // For movies and tv series we'll show the imdb link if(summary.category!=undefined && (summary.category.type.$ == 'movie' || summary.category.type.$ == 'serie')) { $("#mouseoverIMDbLink").show(); } else { $("#mouseoverIMDbLink").hide(); } }, // helper tools: getTitle findes title on an element getTitle:function(elm) { title = undefined; $(elm).contents().filter(function(){ if(typeof(title) == 'undefined') { title = __ontv_summary.getTextContent(elm); } }); return title; }, getTextContent:function(elm) { if(elm.innerText != undefined) return elm.innerText; else if(elm.textContent != undefined) return elm.textContent; else if(elm.nodeValue != undefined) return elm.nodeValue.replace(/^\s+|\s+$/g,""); else return undefined; }, date:function(format,unix_timestamp) { time = new Date(unix_timestamp*1000); return format.replace('Y',time.getYear()).replace('m',(time.getMonth()+1)).replace('d',time.getDate()).replace('H',((time.getHours()<10)?'0':'')+time.getHours()).replace('i',((time.getMinutes()<10)?'0':'')+time.getMinutes()).replace('s',time.getSeconds()); } }; /* * *Converts start time and end time in json object to timestamp */ function convertDateTime(oProgram){ var startStamp = Date.parse(oProgram.start.$); var endStamp = Date.parse(oProgram.end.$); oProgram.start.$ = startStamp/1000; oProgram.end.$ = endStamp/1000; return oProgram; } /** * The summary box design is build here * Then when loading the summary, the HTML is ready */ $(document).ready(function() { html = ''; $('body').append(html); $("a.programsummary").summary();}); function plan(id) { document.location.href = "/plan/"+id; }