/**
 * Screen Concept Website
 *
 * The www.screenconcept.ch website is heavily using JavaScript
 * for visual enjoyment, but the whole site degrades beautifully
 * using the unobtrusive JavaScript philosophy.
 *
 * @author Pascal Näf
 * @author Michael Kessler
 * @author Roman Simecek
 *
 */

// css sprite background position for the arrows
ARROW_RIGHT = '0px 0px';
ARROW_LEFT = '0px 28px';
IE_ARROW_RIGHT = '0px';
IE_ARROW_LEFT = '28px';
TEAM_MOUSEOVER_COLOR_TOP = '#333333';
TEAM_MOUSEOVER_COLOR_BOTTOM = '#87921F'; // '#C9D313';
TEAM_MOUSEOUT_COLOR = '#cccccc';
TEAM_ACTIVE_COLOR_BOTTOM = '#000000';

// position of the main navigation divs
firstLevelNavigationPosition = "left"
secondLevelNavigationPosition = "right";

// active main navigation element
activeNavigationElement = null;

// Global AJAX variables for simple double request prevention
lastHref = "";
xhr = null;

//Google maps div
map = null
/**
 * Document is loaded. The magic starts...
 */
$(function() {

  // Bye, bye IE6. Nobody misses you!
  if (isInternetExplorer6()) {
    window.location.replace("/no-ie-6");
  }
  
  initialize();
  
  // Intro
  showSlideshowIntro();
  //showVisionMarquee();
    
  // Navigation behaviour
  addArrowNavigationBehaviour();
  
  // Add behaviour for the different pages
  addScreenConceptBehaviour();
  addWorkBehaviour();
  addServicesBehaviour();
  addBlogBehaviour();
});

/**
 * Bind arrow navigation logic to the CSS sprite
 */
function addArrowNavigationBehaviour() {

  $('#arrow_navigation').each(function(index, element) {
    
    console.log("***** Add arrow navigation behaviour", this);
    
    $(this).bind("click", function(event) {
      
      if ($('#arrow_navigation').css("background-position") ==  ARROW_LEFT || $(this).css("background-position-y") == IE_ARROW_LEFT) {
        move1stLevelNavigationLeft();
        if (secondLevelNavigationPosition == "right")  activeNavigationElement = null;
      }
      
      if ($('#arrow_navigation').css("background-position") == ARROW_RIGHT || $(this).css("background-position-y") == IE_ARROW_RIGHT) {
        move2ndLevelNavigationRight();
      }
      
      lastHref = '';
      setNavigationColor(null);
    });
  });
}

/**
 * Load 2nd level Screen Concept navigation
 */
function addScreenConceptBehaviour() {
  
  // Screenconcept link enhancement
  $("#screenconcept a.dynamic_image_extension_hover").each(function(index, element) {
    
    console.log("***** Add Screen Concept menu behaviour", this);
    
    $(this).bind("click", function(event) {
      
      activeNavigationElement = this;
      setNavigationColor();
      
      href = $(this).attr('href');
      if (href != lastHref) {
        lastHref = href;
        
        classAttribut = $(this).parent().parent().attr('class');
        if (classAttribut == 'main_navigation_1_level_list') {
          
          move1stLevelNavigationLeft();
          
          // Load screenconcept 2ns level navigation
          $('#main_navigation_2_level').fadeOut(125, function() {
            $('#spinner').fadeIn(125, function() {
              xhr = $.ajax({
                url: href,
                success: function(result) {
                  $('#main_navigation_2_level').html(result);
                },
                complete: function() {
                  $('#spinner').fadeOut(125, function() {
                    $('#main_navigation_2_level').fadeIn(125);
                  });
                  add2ndLevelBehaviour();
                }
              });
            });
          });
        }
      }
      
      event.preventDefault();
    });
  });   
}

/**
 * Load and add behaviour for the work page
 */
function addWorkBehaviour() {
  
  // Work link enhancement
  $("#work a.dynamic_image_extension_hover").each(function(index, element) {
    
    console.log("***** Add work menu behaviour", this);
    
    $(this).bind("click", function(event) {
      
      href = $(this).attr('href');
      if (href != lastHref) {
        lastHref = href;
        
        activeNavigationElement = this;
        setNavigationColor(this);
        
        classAttribut = $(this).parent().parent().attr('class');
        if (classAttribut == 'main_navigation_1_level_list') {
         
          $('#main_navigation_2_level').fadeOut(125, function() {
            
            move1stLevelNavigationLeft();
            
            // Load work page
            $('#spinner').fadeIn(125, function() {
              xhr = $.ajax({
                url: href,
                success: function(result) {
                  $('#main_navigation_2_level').html(result);
                },
                complete: function() {
                  $('#spinner').fadeOut(125, function() {
                    $('#main_navigation_2_level').fadeIn(125);
                  });
                  add2ndLevelBehaviour();
                }
              });
            });
          });
        } 
      }
      
      event.preventDefault();
    });
  });
}

/**
 * Load and add behaviour for the services page
 */
function addServicesBehaviour() {
  
  // Services link enhancement
  $("#services a.dynamic_image_extension_hover").each(function(index, element) {
    
    console.log("***** Add services menu behaviour", this);
    
    $(this).bind("click", function(event) {
      
      activeNavigationElement = this;
      setNavigationColor(this);
      
      href = $(this).attr('href');
      if (href != lastHref) {
        lastHref = href;
        
        move1stLevelNavigationLeft();
        
        // Load services
        $('#content').fadeOut(125, function() {
          $('#spinner').fadeIn(125, function() {
            xhr = $.ajax({
              url: href,
              success: function(result) {
                $('#content_scroll').html(result);
              },
              complete: function() {
                $('#spinner').fadeOut(125, function() {
                  $('#content').fadeIn(125);
                  addServicesPageBehaviour();
                 });
              }
            });
          });
        });
      }
      
      event.preventDefault();
    });
  });
}

/**
 * Add behaviour for the service page
 */
function addServicesPageBehaviour() {
  
  console.log("***** Add services page behaviour");
  
  $('#js_services').fadeIn(250);
  $('#js_services_target').show().slideUp(0);
  
  // AJAX loading of services parts
  $('#js_services a').each(function(index, element) {
    
    // Bind to each approach link
    $(this).bind("click", function(event) {
      href = $(this).attr('href');
      
      // Deselect every approach link
      $('#js_services a').each(function(index, element) {
        $(this).removeClass('selected');
      });
      
      // Select current clicked link
      $(this).addClass('selected');
      
      // Start loading the approach text
      $('#spinner').fadeIn(125, function() {
        xhr = $.ajax({
          url: href,
          beforeSend: function() {
            $('#js_services_target').slideUp(125);
          },
          success: function(result) {
            $('#js_services_target').html(result);
          },
          complete: function() {
            $('#spinner').fadeOut(125, function() {
              $('#js_services_target').slideDown(125);
            });
          }
        });
      });
      
      event.preventDefault();
    });
  });  
}

/**
 * Load and add behaviour for the blog page
 */
function addBlogBehaviour() {
  
  // Blog link enhancement
  $("#blog a.dynamic_image_extension_hover").each(function(index, element) {
    
    console.log("***** Add blog behaviour", this);
    
    $(this).bind("click", function(event) {
      
      activeNavigationElement = this;
      setNavigationColor(this);
      
      href = $(this).attr('href');
      if (href != lastHref) {
        lastHref = href;
        
        move1stLevelNavigationRight();
        
        // Load blog
        $('#content').fadeOut(125, function() {
          $('#spinner').fadeIn(125, function() {
            xhr = $.ajax({
              url: href,
              success: function(result) {
                $('#content_scroll').html(result);
              },
              complete: function() {
                // Show blog and prepare scrollbar
                $('#spinner').fadeOut(125, function() {
                  $(document).oneTime(100, function() {
                    $('#content_scroll').jScrollPane({ scrollbarMargin:30, dragMaxHeight:50, scrollbarWidth:5 });
                  });
                  $('#content').fadeIn(125);
                });
              }
            });
          });
        });
      }
      
      event.preventDefault();
    });
  });
}

/**
 * Shows the vision marquee
 */
function showVisionMarquee() {
  
  console.log("***** Show vision marquee", this);
  
  $('#main').addClass('intro_1');

  scroll1 = $('#scroll_line_1').marquee();
  scroll2 = $('#scroll_line_2').marquee();
  scroll3 = $('#scroll_line_3').marquee();
  scroll4 = $('#scroll_line_4').marquee();

  scroll1.trigger('stop')
  scroll2.trigger('stop')
  scroll3.trigger('stop')
  scroll4.trigger('stop')

  scroll1.bind("mouseover", function () {
    $(this).trigger('stop');
  });
  scroll1.bind("mouseout", function () {
    $(this).trigger('start');
  });

  $(document).oneTime($.randomBetween(100, 1000), function() {
    scroll1.trigger('start')
  });
  $(document).oneTime($.randomBetween(100, 1000), function() {
    scroll2.trigger('start')
  });
  $(document).oneTime($.randomBetween(100, 1000), function() {
    scroll3.trigger('start')
  });
  $(document).oneTime($.randomBetween(100, 1000), function() {
    scroll4.trigger('start')
  });
}

/**
 * Reset the main navigation level
 */
function reset1stLevelNavigation() {
  
  console.log("***** Reset 1st level navigation");
  
  $('#main_navigation_1_level').animate({"left": "35px"}, "slow");
  $('#main_navigation_2_level').fadeOut(125);
  
  $('#content').css("left", "400px");
  $('#content').css("width", "590px");
  $('#content').fadeOut(125); 
  $('#content_scroll').css("width", "590px");
  
  $('#arrow_navigation').fadeOut(125);
  
  $('#vision').fadeOut(125);
  
  firstLevelNavigationPosition = "left";  
  activeNavigationElement == null;
  
  $('#content_scroll').jScrollPaneRemove();
}

/**
 * Moves the main navgation's first level to the left of the page
 */
function move1stLevelNavigationLeft() {
  if (firstLevelNavigationPosition != "left") {
    
    console.log("***** Move 1st level navigation to left");
    
    $('#main_navigation_1_level').animate({"left": "35px"}, "slow");
    $('#main_navigation_2_level').hide();
    
    $('#content').hide(); 
    $('#content').css("left", "400px");
    $('#content').css("width", "590px");
    
    $('#arrow_navigation').css("background-position", "0px 14px");
    $('#arrow_navigation').fadeOut(125);
    
    firstLevelNavigationPosition = "left";  
    
    $('#vision').fadeOut(125);
    
    $('#content_scroll').jScrollPaneRemove();
    $('#content_scroll').css("width", "590px");
    
  } else {
    reset1stLevelNavigation();
  }
}

/**
 * Moves the main navgation's first level to the right of the page
 */
function move1stLevelNavigationRight() {
  if (firstLevelNavigationPosition != "right") {
    
    console.log("***** Move 1st level navigation to right");
    
    $('#main_navigation_1_level').animate({"left": "400px"}, "slow"); 
    $('#main_navigation_2_level').fadeOut(125);
    
    $('#content').css("left", "35px");
    $('#content').css("width", "340px");
    
    $('#arrow_navigation').css("background-position", ARROW_LEFT);
    $('#arrow_navigation').fadeIn(125);
    
    firstLevelNavigationPosition = "right";
    
    $('#vision').fadeOut(125);
    
    $('#content_scroll').jScrollPaneRemove();
    $('#content_scroll').css("width", "340px");
  }
}

/**
 * Moves the main navgation's second level to the left of the page
 */
function move2ndLevelNavigationLeft() {
  if (secondLevelNavigationPosition != "left") {
    
    console.log("***** Move 2nd level navigation to left");
    
    $('#main_navigation_1_level').fadeOut(125);
    $('#main_navigation_2_level').animate({"left": "35px"}, "slow");
    
    $('#content').css("left", "400px");
    $('#content').css("width", "590px");
    $('#content_scroll').css("width", "590px");
    
    $('#arrow_navigation').css("background-position", ARROW_RIGHT);
    $('#arrow_navigation').fadeIn(125);
    
    secondLevelNavigationPosition = "left";
    
    $('#vision').fadeOut(125);
    $('#content_scroll').jScrollPaneRemove();
  }
}

/**
 * Moves the main navgation's second level to the right of the page
 */
function move2ndLevelNavigationRight() {
  if (secondLevelNavigationPosition != "right") {
    
    console.log("***** Move 2nd level navigation to right");
    
    $('#main_navigation_1_level').fadeIn(200);
    $('#main_navigation_2_level').animate({"left": "400px"}, "slow");
    
    $('#content').hide();
    
    $('#arrow_navigation').css("background-position", "0px 14px");
    $('#arrow_navigation').fadeOut(125);
    
    secondLevelNavigationPosition = "right";
    
    $('#vision').fadeOut(125);
    $('#content_scroll').jScrollPaneRemove();
  }
}

/**
 * Sets the colors for the navigation
 *
 * @param activeElement - the element that is active at the moment
 */
function setNavigationColor(activeElement) {

  console.log("***** Set navigation color for", activeElement);
    
  // Loop through each dynamic generated image
  $("a.dynamic_image_extension_hover").each(function(index, element) {
    
    if ($(this).parent().attr('id') != $(activeElement).parent().attr('id') && 
        $(activeNavigationElement).parent().attr('id') != $(this).parent().attr('id')) {
        
        // Switch CSS sprites  
        $(this).bind("mouseover", function(event) {
          $(this).css("background-position", "left bottom");
        });
        
        $(this).bind("mouseout", function(event) {
          $(this).css("background-position", "left top");
        });
        
        $(this).css("background-position", "left top");
     }
  });
  
  if (activeNavigationElement != null) {
    $(activeNavigationElement).css("background-position", "left bottom");
    $(activeNavigationElement).unbind("mouseover");
    $(activeNavigationElement).unbind("mouseout");
  }
  
  if (activeElement != null) {
    $(activeElement).css("background-position", "left bottom");
    $(activeElement).unbind("mouseover");
    $(activeElement).unbind("mouseout");  
  }
}

/**
 * Actions for the second level pages
 *
 * - 2nd level navigation
 */
function add2ndLevelBehaviour() {

  console.log("***** Add 2nd level page behaviour");
    
  // 2nd Level navigation
  $("#main_navigation_2_level ul li a.dynamic_image_extension_hover").each(function(index, element) {
      
    // Bind action on each dynamic image link
    $(this).bind("click", function(event) {
    
      href = $(this).attr('href');
      if (href != lastHref) {
        lastHref = href;
        
        // Colorize navigation
        setNavigationColor(this);
        move2ndLevelNavigationLeft();
        
        // Load content with spinner
        $('#content').fadeOut(125, function() {
          $('#spinner').fadeIn(125, function() {
            xhr = $.ajax({
              url: href,
              success: function(result) {
                $('#content_scroll').html(result);
              },
              complete: function() {
                // Show content and add behaviour
                $('#spinner').fadeOut(125, function() {
                  $('#content').fadeIn(125);
                  add3rdLevelBehaviour();
                });
              }
            });
          });
        });
      }
      
      event.preventDefault();
    });
  });
}

/**
 * Behaviour for the third level pages
 *
 * - Team
 * - Approach
 * - Network
 */
function add3rdLevelBehaviour() {
  
  console.log("***** Add 3rd level behaviour");
  
  // Network
  $('#network_list a').hide().fadeIn(2000);
  $('#network_list li').animate({ height: "50px" }, 1000);
  
  // Update google maps size
  if (map != null) {
    map.checkResize();
    map.setCenter(new GLatLng(47.1902374158817,8.48230361938477),15);map.setMapType(G_NORMAL_MAP);
  }
  
  addTeamBehaviour();
  addApproachBehaviour();
  addReferencesBehaviour();
}

/**
 * Add behaviour for the team page
 */
function addTeamBehaviour() {
  if ($('#team_list').length > 0) {
    
    console.log("***** Add team page behaviour");
    
    // Team accordion
    $('#team_list').accordion({ animated: 'bounceslide', active: false, header: 'a.header', autoHeight: false });
    $('#team_area').oneTime(300, function() {
      $('#team_area').slideDown(700);
    });
    
    // Highlight team member depending on its class
    $('#team_area a').each(function(index, element) {
      
      $(this).bind("click", function(event) {
        event.preventDefault();
				if($(this).attr('class')!='selected'){
	        $(this).css('color', TEAM_MOUSEOVER_COLOR_TOP);
	        tag = $(this).attr('href')
					pos = tag.lastIndexOf("/"); 
					if (pos > -1) {
						tag = tag.substring(pos + 1);
					};
					$('#team_list a').each(function(index, element) {
						$(this).css('color', '');
					});
	        $('#team_list a.' + tag).each(function(index, element) {
	          $(this).css('color', TEAM_ACTIVE_COLOR_BOTTOM);
	        });
					$('#team_area ul li a').each(function(index, element) {
						$(this).removeClass('selected');
						$(this).css('color', '');
					});
					$(this).addClass('selected');
				}else{
					$(this).css('color', TEAM_MOUSEOUT_COLOR);
					tag = $(this).attr('href');
					pos = tag.lastIndexOf("/"); 
					if (pos > -1) {
						tag = tag.substring(pos + 1);
					};
					$('#team_list a.' + tag).each(function(index, element) {
						$(this).css('color', '');
					});
					$(this).removeClass('selected');
				}
      });
      
      // Highlight team members and area
      $(this).bind("mouseover", function(event) {
				if($(this).attr('class')!='selected'){
	        $(this).css('color', TEAM_MOUSEOVER_COLOR_TOP);
	        tag = $(this).attr('href')
					pos = tag.lastIndexOf("/"); 
					if (pos > -1) {
						tag = tag.substring(pos + 1);
					};
	        $('#team_list a.' + tag).each(function(index, element) {
	          $(this).css('color', TEAM_MOUSEOVER_COLOR_BOTTOM);
	        });
				}
      });
      
      // Deselect team members and area
      $(this).bind("mouseout", function(event) {
				if($(this).attr('class')!='selected'){
	        $(this).css('color', TEAM_MOUSEOUT_COLOR);
	        tag = $(this).attr('href');
					pos = tag.lastIndexOf("/"); 
					if (pos > -1) {
						tag = tag.substring(pos + 1);
					};
	        $('#team_list a.' + tag).each(function(index, element) {
	          $(this).css('color', '');
	        });
				}
      });
      
    });
  }
}

/**
 * Behavour for the JS version of the approach page
 */
function addApproachBehaviour() {

  if ($('#js_approach').length > 0) {
    
    console.log("***** Add approach page behaviour");
    
    $('#js_approach').fadeIn(250);
    $('#js_approach_target').show().slideUp(0);
    
    // AJAX loading of approach parts
    $('#js_approach a').each(function(index, element) {
      
      // Bind to each approach link
      $(this).bind("click", function(event) {
        href = $(this).attr('href');
        
        // Deselect every approach link
        $('#js_approach a').each(function(index, element) {
          $(this).removeClass('selected');
        });
        
        // Select current clicked link
        $(this).addClass('selected');
        
        // Start loading the approach text
        $('#spinner').fadeIn(125, function() {
          xhr = $.ajax({
            url: href,
            beforeSend: function() {
              $('#js_approach_target').slideUp(125);
            },
            success: function(result) {
              $('#js_approach_target').html(result);
            },
            complete: function() {
              $('#spinner').fadeOut(125, function() {
                $('#js_approach_target').slideDown(125);
              });
            }
          });
        });
        
        event.preventDefault();
      });
    });
  }
}

/**
 * Initialize general stuff for the application
 */
function initialize() {
  // logger for all
  try { console.log("***** Initalize Screen Concept website"); } catch(e) { console = { log: function() {} } }
  
  // General AJAX setup
  $.ajaxSetup({
    headers: { "X-Requested-With" : "XMLHttpRequest" }
  });
  
  // Global AJAX handlers
  $().ajaxStart(onStart)
     .ajaxComplete(onComplete)
     .ajaxError(onError);
  
  //Set the right content hight *bad hack*
  resizeContent();
  $(window).bind('resize', function() {
    resizeContent();
   });

  // Add a div screen center function
  jQuery.fn.centerScreen = function(loaded) {
    
    console.log("***** center object", this);
    
    var object = this;
    var top = $(window).height() / 2 - this.height() / 2;
    var left = $(window).width() / 2 - this.width() / 2;
    
    if (!loaded) {
      // object not loaded, direct position
      object.css('top', top);
      object.css('left', left);
      
      // Add resize handler
      $(window).resize(function() { 
        object.centerScreen(!loaded); 
      });
      
    } else {
      // object already loaded, animate to new position
      object.stop();
      object.animate({ top: top, left: left }, 200, 'linear');
    }
  }  
}

function resizeContent() {
  var position = $('#content').position();
  $('#content').css('height',$('#main').height() -  position.top - 10);
  $('#content_scroll').css('height',$('#content').height());	
}
/**
 * Global AJAX event handler
 * 
 * @param event - the ajax event
 */
function onStart(event) {
    if (xhr != null) xhr.abort();
}

/**
 * Global AJAX event handler
 * 
 * @param event - the ajax event
 * @param jxhr - the xml http request object
 * @param settings - the jquery ajax settings
 */
function onComplete(event, jxhr, settings) {
    xhr = null;
    pageTracker._trackPageview(settings.url);
}

/**
 * Global AJAX event handler
 * 
 * @param event - the ajax event
 * @param jxhr - the xml http request object
 * @param settings - the jquery ajax settings
 * @param err - the error occured
 */
function onError(event, jxhr, settings, err) {
  console.log("***** AJAX error", event, jxhr, settings, err);
}

/**
 * Tests if the current browser is the
 * ugly Internet Explorer 6
 *
 * @return true if IE6
 */
function isInternetExplorer6() {
    return ((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined))
}

/**
 * Update the image laoding proress bar
 *
 * @param data - jQuery preload data object
 */
function updateProgressbar(data){
  $('#progress').css('width', 100 * (data.done / data.total) + '%');
};

/**
 * Shows the initial slideshow intro to the 
 * Screen Concept website. A cookie will be set
 * to ensure the intro is only shown once per session.
 */
function showSlideshowIntro() {
  // Only show once per session
  if ($.cookie('intro') != 'shown') {

    addIntro();
    
    // Hide main screen
    $('#main_navigation_1_level').hide();
    $('#vision').hide();
    $('#arrow_navigation').hide();
    
    // Show loader and intro screen
    $('#spinner').show();
    $('#preload').show().centerScreen();
    $('#progress').show();
    $('#intro').centerScreen();
    $('#intro').hide();
   
    console.log("***** Preload images");
    
    // Preload images for the slide show
    $.preload( '#intro img', {
      onRequest: function(data) { updateProgressbar(data); },
      onComplete: function(data) { updateProgressbar(data); },
      onFinish: playSlideshow,
      threshold: 2
    });
    
    $.cookie('intro', 'shown');
    
  } else {
    // Skip intro
    console.log("***** Skip website intro");
    
    $('#preload').remove();
    $('#intro').remove();
    $('#vision').fadeIn(125);
    // display navigation
    $('#main_navigation_1_level').show();
  }
}

// Number of pictures used for the website intro
INTRO_PICTURES = 24;

/**
 * Plays the intro slideshow
 */
function playSlideshow() {
  
  console.log("***** Play the slideshow");
  
  // Hide loaders
  $('#spinner').hide();
  $('#preload').hide();
  $('#intro').show();  

  // Play slideshow
  var picture = 1;
  
  $(document).everyTime(200, function(picture) {
    // Fade between actual and next picture
    $('#intro_' + (picture - 1)).hide();
    $('#intro_' + picture).show();

    if (picture == INTRO_PICTURES) {
      // Show start screen
      $('#preload').remove();
      $('#intro').remove();
      $('#main_navigation_1_level').fadeIn(125);
      $('#vision').fadeIn(125);
    }
    
    picture++;
    
  }, INTRO_PICTURES);
};

function addIntro() {
	$('#main').append('<div id="intro"><img id="intro_1" src="/assets/22/intro_23.jpg" alt="Intro Picture 1" style="display: none;"/>' + 
	  '<img id="intro_2" src="/assets/23/intro_02.jpg" alt="Intro Picture 2" style="display: none;"/>' +
      '<img id="intro_3" src="/assets/24/intro_03.jpg" alt="Intro Picture 3" style="display: none;"/>' +
      '<img id="intro_4" src="/assets/25/intro_04.jpg" alt="Intro Picture 4" style="display: none;"/>' +
      '<img id="intro_5" src="/assets/26/intro_05.jpg" alt="Intro Picture 5" style="display: none;"/>' +
      '<img id="intro_6" src="/assets/27/intro_06.jpg" alt="Intro Picture 6" style="display: none;"/>' +
      '<img id="intro_7" src="/assets/28/intro_07.jpg" alt="Intro Picture 7" style="display: none;"/>' +
      '<img id="intro_8" src="/assets/29/intro_08.jpg" alt="Intro Picture 8" style="display: none;"/>' +
      '<img id="intro_9" src="/assets/30/intro_09.jpg" alt="Intro Picture 9" style="display: none;" />' +
      '<img id="intro_10" src="/assets/31/intro_10.jpg" alt="Intro Picture 10" style="display: none;" />' +
      '<img id="intro_11" src="/assets/32/intro_11.jpg" alt="Intro Picture 11" style="display: none;" />' +
      '<img id="intro_12" src="/assets/33/intro_12.jpg" alt="Intro Picture 12" style="display: none;" />' +
      '<img id="intro_13" src="/assets/34/intro_13.jpg" alt="Intro Picture 13" style="display: none;" />' +
      '<img id="intro_14" src="/assets/35/intro_14.jpg" alt="Intro Picture 14" style="display: none;" />' +
      '<img id="intro_15" src="/assets/36/intro_15.jpg" alt="Intro Picture 15" style="display: none;" />' +
      '<img id="intro_16" src="/assets/37/intro_16.jpg" alt="Intro Picture 16" style="display: none;" />' +
      '<img id="intro_17" src="/assets/38/intro_17.jpg" alt="Intro Picture 17" style="display: none;" />' +
      '<img id="intro_18" src="/assets/39/intro_18.jpg" alt="Intro Picture 18" style="display: none;" />' +
      '<img id="intro_19" src="/assets/40/intro_19.jpg" alt="Intro Picture 19" style="display: none;" />' +
      '<img id="intro_20" src="/assets/41/intro_20.jpg" alt="Intro Picture 20" style="display: none;" />' +
      '<img id="intro_21" src="/assets/42/intro_21.jpg" alt="Intro Picture 21" style="display: none;" />' +
      '<img id="intro_22" src="/assets/43/intro_22.jpg" alt="Intro Picture 22" style="display: none;" />' +
      '<img id="intro_23" src="/assets/44/intro_23.jpg" alt="Intro Picture 23" style="display: none;" /></div>');
}