function init(section, totalScrollImages)
{
    var hasScroll = totalScrollImages != null && totalScrollImages != 0;
    
    createViewer(section, hasScroll);

    if (createScroll)
    {
        createScroll(section, totalScrollImages);
    }
}

var sectionName;

// Crea dinamicamente el visor y el menu para no repetir el mapa en cada página
function createViewer(section, hasScroll)
{
	sectionName = section;
    var html = "<img src='images/" + section + ".gif' class='mainImg' usemap='#green' />" +
               " <map name='green' id='green'>" +
               "     <area shape='rect' coords='2, 41, 141, 63' href='justlikeheaven.html' >" +
               "     <area shape='rect' coords='146, 41, 240, 63' href='publicidad.html' >" +
               "     <area shape='rect' coords='241, 41, 359, 63' href='comunicacion.html' >" +
               "     <area shape='rect' coords='360, 41, 428, 63' href='eventos.html' >" +
               "     <area shape='rect' coords='429, 41, 527, 63' href='produccion.html' >" +
               "     <area shape='rect' coords='528, 41, 605, 63' href='clientes.html' >" +
               "     <area shape='rect' coords='606, 41, 676, 63' href='nosotros.html' >" +
               " </map>";

    if (hasScroll)
    {
        html += " <div id='thumbnailsPanel'>" +
                 "     <div id='thumbsScrollPanel'>" +
                 "        <div id='thumbsScrollPanel2'></div>" +
                 "     </div>" +
                 " </div>" +
                 " <div id='imageViewerPanel'></div>" +
                 " <img src='images/" + section + "_titulo.png' class='titleImage'>";
    }

    document.getElementById('centerContainer').innerHTML = html;
}

// Crea el scroll de imagenes y selecciona la primera en el visor
function createScroll(section, totalScrollImages)
{
    var isFirst = true;

    for (var i = 1; i <= totalScrollImages; i++)
    {
        var smallSrc = "images/" + section + "_p" + i + ".png";
        var bigSrc = "images/" + section + "_g" + i + ".jpg";

        if (isFirst)
        {
		    // mostrar la primera
		    showImage(bigSrc);
            isFirst = false;
        }

        var img = document.createElement('img');
        img.src = smallSrc;
        img.onclick = createFunc(bigSrc);
        document.getElementById('thumbsScrollPanel2').appendChild(img);
    }
}

function createFunc(src)
{
    return function() { showImage(src) };
}

function showImage(src)
{
    var panel = document.getElementById('imageViewerPanel');
    removeChildNodes(panel);
    
    var img = document.createElement('img');
    img.src = src;
    img.style.display = 'none';
    panel.appendChild(img);
    $(img).fadeIn();
}

function removeChildNodes(ctrl)
{
    while (ctrl.childNodes[0])
    {
        ctrl.removeChild(ctrl.childNodes[0]);
    }
}

function scrollPanelLeft()
{
    var panel = document.getElementById("thumbsScrollPanel2");      
    var limit = sectionName == "publicidad" ? (panel.offsetWidth - 300) * -1 : (panel.offsetWidth - 600) * -1;

    if(panel.offsetLeft > limit)
    {    
        $(panel).animate( { left: "-=400px" }, { "duration": "slow", "easing": "easeInOutCubic" });
    }  
}

function scrollPanelRight()
{
    var panel = document.getElementById("thumbsScrollPanel2");      
    var limit = -400;

    if(panel.offsetLeft <= limit)
    {    
        $(panel).animate( { left: "+=400px" }, { "duration": "slow", "easing": "easeInOutCubic" });
    }  
}