function ShowMenu(menuid, pageid)
    {
        $("#" + pageid + " .px_cinema_container_header:visible").slideUp(500, function (){
            $("#" + menuid).slideDown();
        });
    }

function UpdateScrollNavigation(pos, left, right, item, visible, pageid)
    {
        var count = $('#' + pageid).children(item).size();
        if (count <= visible)
        {
            //disable both   
            $('#' + left).css("background", "none");
            $('#' + right).css("background", "none");
            $('#' + left).css("cursor", "default");
            $('#' + right).css("cursor", "default");
        }
        else if (pos <= 0)
        {
            //disable left button
            $('#' + left).css("background", "none");
            $('#' + left).css("cursor", "default");
            $('#' + right).css("background", "url(http://www.tui.com/fileadmin/tui/pixell/pics/icons/large_arrow_right.gif) no-repeat right center");
            $('#' + right).css("cursor", "pointer");
        }
        else if (pos + visible >= count)
        {
            //disable right button
            $('#' + right).css("background", "none");
            $('#' + right).css("cursor", "default");
            $('#' + left).css("background", "url(http://www.tui.com/fileadmin/tui/pixell/pics/icons/large_arrow_left.gif) no-repeat left center");
            $('#' + left).css("cursor", "pointer");
        }
        else
        {
            //disable no Button
            $('#' + left).css("background", "url(http://www.tui.com/fileadmin/tui/pixell/pics/icons/large_arrow_left.gif) no-repeat left center");
            $('#' + right).css("background", "url(http://www.tui.com/fileadmin/tui/pixell/pics/icons/large_arrow_right.gif) no-repeat right center");
            $('#' + left).css("cursor", "pointer");
            $('#' + right).css("cursor", "pointer");
        }
    }



function getWideOb(data)
{
    this.getWideBox = function(offer, color){
        var html = "";
        html = html 
            + '<div class="px_ob_wide">'
            + '<div class="px_container">';
            html = html
            + (offer.type == "Freetext" ? '<div class="header_freetext" style="background-color:' + color + ';">' : '<div class="header_offer" style="background-color:' + color + ';">')
            + (color.toLowerCase() == '#6699ff' ? '<h1 style="color:#FFFFFF;">' : '<h1>')
            +'<b>' + offer.headline + '</b><br/>' + getTuiClassTag(offer.textline1,color.toLowerCase() == '#6699ff') + '<br/></h1>';
            if (offer.type == "Freetext") {
            html = html 
                + '</div>'
                + '<div class="content_freetext" style="background-image:url(\'' + offer.getPicture() + '\');">'
                + '<h2 style="color:' + color + ';">' + offer.textline2 + '</h2>'
                + '<p class="px_txt1">' + offer.text + '</p>'
                + '<p class="px_lnk1">'
                + (color.toLowerCase() == '#6699ff' ? '<a href="' + offer.link + '" style="color:#FFFFFF;"><b>jetzt buchen</b></a></p>' : '<a href="' + offer.link + '" ><b>jetzt buchen</b></a></p>')
                + '</div>';
            }
            else {
            html = html
                + '<p class="px_txt2">' + offer.textline2 + '</p>'
                + '<p class="px_price_suffix">'
                + (color.toLowerCase() == '#6699ff' ? '<a href="' + offer.link + '" style="color:#FFFFFF; background: url(\'http://www.tui.com/fileadmin/tui/pixell/pics/icons/arrow_white_right.gif\') no-repeat 0 80%;"><b>' + offer.priceSuffix + ' ab &nbsp;</b><b style="margin:0px; height:30px; font-size:30px; font-weight:normal;">&euro; ' + offer.price + '</b></a>' : '<a href="' + offer.link + '"><b>' + offer.priceSuffix + ' ab &nbsp;</b><b style="margin:0px; height:30px; font-size:30px; font-weight:normal;">&euro; ' + offer.price + '</b></a>')
                + '</p>'
                + '</div>'
                + '<div class="content_offer">'
                + '<a href="' + offer.link + '"><img src="' + offer.getPicture() +'" alt="" height="186" width="308" border="0" /></a>'
                + '</div>';
            }
        html = html 
        + '</div>'
        + '</div>';
    
    return html;
        }
        
    var html = "";
    var color = "#BFEB00";
    if  (data.page.extra6 != undefined || data.page.extra6 != "") color = unescape(data.page.extra6);
    
    html = html
        + '<div class="px_scrollparent_w">'
        + '<div class="px_scrollLeft" id="px_scrollLeft_px_scrollparent_' + data.page.id + '">'
        + '</div>'
        + '<div class="px_scroll_core">'
        + '<div class="px_allBoxes" id="px_scrollparent_' + data.page.id + '">';

    var obOffers = data.getByCode("ob_offer");
    for (var i=0; i<obOffers.length; i++)
    {
        if (obOffers[i].type == "Freetext"  || obOffers[i].destination.country != "" )
            html = html + getWideBox(obOffers[i], color);
    }
    html = html
        + '<div style="clear:both;"></div>'
        + '</div>'
        + '</div>'
        + '<div class="px_scrollRight" id="px_scrollRight_px_scrollparent_' + data.page.id + '">'
        + '</div>'
        + '</div>';
        
    return html;
    
}

function getSmallOb(data, color)
{
    this.getSmallBox = function (offer, doubled, j, color){
        var html = "";
        var modulo = false;
        if (j%2 == 1 && doubled) modulo = true;
        html = html
            + (modulo ? '<div class="px_ob_small_parent_doubled">' : '') 
            + (doubled ? '<div class="px_ob_small" style="float:none;">' : '<div class="px_ob_small">')
            + '<div class="header" style="background-color:' + color + ';">'
            + (color.toLowerCase() == '#6699ff' ? '<h1 style="color:#FFFFFF;">' : '<h1>')
            + '<b>' + offer.headline + '</b><br/>' + getTuiClassTag(offer.textline1, color.toLowerCase() == '#6699ff') + '</h1>'
            + '<p class="px_txt2">' + offer.textline2 + '<br/>' + offer.textline3 +  '</p>';
            if (offer.type != "Freetext"){
                html = html 
                + (color.toLowerCase() == '#6699ff' ? '<p class="px_price_small" style="background: url(\'http://www.tui.com/fileadmin/tui/pixell/pics/icons/arrow_white_right.gif\') no-repeat 0 60%; margin-left:1px;">' : '<p class="px_price_small" style="margin-left:1px;">')
                + (color.toLowerCase() == '#6699ff' ? '<a href="' + offer.link + '" style="color:#FFFFFF"><b>' + offer.priceSuffix + ' ab <span>&euro; ' + offer.price + '</span></b></a></p>' : '<a href="' + offer.link + '"><b>' + offer.priceSuffix + ' ab <span>&euro; ' + offer.price + '</span></b></a></p>');
            }
            else { 
                html = html 
                + (color.toLowerCase() == '#6699ff' ? '<p class="px_bookedout_s" style="color:#FFFFFF">' + offer.linkText + '</p>' : '<p class="px_bookedout_s">' + offer.linkText + '</p>');
            }
            html = html
            + '</div>'
            + '<div class="content">'
            + '<a href="' + offer.link + '"><img src="' + offer.getPicture() +'" width="203" height="109" border="0" /></a>'
            + '</div>'
            + '</div>'
            + (modulo ? '<div style="height:5px; width:203px;"><img src="http://www.tui.com/fileadmin/tui/pixell/pics/icons/x.gif" alt="" /></div>' : '');
            if (doubled){
            html = html
            + (modulo ? '': '</div>');
            }
            
        return html;
    
    }
    
    var html = "";
    var color = "#BFEB00";
    if  (data.page.extra6 != undefined) color = unescape(data.page.extra6);
    var doubled = false;
    var j = 1;
    if  (data.page.extra1 != undefined){ if (data.page.extra1.toLowerCase() == "double") doubled = true;}
    var oboffers = data.getByCode("ob_offer")
        html = html
            + (doubled ? '<div class="px_scrollparent_s_doubled">' : '<div class="px_scrollparent_s">')
            + (doubled ? '<div class="px_scrollLeft_s_doubled" id="px_scrollLeft_s_doubled_px_scrollparent_' + data.page.id + '"></div>' : '<div class="px_scrollLeft_s" id="px_scrollLeft_s_px_scrollparent_' + data.page.id + '"></div>')
            + (doubled ? '<div class="px_scroll_core_s_doubled">' : '<div class="px_scroll_core_s">')
            + '<div class="px_allBoxes" id="px_scrollparent_' + data.page.id + '">';
    for (var i=0; i < oboffers.length; i++)
    {
        if (oboffers[i].type == "Freetext"  || oboffers[i].destination.country != "" )
            html = html + getSmallBox(oboffers[i], doubled, j, color);
            j++;
    }
    html = html
        + '</div>'
        + '</div>'
        + (doubled ? '<div class="px_scrollRight_s_doubled" id="px_scrollRight_s_doubled_px_scrollparent_' + data.page.id + '"></div>' : '<div class="px_scrollRight_s" id="px_scrollRight_s_px_scrollparent_' + data.page.id + '"></div>')
        + '</div>';
    
    return html;

}



function getWideSl(data)
{
    this.getWidelist = function(offers, color, countoffers)
    {
        var counter = 1;
        var lastone = 0;
        for (var i = 0; i < offers.length; i++)
        {
            if (offers[i].destination.country != "" || offers[i].type=="Freetext")
                lastone = i;
        }
        if (countoffers == 0)
            countoffers = 4;
            
        
        var html = "";
        html = html
            + '<div style="float:left; width:58px; height:10px;"><img src="http://www.tui.com/fileadmin/tui/pixell/pics/icons/x.gif" alt="" /></div>' 
            + '<div style="float:left;">'
            + '<table class="px_table_wide" cellpadding="0" cellspacing="0" valign="bottom" style="border-top: 2px solid ' + color + '; border-bottom: 2px solid ' + color + ';">';
        
        for (var i = 0; i < lastone; i++)
        {
            if (offers[i].destination.country != "" && counter <= countoffers -1 || offers[i].type=="Freetext" && counter <= countoffers - 1){
                html = html
                    + '<tr>'
                    + '<td class="px_td_first">'
                    + '<b>' + offers[i].headline + '</b><br />' + offers[i].textline1
                    + '</td>'
                    + '<td class="px_td_inner" style="width:105px;"><br/>' + getTuiClassTag(offers[i].textline2, false) + '</td>'
                    + '<td class="px_td_inner_desc"><br/>' + offers[i].textline3 + '</td>'
                    + (offers[i].type != "Freetext" ? '<td class="px_priceSuffix_td"><br/><a href="' + offers[i].link + '">' + offers[i].priceSuffix + ' ab</a></td><td class="px_td_last" valign="top"><a href="' + offers[i].link + '">&euro; ' + offers[i].price + '</a></td>' : '<td class="px_td_last" colspan="2"><p class="px_sl_bookedout"><br/>' + offers[i].linkText + '</p></td>')
                    + '</tr>'
                    + '<tr><td colspan="5" class="px_sl_border"></td></tr>';
                
                counter++
            }
        }
        html = html
            + '<tr>'
            + '<td class="px_td_first_last">'
            + '<b>' + offers[lastone].headline + '</b><br />' + offers[lastone].textline1
            + '</td>'
            + '<td class="px_td_inner_last" style="width:105px;"><br/>' + getTuiClassTag(offers[lastone].textline2, false) + '</td>'
            + '<td class="px_td_inner_desc_last"><br/>' + offers[lastone].textline3 + '</td>'
            + (offers[lastone].type != "Freetext" ? '<td class="px_priceSuffix_td_last" style="border-bottom:none;"><br/><a href="' + offers[lastone].link + '">' + offers[lastone].priceSuffix + ' ab</a></td><td class="px_td_last_last" valign="top"><a href="' + offers[lastone].link + '">&euro; ' + offers[lastone].price + '</a></td>' : '<td class="px_td_last_last" colspan="2"><p class="px_sl_bookedout"><br/>' + offers[lastone].linkText + '</p></td>')
            + '</tr>'
            + '</table>'
            + '</div>'
            + '<div style="clear:both;"></div>';
        
        return html;
    }
    
    var html = "";
    var color = "#BFEB00";
    if  (data.page.extra6 != undefined) color = unescape(data.page.extra6);
    var sloffers = data.getByCode("sl_offer");
    var countoffers = 0;
    html= html
        + '<div class="px_sl_wide">';
    if  (data.page.extra3 != undefined) countoffers = unescape(data.page.extra3);
        html = html + getWidelist(sloffers, color, countoffers);
    
    html = html
        + '</div>';
    return html;
}

function getMediumSl(data){

    this.getMediumlist = function(offers, pic, ispic, color, countoffers)
    {
        var lastone = 0;
        var counter = 1;
        for (var i = 0; i < offers.length; i++)
        {
            if (offers[i].destination.country != "" || offers[i].type=="Freetext")
                lastone = i;
        }
        if (ispic && lastone > 3)
        {
            lastone = 3
        }
        if (countoffers == 0)
            countoffers = 6;
        var hotelclass= "";
        var hotelname= "";
        
        var html = "";
            html = html
                + '<div style="float:left; width:58px; height:10px;"><img src="http://www.tui.com/fileadmin/tui/pixell/pics/icons/x.gif" alt="" /></div>' 
                + '<div style="float:left;">'
                + '<table class="px_table_medium" cellpadding="0" cellspacing="0" style="border-top: 2px solid ' + color + '; border-bottom: 2px solid ' + color + ';">';
                for (var i = 0; i < lastone; i++)
                {
                    hotelname = offers[i].textline1.substr(0, offers[i].textline1.indexOf("*"));
                    hotelclass = offers[i].textline1.substr(offers[i].textline1.indexOf("*"), offers[i].textline1.lastIndexOf("*"));
                    if (offers[i].destination.country != "" && counter <= countoffers - 1 || offers[i].type=="Freetext" && counter <= countoffers -1){
                        html = html
                            + '<tr>'
                            + '<td class="px_td_first">'
                            + '<b>' + offers[i].headline + '</b>, ' + hotelname + getTuiClassTag(hotelclass, false) + '<br/>' + offers[i].textline2
                            + '</td>'
                            + (offers[i].type != "Freetext" ? '<td style="padding-left:5px;"><p class="px_sl_price"><br/><a href="' + offers[i].link + '">' + offers[i].priceSuffix + ' ab</a></p></td><td class="px_td_last" valign="top"><p class="px_sl_price"><a href="' + offers[i].link + '">&euro; ' + offers[i].price + '</a></p></td>': '<td colspan="2" style="text-align:right;"><p class="px_sl_bookedout">' + offers[i].linkText + '</p></td>')
                            + '</tr>'
                            + '<tr><td colspan="5" class="px_sl_border"></td></tr>';
                        counter++
                    }
                }
                hotelname = offers[lastone].textline1.substr(0, offers[lastone].textline1.indexOf("*"));
                hotelclass = offers[lastone].textline1.substr(offers[lastone].textline1.indexOf("*"), offers[lastone].textline1.lastIndexOf("*"));
                html = html
                    + '<tr>'
                    + '<td class="px_td_first_last">'
                    + '<b>' + offers[lastone].headline + '</b>,' + hotelname + getTuiClassTag(hotelclass, false) + '<br/>' + offers[lastone].textline2
                    + '</td>'
                    + (offers[lastone].type != "Freetext" ? '<td style="border-bottom:none; padding-left:5px;"><p class="px_sl_price"><br/><a href="' + offers[lastone].link + '">' + offers[lastone].priceSuffix + ' ab</a></p></td><td class="px_td_last_last" valign="top"><p class="px_sl_price"><a href="' + offers[lastone].link + '">&euro; ' + offers[lastone].price + '</a></p></td>': '<td colspan="2" style="border-bottom:none; text-align:right;"><p class="px_sl_bookedout">' + offers[lastone].linkText + '</p></td>')
                    + '</tr>'
                    + '</table>'
                    + '</div>';
                if (ispic){
                    html = html
                        + '<div style="float:left; width:10px; height:10px;"><img src="http://www.tui.com/fileadmin/tui/pixell/pics/icons/x.gif" alt="" /></div>' 
                        + '<div style="float:left;">'
                        + '<img src="' + pic[0].getPicture() + '" alt="" />'
                        + '</div>';
                }
                html = html
                    + '<div style="clear:both;"></div>';
        
        return html;
    }
    
    var html = "";
    var offers = data.getByCode("sl_offer");
    var pic = data.getByCode("sl_pic");
    var ispic = false;
    var color = "#BFEB00";
    if  (data.page.extra6 != undefined) color = unescape(data.page.extra6);
    var countoffers = 0;
    if  (data.page.extra3 != undefined) countoffers = unescape(data.page.extra3);
    if (pic[0] != undefined) ispic = true;
    html = html
        + '<div class="px_sl_medium">';
    html = html + getMediumlist(offers, pic, ispic, color, countoffers)
    html = html
        + '</div>';
    return html;
}

function getSmallSl(data)
{
    this.getSmalllist = function(offers, firstone, eachbox, twolists, second, color, countoffers)
    {
        var lastone = 0;
        var counter = 1;
        
        for (var i = firstone; i < eachbox; i++)
        {
            if (offers[i].destination.country != "" || offers[i].type=="Freetext")
                lastone = i;
        }
        if (countoffers == 0)
            countoffers = 10;
        var html = "";
            html = html
                + '<div style="float:left; width:'
                + (second ? '20' : '58')
                + 'px; height:10px;"><img src="http://www.tui.com/fileadmin/tui/pixell/pics/icons/x.gif" alt="" /></div>' 
                + '<div style="float:left;">' 
                + '<table class="px_table_small" cellpadding="0" cellspacing="0" style="border-top: 2px solid ' + color + '; border-bottom: 2px solid ' + color + '; '
                + (twolists ? 'width:295px;' : '')
                + '">';
            
            for (var i = firstone; i < lastone; i++)
            {
                if (offers[i].destination.country != "" && counter <= countoffers - 1 || offers[i].type=="Freetext" && counter <= countoffers - 1){
                    html = html 
                        + '<tr>'
                        + '<td class="px_td_first"'
                        + (twolists ? 'style="width:160px;"' : '')
                        + '>'
                        + '<b>' + offers[i].headline + '</b>'
                        + '</td>'
                        + (offers[i].type != "Freetext" ? '<td style="padding-left:10px; text-align:right;"><p class="px_sl_price"><a href="' + offers[i].link + '">' + offers[i].priceSuffix + ' ab</td><td class="px_td_last" valign="top"><p class="px_sl_price"><a href="' + offers[i].link + '">&euro; ' + offers[i].price + '</a></p></td>' : '<td class="px_td_last" colspan="2"><p class="px_sl_bookedout" style="font-size:12px;">' + offers[i].linkText + '</p></td>')
                        + '</tr>'
                        + '<tr><td colspan="5" class="px_sl_border"></td></tr>';
                    counter++;
                }
            }
            html = html 
                    + '<tr>'
                    + '<td class="px_td_first_last"'
                    + (twolists ? 'style="width:160px;"' : '')
                    + '>'
                    + '<b>' + offers[lastone].headline + '</b>'
                    + '</td>'
                    + (offers[lastone].type != "Freetext" ? '<td style="padding-left:10px; border-bottom:none; text-align:right;"><p class="px_sl_price"><a href="' + offers[lastone].link + '">' + offers[lastone].priceSuffix + ' ab</td><td class="px_td_last_last" valign="top"><p class="px_sl_price"><a href="' + offers[lastone].link + '">&euro; ' + offers[lastone].price + '</a></p></td>' : '<td class="px_td_last_last" colspan="2"><p class="px_sl_bookedout" style="font-size:12px;">' + offers[lastone].linkText + '</p></td>')
                    + '</tr>'
                    + '</table>'
                    + '</div>'
                    + '<div style="clear:both;"></div>';
        return html;
    }
    
    var html = "";
    html = html 
        + '<div class="px_sl_small">';
    var color = "#BFEB00";
    if  (data.page.extra6 != undefined) color = unescape(data.page.extra6);
    var sloffers = data.getByCode("sl_offer");
    var doubled = false;
    if  (data.page.extra1 != undefined){ if (data.page.extra1.toLowerCase() == "double") doubled = true;}
    var countoffers = 0;
    if  (data.page.extra3 != undefined) countoffers = unescape(data.page.extra3);
    var counter = 0;
    var eachbox = 0;
    for (var i = 0; i<sloffers.length; i++)
    {
        if (sloffers[i].destination.country != "" || sloffers[i].type=="Freetext") counter = counter+1;
    }
    if (doubled){
        if (counter%2 == 0)  eachbox= counter/2;
        else eachbox = (counter-1)/2;       
    }
    else eachbox = counter;
    if (!doubled) {html = html + getSmalllist(sloffers, 0, eachbox, doubled, false, color, countoffers);}
    else{
        html = html 
        + '<div style="float:left;">' 
        + getSmalllist(sloffers, 0, eachbox, doubled, false, color, countoffers)
        + '</div>'
        + '<div style="float:left;">'
        + getSmalllist(sloffers, eachbox, eachbox*2, doubled, true, color, countoffers)
        + '</div>'
        + '<div style="clear:both;"></div>';
    } 
    html = html
        + '</div>';
    
    return html;
}

function getSeoBoxSmall(data){
    this.SeoSmallBox = function(offer, color){
        var html ='';
            html = html
                + '<div class="px_seo_ob_s" style="background-color:' + color + ';">'
                + '<div class="px_seo_ob_s_head">'
                + (color.toLowerCase() == '#6699ff' ? '<h1 style="color:#FFFFFF;">' : '<h1>')
                + (color.toLowerCase() == '#6699ff' ? '<a href="' + offer.link + '" style="color:#FFFFFF;">' : '<a href="' + offer.link + '">')
                + '<b>' + offer.headline + '</b><br/>' + getTuiClassTag(offer.textline1, color.toLowerCase() == '#6699ff')
                + '</a></h1>'
                + '</div>'
                + '<div class="px_seo_ob_s_img">'
                + '<a href="' + offer.link + '">'
                + '<img src="' + offer.getPicture() + '" alt="" border="0" />'
                + '</a>'
                + '</div>'
                + '<div class="px_seo_txt_div">'
                + '<p class="px_seo_txt">'
                + '<a href="' + offer.link + '">'
                + getTuiClassTag(offer.textline2, color.toLowerCase() == '#6699ff') + '<br/>'
                + offer.textline3 + '</a></p>'
                + '<p class="px_seo_prc"'
                + (color.toLowerCase() == '#6699ff' ? 'style="color:#FFFFFF;">' : '>')
                + (color.toLowerCase() == '#6699ff' ? '<a href="' + offer.link + '" style="color:#FFFFFF; background: url(\'http://www.tui.com/fileadmin/tui/pixell/pics/icons/arrow_white_right.gif\') no-repeat bottom left;" >' : '<a href="' + offer.link + '">')
                + offer.priceSuffix + ' ab &euro; ' + offer.price 
                + '</a>'
                + '</p>'
                + '</div>'
                + '</div>';
        
        return html;
    }
    var color = "#BFEB00";
    if  (data.page.extra6 != undefined) color = unescape(data.page.extra6);
    var html='';
    var offers = data.getByCode('ob_offer');
    for(var i=0; i<offers.length; i++){
        if (offers[i].type != "Freetext")
            html= html + SeoSmallBox(offers[i], color);
    }
    html = html + '<div style="clear:both;"></div>';
    return html;
}
function getSeoBoxMedium(data){
    
    this.SeoMediumBox = function(offer, color){
        
        var html = '';
        html = html 
            + '<div class="px_seo_ob_m" style="background-color:' + color + ';">'
            + '<div class="px_seo_inner">'
            + '<div>'
            + (color.toLowerCase() == '#6699ff' ? '<h1 style="color:#FFFFFF;">' : '<h1>')
            + '<a href="' + offer.link + '">'
            + '<b>' + offer.headline + '</b><br/>' + offer.textline1 + '<br/>' + getTuiClassTag(offer.textline2, color.toLowerCase() == '#6699ff')
            + '</a></h1>'
            + '<p class="px_seo_txt">'
            + '<a href="' + offer.link + '">'
            + offer.textline3 + '<br/>' + offer.textline4 + '</p>'
            + '</a>'
            + '<p class="px_seo_prc"'
            + (color.toLowerCase() == '#6699ff' ? 'style="color:#FFFFFF;">' : '>')
            + (color.toLowerCase() == '#6699ff' ? '<a href="' + offer.link + '" style="background: url(\'http://www.tui.com/fileadmin/tui/pixell/pics/icons/arrow_white_right.gif\') no-repeat top left;" >' : '<a href="' + offer.link + '">')
            + offer.priceSuffix + ' ab <span>&euro; ' + offer.price + '</span>'
            + '</a>'
            + '</p>'
            + '</div>'
            + '</div>'
            + '<div class="px_seo_inner">'
            + '<a href="' + offer.link + '">'
            + '<img src="' + offer.getPicture() + '" alt="" border="0" />'
            + '</a>'
            + '</div>'
            + '<div style="clear:both;"></div>'
            + '</div>'
            
    
        return html;
    }
    
    var color = "#BFEB00";
    if  (data.page.extra6 != undefined) color = unescape(data.page.extra6);
    var html='';
    var offers = data.getByCode('ob_offer');
    for(var i=0; i<offers.length; i++){
        if (offers[i].type != "Freetext")
            html= html + SeoMediumBox(offers[i], color);
    }
    
    return html;
}

function getCinemaBox(data)
{
    this.getcinemaheader = function(offer, isfirst, color){
        var html = "";

            var sep = ", ";
            if (jQuery.trim(offer.textline1) == "") sep = "";
            
            
            html = html
                + (isfirst ? '<div class="px_cinema_container_header" id="px_cinema_' + offer.positionId + '">' : '<div class="px_cinema_container_header" id="px_cinema_' + offer.positionId + '" style="display:none;">')
                + '<div style="width:54px; height:321px; float:left;"></div>'
                + '<div style="float:left;">'
                + '<div class="px_cinema_container_headline" style="background-color:' + color + ';">'
                + '<div class="px_leftside">'
                + (color.toLowerCase() == '#6699ff' ? '<h1 style="color:#FFFFFF;">' : '<h1>')
                + '<b>' + offer.headline + sep + offer.textline1 + '</b><br />' + getTuiClassTag(offer.textline2, color.toLowerCase() == '#6699ff') + '</h1>'
                + '</div>'
                + '<div class="px_rightside">';
                if (offer.type!="Freetext"){
                    html = html
                        + (color.toLowerCase() == '#6699ff' ? '<span class="px_priceSpan"><a href="' + offer.link + '" style="color:#FFFFFF;"><b style="font-weight:normal;"> ' + offer.priceSuffix + ' </b>' + '<b style="font-size:24px; font-weight:normal;">ab &euro; ' + offer.price + '</b></a></span>' :'<span class="px_priceSpan"><a href="' + offer.link + '"><b style="font-weight:normal;"> ' + offer.priceSuffix + ' </b>' + '<b style="color:#6699FF; font-size:24px; font-weight:normal;">ab &euro; ' + offer.price + '</b></a></span>')
                        + '<span class="px_price" style="padding-right:10px;">'
                        + offer.textline3 + '</span>'
                        + '<span style="clear:both;"></span>';
                }
                else {
                    html = html 
                     + '<span class="px_cinema_bookedout">' + offer.linkText + '</span>';
                }
                
                var bigPic = offer.getPicture().replace("203x74.jpg", "621x261.jpg");
                html = html
                + '</div>'
                + '<div style="clear:both;"></div>'
                + '</div>'
                + '<div class="px_cinema_container_headline_img">'
                + (offer.type !="Freetext" ? '<a href="' + offer.link + '">' : '')
                + (offer.getPicture().indexOf("203x74") > -1 ? '<img src="' + bigPic + '" width="621" height="261" alt="" border="0" />' : '<img src="' + offer.getPicture() + '" width="621" height="261" alt="" border="0" />')
                + (offer.type !="Freetext" ? '</a>' : '')
                + '</div>'
                + '</div>'
                + '<div style="clear:both;"></div>'
                + '</div>';
        
        return html;    
    }
    
    this.getcinemascrollboxes = function(offer, color, data)
    {
        var pageid='px_page_' + data.page.id;
        var html = "";
            html = html
                + '<div class="px_cinema_scrollitem" onclick="ShowMenu(\'px_cinema_' + offer.positionId + '\', \'' + pageid + '\');">'
                + '<div class="px_cinema_ob_header" style="'
                + (color.toLowerCase() == '#6699ff' ? 'background:' + color + ' url(\'http://www.tui.com/fileadmin/tui/pixell/pics/icons/arrow_white_right.gif\') no-repeat 5% 40%;' : 'background-color:' + color + ';')
                + '">'
                + (color.toLowerCase() == '#6699ff' ? '<h1 style="padding-top:6px; color:#FFFFFF"><b>' + offer.headline + '</b></h1>' : '<h1 style="padding-top:6px;"><b>' + offer.headline + '</b></h1>')
                + '</div>'
                + '<div class="px_cinema_ob_footer">'
                + '<img src="' + offer.getPicture() + '" alt="" width="203" height="74" />'
                + '</div>'
                + '</div>';
        
        return html;
    }
                
    var html = "";
    var color = "#BFEB00";
    if  (data.page.extra6 != undefined) color = unescape(data.page.extra6);
    var cboffers=data.getByCode("cb_offer");
    var isfirst = true;
    html = html 
        + '<div class="px_cinema_box" id="px_page_' + data.page.id + '">';
    for (var i=0; i < cboffers.length; i++)
    {
        if (cboffers[i].type == "Freetext"  || cboffers[i].destination.country != "" ){
            html = html + getcinemaheader(cboffers[i], isfirst, color);
            isfirst = false;
        }
    }
    html = html
        + '<div class="px_cinema_scrollcontainer">'
        + '<div class="px_cinema_scrollleft" id="px_cinema_scrollleft_px_scrollparent_' + data.page.id + '"></div>'
        + '<div class="px_cinema_container_scrollbar">'
        + '<div class="px_allBoxes" id="px_scrollparent_' + data.page.id + '">';
    
    for (var i=0; i < cboffers.length; i++)
    {
        if (cboffers[i].type == "Freetext"  || cboffers[i].destination.country != "" )
            html = html + getcinemascrollboxes(cboffers[i], color, data);
    }
    
    html = html 
        + '<div style="clear:both;"></div>'
        + '</div>'
        + '</div>'
        + '<div class="px_cinema_scrollright" id="px_cinema_scrollright_px_scrollparent_' + data.page.id + '"></div> '
        + '</div>';
    
    return html;
    
}

function getBoxScrolling(type, isdouble, parentid)
{
    if (type == "wide"){
            $('.px_scrollparent_w').serialScroll(
            {
            target:'.px_scroll_core',
            items:'div.px_ob_wide', // Selector to the items ( relative to the matched elements, '#sections' in this case )
            prev:'div.px_scrollLeft',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
            next:'div.px_scrollRight',// 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:1,
            cycle:false,
            onBefore:function( e, elem, $pane, $items, pos){
                UpdateScrollNavigation(pos, "px_scrollLeft_" + elem.parentNode.id, "px_scrollRight_" + elem.parentNode.id, ".px_ob_wide", 2, elem.parentNode.id);}
            }
        );
        UpdateScrollNavigation(0, "px_scrollLeft_" + parentid, "px_scrollRight_" + parentid, ".px_ob_wide", 2, parentid);    
    }
    else if (type == "small" && !isdouble) {
            $('.px_scrollparent_s').serialScroll(
            {
            target:'.px_scroll_core_s',
            items:'div.px_ob_small', // Selector to the items ( relative to the matched elements, '#sections' in this case )
            prev:'div.px_scrollLeft_s',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
            next:'div.px_scrollRight_s',// 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:false,
            onBefore:function( e, elem, $pane, $items, pos){
                UpdateScrollNavigation(pos, "px_scrollLeft_s_" + elem.parentNode.id, "px_scrollRight_s_" + elem.parentNode.id, ".px_ob_small", 3, elem.parentNode.id);}
            });
        UpdateScrollNavigation(0, "px_scrollLeft_s_" + parentid, "px_scrollRight_s_" + parentid, ".px_ob_small", 3, parentid);
    }
    else if (type == "small" && isdouble) {
            $('.px_scrollparent_s_doubled').serialScroll(
            {
            target:'.px_scroll_core_s_doubled',
            items:'div.px_ob_small_parent_doubled', // Selector to the items ( relative to the matched elements, '#sections' in this case )
            prev:'div.px_scrollLeft_s_doubled',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
            next:'div.px_scrollRight_s_doubled',// 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:false,
            onBefore:function( e, elem, $pane, $items, pos){
                UpdateScrollNavigation(pos, "px_scrollLeft_s_doubled_" + elem.parentNode.id, "px_scrollRight_s_doubled_" + elem.parentNode.id, ".px_ob_small_parent_doubled", 3, elem.parentNode.id);}
            });
        UpdateScrollNavigation(0, "px_scrollLeft_s_doubled_" + parentid, "px_scrollRight_s_doubled_" + parentid, ".px_ob_small_parent_doubled", 3, parentid);
    }
    else if (type == "cinema"){
        $('.px_cinema_scrollcontainer').serialScroll(
            {
            target:'.px_cinema_container_scrollbar',
            items:'div.px_cinema_scrollitem', // Selector to the items ( relative to the matched elements, '#sections' in this case )
            prev:'div.px_cinema_scrollleft',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
            next:'div.px_cinema_scrollright',// 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:false,
            onBefore:function( e, elem, $pane, $items, pos){
                UpdateScrollNavigation(pos, "px_cinema_scrollleft_" + elem.parentNode.id, "px_cinema_scrollright_" + elem.parentNode.id, ".px_cinema_scrollitem", 3, elem.parentNode.id);}
            });
        UpdateScrollNavigation(0, "px_cinema_scrollleft_" + parentid, "px_cinema_scrollright_" + parentid, ".px_cinema_scrollitem", 3, parentid);
    }
}