function renderSkyscraper(data) {
    var html = '';
    var offer = data.offers[0];
    html += '<a href="';
    html += offer.link;
    html += '"><img height="600" border="0" width="120" alt=" " src="';
    html += offer.getPicture();
    html += '" /></a>';
    return html;
}

function renderCinemaBox(data) {

    function applyContainerTop(data) {
        var html = '<div id="pxPage_' + data.page.id + '" class="pxCineB">';
        return html;
    }

    function applyTopBoxes(data) {
        var html = '';
        var offers = data.getByCode('cb_offer');
        for (var i = 0; i < offers.length; i++) {
            var offer = offers[i];
            html = html
            + '<div id="pxCbTop_' + offer.positionId + '" class="pxCbMain" ' + (i == 0 ? '' : 'style="display:none;"') + '>'
            + '<img alt="" src="' + offer.getPicture() + '" />'
            + '<div class="pxCbTxt" onclick="window.location.href=\'' + offer.link + '\';">'
            + '<h1>' + offer.headline
            + '</h1>'
            + '<h1 class="stars">' //+ '<br />'
            + offer.hotel.getStars()
            + '</h1>'
            + offer.textline1
            + '<div class="pxCbP">'
            + 'p.P.&nbsp;ab&nbsp;&euro;&nbsp;<a href="' + offer.link + '" class="pxPriceLnk">' + offer.price + ',-</a>'
            + '</div>'
            + '</div>'
            + '</div>';
        }
        return html;
    }

    function applyScrollBoxes(data) {
        // SCROLLRUMPF
        var html = '<div class="px_scrollToParent">'
            + '<div class="pxCbOffers">'
            + '<ul id="pxScroll_' + data.page.id + '">';

        var offers = data.getByCode('cb_offer');
        for (var i = 0; i < offers.length; i++) {
            var offer = offers[i];
            html = html
            // SCROLLITMS
            + '<li id="pxScrollItm_' + offer.positionId + '" class="pxScrollItm" onclick="showNhide(\'' + offer.positionId + '\', \'' + offer.positionId + '\', \'' + data.page.id + '\');">'
            + '<div class="pxCbOb">'
            + '<h1'
            + ((jQuery.browser.msie) ? ' class="ie"' : '')
            + '>'
            + offer.textline2
            + '</h1>'
            + offer.textline3
            + '</div>'
            + '</li>';
        }
        // SCROLLBOTTOM
        html = html
        + '</ul>'
        + '<div class="pxClearer"></div>'
        + '</div>'
        + '<a id="pxLnkPrev_' + data.page.id + '" class="pxLnkBack" href="#">&nbsp;</a>'
        + '<a id="pxLnkNext_' + data.page.id + '" class="pxLnkNext" href="#">&nbsp;</a>'
        + '</div>';

        return html;
    }

    function applyContainerBot() {
        var html = '</div>';
        return html;
    }
    var html = applyContainerTop(data)
        + applyTopBoxes(data)
        + applyScrollBoxes(data)
        + applyContainerBot();
    return html;
}

function renderSliderBox(data) {
    var tsCode = data.page.code;

    function getSliderOffers(data) {
        var retVal = '';
        var offers = data.getByCode("slideoffer");
        if ((offers != null) && (offers.length >= 3)) {
            for (var i = 0; i < offers.length; i += 3) {
                retVal = retVal + '<div class="pxSlbOffers">';
                var offer1 = offers[i];
                var offer2 = offers[i + 1];
                var offer3 = offers[i + 2];

                if (offer1) {
                    retVal = retVal + '<div class="pxSlbOb"><a href="' + offer1.link + '" class="pxSlbObBaseLnk"><img alt="" src="' + offer1.getPicture() + '" /></a><div class="pxSlbObC"><div class="pxSlbObHdl"><a href="' + offer1.link + '" class="pxSlbObBaseLnk">' + offer1.headline +
                    '</a>&nbsp;' + offer1.hotel.getStars() + '</div><div class="pxSlbObHdr"><b>' + offer1.textline1 + '</b></div><div class="pxSlbObTxt">' +
                    offer1.textline2 + '</div><div class="pxSlbObPp"><a href="' + offer1.link + '" class="pxSlbObPpLnk">' + offer1.price + '.-</a></div></div><div class="pxSlbObBt"></div></div>';
                }

                if (offer2) {
                    retVal = retVal + '<div class="pxSlbOb"><a href="' + offer2.link + '" class="pxSlbObBaseLnk"><img alt="" src="' + offer2.getPicture() + '" /></a><div class="pxSlbObC"><div class="pxSlbObHdl"><a href="' + offer2.link + '" class="pxSlbObBaseLnk">' + offer2.headline +
                    '</a>&nbsp;' + offer2.hotel.getStars() + '</div><div class="pxSlbObHdr"><b>' + offer2.textline1 + '</b></div><div class="pxSlbObTxt">' +
                    offer2.textline2 + '</div><div class="pxSlbObPp"><a href="' + offer2.link + '" class="pxSlbObPpLnk">' + offer2.price + '.-</a></div></div><div class="pxSlbObBt"></div></div>';
                }

                if (offer3) {
                    retVal = retVal + '<div class="pxSlbOb"><a href="' + offer3.link + '" class="pxSlbObBaseLnk"><img alt="" src="' + offer3.getPicture() + '" /></a><div class="pxSlbObC"><div class="pxSlbObHdl"><a href="' + offer3.link + '" class="pxSlbObBaseLnk">' + offer3.headline +
                    '</a>&nbsp;' + offer3.hotel.getStars() + '</div><div class="pxSlbObHdr"><b>' + offer3.textline1 + '</b></div><div class="pxSlbObTxt">' +
                    offer3.textline2 + '</div><div class="pxSlbObPp"><a href="' + offer3.link + '" class="pxSlbObPpLnk">' + offer3.price + '.-</a></div></div><div class="pxSlbObBt"></div></div>';
                }

                retVal = retVal + '<div class="pxClearer"></div></div>'
            }
        }
        return retVal;
    }

    function getSliderTabs(data) {
        var retVal = '';
        var eleStyle = '';
        var countainerWidth = 0;
        var offers = data.getByCode("slideoffer");
        if ((offers != null) && (offers.length >= 3)) {
            for (var i = 0; i < offers.length; i++) {
                if (i == 0) { retVal += '<div class="pcSlbNpgM pcSlbNpgA">'; }
                if (((i + 1) % 3) == 0) {
                    eleStyle = ' style="margin-right: 7px;"';
                    countainerWidth += 19;
                } else {
                    eleStyle = '';
                    countainerWidth += 14;
                }
                retVal += '<div class="pcSlbNpg"' + eleStyle + '></div>';
                if ((((i + 1) % 3) == 0) && (i + 1 < offers.length)) {
                    retVal += '</div><div class="pcSlbNpgM">';
                } else if (i + 1 == offers.length) {
                    retVal += '</div>';
                }
            }
        }
        return '<div class="pcSlbNavCon" style="width: ' + countainerWidth + 'px">' + retVal + '</div>';
    }

    var htmlOffers = getSliderOffers(data);
    var htmlTabs = getSliderTabs(data);
    var htmlSlider = '<div class="pxSliderBox"><div class="pxSlbContent"><div class="pxSlbContScroll">' + htmlOffers +
        '<div class="pxClearer"></div></div></div><div class="pxSlbNavPg"><div class="pxSlbLnkBack pxSlbLnkBackDis">Mehr Angebote</div>' + htmlTabs + '<div class="pxSlbLnkNext" >Mehr Angebote</div></div></div>';
    return htmlSlider;
}

var autoFader = false;

function startAutoFader() {
    if (!autoFader) {
        autoFader = window.setInterval("performAction()", 6000);
        return true;
    }
    return false;
}

function toggleAutoFader() {
    if (!stopAutoFader()) {
        startAutoFader()
    }
}

function restartAutoFader() {
    stopAutoFader();
    startAutoFader();
}

function stopAutoFader() {
    if (autoFader) {
        clearInterval(autoFader);
        autoFader = false;
        return true;
    }
    return false;
}

function clickSlide() {
	jQuery('.pcSlbNpgM').click(function() {
		var index = jQuery('.pxSliderBox .pxSlbNavPg .pcSlbNavCon .pcSlbNpgM').index(jQuery(this));
		jQuery('.pxSlbContent').trigger( 'goto', [ index ] );
    });
    restartAutoSlider();
}

var autoSlider = false;

function startAutoSlider() {
    if (!autoSlider) {
        autoSlider = window.setInterval("performSlide()", 10000);
        return true;
    }
    return false;
}

function restartAutoSlider() {
    stopAutoSlider();
    startAutoSlider();
}

function stopAutoSlider() {
    if (autoSlider) {
        clearInterval(autoSlider);
        autoSlider = false;
        return true;
    }
    return false;
}

function performSlide() {
    var curPos = jQuery('.pxSliderBox .pxSlbNavPg .pcSlbNavCon .pcSlbNpgA');
    var eleCount = jQuery('.pxSliderBox .pxSlbNavPg .pcSlbNavCon .pcSlbNpgM').size() - 1;
    var index = jQuery('.pxSliderBox .pxSlbNavPg .pcSlbNavCon .pcSlbNpgM').index(curPos);
    if (index == eleCount) {
        index = 0;
    } else {
        index = index + 1;
    }
    jQuery('.pxSlbContent').trigger('goto', [index]);
}

function performAction() {
    var index = jQuery('.pxCbOffers li.pxScrollItm').index(jQuery('.pxScrollItmActive'));
    var count = jQuery('.pxCbOffers li.pxScrollItm').size() - 1;
    var obj = jQuery('.pxCbOffers li.pxScrollItm').eq((index < count) ? index + 1 : 0);
    if ((obj.position().left < 0) || (obj.position().left >= 480)) {
        jQuery('.pxCbOffers').trigger('next');
    }
    obj.click();
}

function showNhide(refid, itmid, pageid) {
    jQuery('.pxScrollItm').removeClass('pxScrollItmActive');
    jQuery("#pxScrollItm_" + refid).addClass('pxScrollItmActive');
    $("#pxPage_" + pageid + " .pxCbMain:visible").fadeOut(500, function() {
        $("#pxCbTop_" + itmid).fadeIn();
    });
    restartAutoFader()
}

function UpdateSliderScrollNavigation(pos) {
    jQuery('.pcSlbNpgM').removeClass('pcSlbNpgA');
    jQuery('.pcSlbNpgM').eq(pos).addClass('pcSlbNpgA');
    if (pos < 1)
        jQuery('.pxSlbLnkBack').addClass("pxSlbLnkBackDis");
    else jQuery('.pxSlbLnkBack').removeClass("pxSlbLnkBackDis");
    if (pos >= jQuery('.pcSlbNpgM').size() - 1)
        jQuery('.pxSlbLnkNext').addClass("pxSlbLnkNextDis");
    else jQuery('.pxSlbLnkNext').removeClass("pxSlbLnkNextDis");
}

function UpdateScrollNavigation(pos, left, right, item, visible, pageid) {
    var count = $('#' + pageid).children(item).size();

    $('#' + left).removeClass("pxDisabledBack");
    $('#' + right).removeClass("pxDisabledNext");
    
    if (count <= visible) {
        //disable both   
        $('#' + left).addClass("pxDisabledBack");
        $('#' + right).addClass("pxDisabledNext");
        $('#' + left).css("cursor", "default");
        $('#' + right).css("cursor", "default");
    }
    else if (pos <= 0) {
        //disable left button
        $('#' + left).addClass("pxDisabledBack");
        $('#' + left).css("cursor", "default");
        $('#' + right).css("display", "inline");
        $('#' + right).css("cursor", "pointer");
    }
    else if (pos + visible >= count) {
        //disable right button
        $('#' + right).addClass("pxDisabledNext");
        $('#' + right).css("cursor", "default");
        $('#' + left).css("display", "inline");
        $('#' + left).css("cursor", "pointer");
    }
    else {
        //disable no Button
        $('#' + left).css("display", "inline");
        $('#' + right).css("display", "inline");
        $('#' + left).css("cursor", "pointer");
        $('#' + right).css("cursor", "pointer");
    }
}

function appendScrolling(parentId, numId) {
    jQuery('.px_scrollToParent').serialScroll({
            target: '.pxCbOffers',
            items: 'li.pxScrollItm', // Selector to the items ( relative to the matched elements, '#sections' in this case )
            prev: 'a.pxLnkBack', // Selector to the 'prev' button (absolute!, meaning it's relative to the document)
            next: 'a.pxLnkNext', // Selector to the 'next' button (absolute too)
            axis: 'x', // The default is 'y' scroll on both ways
            duration: 500, // Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
            force: true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
            lazy: true,
            exclude: 2,
            cycle: true
        });
}

function renderShortList(data) {

    function getOfferLine(co) {
        var html = '';
        if (co.type.toLowerCase() == 'freetext') {
            html += '<div style="background: url(&quot;';
            html += co.getPicture();
            html += '&quot;) no-repeat scroll 0px 10px transparent;" class="offer_1sp_1z_3a_1b">';
            html += '<div class="offer_1sp_1z_3a_1b_head">';
            html += co.headline;
            html += '</div>';
        } else {
            html += '<div class="offer_1sp_1z_3a_1b_content" onclick="window.location.href=\'';
            html += co.link;
            html += '\';"><a href="';
            html += co.link;
            html += '" class="offer_1sp_1z_3a_1b_hotel">';
            html += co.headline;
            html += '</a> ';
            html += co.hotel.getStars();
            html += '<br>';
            html += co.textline1;
            html += '</div><div class="offer_1sp_1z_3a_1b_preisdiv" onclick="window.location.href=\'';
            html += co.link;
            html += '\';">p.P. ab € <a href="';
            html += co.link;
            html += '" class="offer_1sp_1z_3a_1b_preis">';
            html += co.getPrice();
            html += ',-</a></div>';
        }

        return html;
    }

    var html = '';
    for (var i = 0; i < data.offers.length; i++) {
        var co = data.offers[i];
        html += getOfferLine(co);
    }
    if (html != '') html += '</div>';
    return html;
}

function renderPartnerBox(data) {

    var html = '';
    if(data.offers.length == 3) {
        var co = data.offers[0];
        html += '<div style="background: url(&quot;';
        html += co.getPicture();
        html += '&quot;) no-repeat scroll 0px 10px transparent;" class="offer_2sp_1z_2a_1b">';
        html += '<div class="offer_2sp_1z_2a_1b_head">';
        html += co.headline;
        html += '</div>';

        co = data.offers[1];
        html += '<div class="offer_2sp_1z_2a_1b_offer1_clickarea" onclick="window.location.href=\'';
        html += co.link;
        html += '\';">&nbsp;</div>';

        html += '<div class="offer_2sp_1z_2a_1b_offer1" onclick="window.location.href=\'';
        html += co.link;
        html += '\';">';
        html += co.headline;
        html += '</div><div class="offer_2sp_1z_2a_1b_preisdiv" onclick="window.location.href=\'';
        html += co.link;
        html += '\';">p.P. ab € <a href="';
        html += co.link;
        html += '" class="offer_2sp_1z_2a_1b_preis">';
        html += co.getPrice();
        html += ',-</a></div>';

        co = data.offers[2];
        html += '<div class="offer_2sp_1z_2a_1b_offer2_clickarea" onclick="window.location.href=\'';
        html += co.link;
        html += '\';">&nbsp;</div>';
        
        html += '<div class="offer_2sp_1z_2a_1b_offer2" onclick="window.location.href=\'';
        html += co.link;
        html += '\';">';
        html += co.headline;
        html += '</div><div class="offer_2sp_1z_2a_1b_preisdiv2" onclick="window.location.href=\'';
        html += co.link;
        html += '\';">p.P. ab € <a href="';
        html += co.link;
        html += '" class="offer_2sp_1z_2a_1b_preis">';
        html += co.getPrice();
        html += ',-</a></div></div>';
    }
    return html;
}

function renderShortListFly(data) {

    function getOfferLine(co) {
        var html = '';
        if (co.type.toLowerCase() == 'freetext') {
            html += '<div style="background: url(&quot;';
            html += co.getPicture();
            html += '&quot;) no-repeat scroll 0px 10px transparent;" class="offer_1sp_15z_3a_1b">';
            html += '<div class="offer_1sp_15z_3a_1b_head">';
            html += co.headline;
            html += '</div>';
        } else {
            html += '<div class="';
            html += (co.textline1) ? 'offer_1sp_15z_3a_1b_content' : 'offer_1sp_15z_3a_1b_content_klein';
            html += '" onclick="window.location.href=\'';
            html += co.link;
            html += '\';"><a href="';
            html += co.link;
            html += '" class="offer_1sp_15z_3a_1b_hotel">';
            html += co.headline;
            html += '</a> ';
            html += '<br>';
            if(co.textline1) html += co.textline1;
            html += '</div><div class="offer_1sp_15z_3a_1b_preisdiv" onclick="window.location.href=\'';
            html += co.link;
            html += '\';">p.P. ab € <a href="';
            html += co.link;
            html += '" class="';
            html += (co.textline1) ? 'offer_1sp_15z_3a_1b_preis' : 'offer_1sp_15z_3a_1b_preis_klein';
            html += '">';
            html += co.getPrice();
            html += ',-</a></div>';
        }

        return html;
    }

    var html = '';
    var co = undefined;
    for (var i = 0; i < data.offers.length - 1; i++) {
        co = data.offers[i];
        html += getOfferLine(co);
    }
    if (html != '') {
        co = data.offers[data.offers.length - 1];
        html += '<div class="offer_1sp_15z_3a_1b_preisdiv_mehr" onclick="window.location.href=\'';
        html += co.link;
        html += '\';"><a href="';
        html += co.link;
        html += '" class="offer_1sp_15z_3a_1b_mehr">';
        html += co.headline;
        html += '</a></div>';
        html += '</div>';
    }
    return html;
}