function showTimeline2(deadlineElement, pulishedDateLoc, nowDateLoc, deadlineDateLoc, progressRate)
{
    var timelinePopup = document.getElementById('timeline');
    var progressElement = document.getElementById('progress');

    var widthTotal = 235;
    var publishedDateElement = null;
    var deadlineDate, publishedDate, nowDate = new Date();
    var dateElements = timelinePopup.getElementsByTagName('span');
    deadlineElement.parentNode.getElementsByTagName('p').length > 0 && (publishedDateElement = deadlineElement.parentNode.getElementsByTagName('p').item(0));
    
    if (null === publishedDateElement || null === progressElement) {
        return false;
    }

    var dateRegexp = /(\d{2})\.(\d{2})\.(\d{4})/;
    var results = dateRegexp.exec(deadlineElement.firstChild.nodeValue);
    
    if (null === results) {
        return false;
    }

    deadlineDate = new Date(results[3], results[2] - 1, results[1]);
    
    results = dateRegexp.exec(publishedDateElement.firstChild.nodeValue);

    if (null === results) {
        return false;
    }
    
    publishedDate = new Date(isRtl ? results[1] : results[3], results[2] - 1, isRtl ? results[3] : results[1]);
    var progressWidth = (widthTotal * (nowDate.getTime() - publishedDate.getTime()) / (deadlineDate.getTime() - publishedDate.getTime()));
    progressElement.style.width = (progressWidth > widthTotal ? widthTotal : progressWidth) + 'px';

    deadlineElementCoordinates = getCoordinates(deadlineElement);
    timelinePopup.style.top = (deadlineElementCoordinates.y - 179) + 'px';
    timelinePopup.style.left = (deadlineElementCoordinates.x - 216) + 'px';
    
    if (dateElements.length > 2) {
        dateElements[0].firstChild && dateElements[0].removeChild(dateElements[0].firstChild);
        dateElements[0].appendChild(document.createTextNode(publishedDate.getDate() + ' / ' + (publishedDate.getMonth() + 1) + ' / ' + publishedDate.getFullYear().toString().substr(2, 2)));
        dateElements[1].firstChild && dateElements[1].removeChild(dateElements[1].firstChild);
        dateElements[1].appendChild(document.createTextNode(nowDate.getDate() + ' / ' + (nowDate.getMonth() + 1) + ' / ' + nowDate.getFullYear().toString().substr(2, 2)));
        dateElements[2].firstChild && dateElements[2].removeChild(dateElements[2].firstChild);
        dateElements[2].appendChild(document.createTextNode(deadlineDate.getDate() + ' / ' + (deadlineDate.getMonth() + 1) + ' / ' + deadlineDate.getFullYear().toString().substr(2, 2)));
    }
    
    if (isRtl && 1 === timelinePopup.getElementsByTagName('img').length) {
        timelinePopup.getElementsByTagName('img').item(0).src = timelinePopup.getElementsByTagName('img').item(0).src.replace('caterpillar.', 'caterpillar_ar.');
    }

    timelinePopup.style.display = 'block';
    return true;
}

function showTimeline(deadlineElement, publishedDateLoc, nowDateLoc, deadlineDateLoc, progressRate)
{
    var timelinePopup = document.getElementById('timeline');
    var progressElement = document.getElementById('progress');
    var caterpillar = document.getElementById('caterpillar');

    var widthTotal = 235;
    var caterpillarWidth = 51;
    var dateElements = timelinePopup.getElementsByTagName('span');
    
    if (null === progressElement) {
        return false;
    }
    
    var progressElementWidth = progressRate > 100 ? widthTotal : parseInt(widthTotal * progressRate / 100);
    if (isRtl) {  
	    if (progressElementWidth < caterpillarWidth / 2) {
	       	caterpillar.style.marginRight = '0px';
	    } else if (progressElementWidth > widthTotal - caterpillarWidth / 2) {
	        caterpillar.style.marginRight = (widthTotal - caterpillarWidth) + 'px';
	    } else {
	        caterpillar.style.marginRight = (progressElementWidth - caterpillarWidth / 2) + 'px';
	    }
    } else {
	    if (progressElementWidth < caterpillarWidth / 2) {
	       	caterpillar.style.marginLeft = '0px';
	    } else if (progressElementWidth > widthTotal - caterpillarWidth / 2) {
	        caterpillar.style.marginLeft = (widthTotal - caterpillarWidth) + 'px';
	    } else {
	        caterpillar.style.marginLeft = (progressElementWidth - caterpillarWidth / 2) + 'px';
	    }
    }
    
    progressElement.style.width = progressElementWidth + 'px';

    deadlineElementCoordinates = getCoordinates(deadlineElement);
    
    if (dateElements.length > 2) {
        dateElements[0].firstChild && dateElements[0].removeChild(dateElements[0].firstChild);
        dateElements[0].appendChild(document.createTextNode(publishedDateLoc));
        dateElements[1].firstChild && dateElements[1].removeChild(dateElements[1].firstChild);
        dateElements[1].appendChild(document.createTextNode(nowDateLoc));
        dateElements[2].firstChild && dateElements[2].removeChild(dateElements[2].firstChild);
        dateElements[2].appendChild(document.createTextNode(deadlineDateLoc));
    }
    
    if (isRtl && 1 === timelinePopup.getElementsByTagName('img').length) {
        timelinePopup.getElementsByTagName('img').item(0).src = timelinePopup.getElementsByTagName('img').item(0).src.replace('caterpillar.', 'caterpillar_ar.');
    }

    timelinePopup.style.top = (deadlineElementCoordinates.y - 110) + 'px';
    timelinePopup.style.left = (deadlineElementCoordinates.x - 206) + 'px';
    timelinePopup.style.display = 'block';
    return true;
}

function hideTimeline()
{
    var timelinePopup = document.getElementById('timeline');
    timelinePopup.style.display = 'none';
    timelinePopup.style.top = '0px';
    timelinePopup.style.left = '0px';
}

function getCoordinates(object) {
	var coords = new Object();
  	coords.x = coords.y = 0;
    
    for (null; object != null; coords.x += object.offsetLeft, coords.y += object.offsetTop, object = object.offsetParent) {}
	
	return coords;
}