var countdownImageURL = '++resource++sfw.portlet.countdown.images/';
var countdownNumPosY = 12;
var countdownNumPosX = [8, 23, 48, 63, 88, 103, 128, 143]
var countdownColonPosY = 15;
var countdownColonPosX = [40, 80, 120];
var countdownDigits = Array();
var countdownLanguage = 'en';

var countdownText = new Object();
countdownText['en'] = Array('We are going to Alexandra! 32 delegations from around the world meet in South Africa.', 
	'FOOTBALL FOR HOPE FESTIVAL 2010', 
	'http://www.streetfootballworld.org/festival2010');

countdownText['de'] = Array('Wir fahren nach Alexandra! 32 Delegationen aus der ganzen Welt treffen sich in Südafrika.',
	'FOOTBALL FOR HOPE FESTIVAL 2010', 
	'http://www.streetfootballworld.org/festival2010_de');

countdownText['es'] = Array('Vamos a Alexandra! 32 delegaciones de todo el mundo se reunirán en Sudáfrica.', 
	'FESTIVAL FOOTBALL FOR HOPE 2010', 
	'http://www.streetfootballworld.org/festival2010_es');

countdownText['fr'] = Array('Nous partons à Alexandra! 32 délégations du monde entier se réuniront en Afrique du Sud.', 
	'FESTIVAL FOOTBALL FOR HOPE 2010', 
	'http://www.streetfootballworld.org/festival2010');

var countdownDate = new Date(2010, 5, 28, 19, 0).getTime();


function initCountdown(container, lang, image_url) {
    if (lang == 'de' || lang == 'fr' || lang == 'es')
        countdownLanguage = lang;

    countdownImageURL = image_url;

    // container format
    container.style.height = '282px';
    container.style.background = 'white url(' + countdownImageURL + 'bg.gif) scroll repeat-x 0 0';
    
    // blocks containing images
    var headline = createDiv(container, 139, 76, 'headline.gif');
    headline.style.marginBottom = '10px';
    var clock = createDiv(container, 168, 37, 'bg_clock.gif');
   
    var days = createDiv(container, 168, 9, 'days_'+ countdownLanguage +'.gif');
    days.style.margin = '5px 0 10px 0';
    text = createDiv(container, 136, 102, 'bg_content.gif');
    text.style.padding = '10px 7px';
    text.style.textAlign = 'left';
    text.appendChild(document.createTextNode(countdownText[lang][0]));
    text.style.font = '11px sans-serif';
    text.style.color = 'black';
    text.style.lineHeight = '140%';

    var link = document.createElement('a');
    link.style.display = 'block';
    link.style.padding = ' 0 0 0 15px';
    link.style.margin = '5px 0 0 0';
    link.style.background = 'transparent url(' + countdownImageURL + 'arrow.gif) scroll no-repeat 0 5px';
    link.appendChild(document.createTextNode(countdownText[lang][1]));
    link.setAttribute('href', countdownText[lang][2]);
    link.setAttribute('target', '_blank');
    
    text.appendChild(link);
    // init clock with 0
    initClock(clock);

    // run clock
    setInterval('updateClock()', 1000);
}


function createDiv(parent, width, height, bg) {
    // create a div with size and background
    var div = document.createElement('div');
    div.style.width = width + 'px';
    div.style.height = height + 'px';
    div.style.background = 'transparent url(' + countdownImageURL + bg + ') scroll repeat-x 0 0';
    div.style.margin = 'auto';
    parent.appendChild(div);
    return div;
}

function initClock(clock) {
    // init clock  
    clock.style.position = 'relative';

    // set colons
    var colon = document.createElement('img');
    colon.setAttribute('src', countdownImageURL + 'colon.gif')
    colon.style.position = 'absolute';
    colon.style.top = countdownColonPosY + 'px';
    for (var i = 0; i < 3; i++) {
        var c = colon.cloneNode(true);
        c.style.left = countdownColonPosX[i] + 'px';
        clock.appendChild(c);
    }
 
    // set digits
    for (var i = 0; i < 8; i++) {
        var num = document.createElement('img');
        num.setAttribute('src', countdownImageURL + i + '.gif');
        num.style.position = 'absolute';
        num.style.top = countdownNumPosY + 'px';
        num.style.left = countdownNumPosX[i] + 'px';
        clock.appendChild(num);
        countdownDigits.push(num);
    }
}


function updateClock() {
    var now = new Date().getTime();
    var countdown = countdownDate;
    var diff = Math.floor((countdown - now)/1000);

    var rem = [0,0,0,0,0,0,0,0]; 
    
    var days = Math.floor(diff / (24 * 3600));
    rem[0] = Math.floor(days / 10); 
    rem[1] = days % 10; 

    diff = diff - days * 24 * 3600;
    var hours = Math.floor(diff / 3600);
    rem[2] = Math.floor(hours/10);
    rem[3] = hours % 10;

    diff = diff - hours * 3600;
    var mins = Math.floor(diff / 60);
    rem[4] = Math.floor(mins/10);
    rem[5] = mins % 10;

    secs = diff - mins * 60;
    rem[6] = Math.floor(secs/10);
    rem[7] = secs % 10;
    
    for (var i = 0; i < rem.length; i++) {
       countdownDigits[i].setAttribute('src', countdownImageURL + rem[i] + '.gif'); 
    }
}