<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<%@ taglib uri="infoglue-management" prefix="management" %>
<%@ taglib uri="infoglue-content" prefix="content" %>
<%@ taglib uri="infoglue-common" prefix="common" %>
<%@ taglib uri="infoglue-page" prefix="page" %>
<%@ taglib uri="infoglue-structure" prefix="structure" %>

<content:boundContents id="startImages" propertyName="StartImages"/>

<script type="text/javascript">
<!--
    var imgs = [<%= ((java.util.List)pageContext.getAttribute("startImages")).size() %>];
	var alts = [<%= ((java.util.List)pageContext.getAttribute("startImages")).size() %>];

    <c:forEach var="vinjett" items="${startImages}" varStatus="count">
      <c:set var="contentId" value="${vinjett.contentId}"/>  
      <content:contentAttribute id="altText" contentId="${contentId}" attributeName="Title" disableEditOnSight="true"/>
      <content:assetUrl id="assetUrl" contentId="${contentId}"/>
      imgs[<c:out value="${count.index}"/>] = "<c:out value="${assetUrl}"/>";
	  alts[<c:out value="${count.index}"/>] = "<c:out value="${altText}" escapeXml="false"/>";
    </c:forEach>

    function showImage()
   	{
    	var rand = Math.floor(imgs.length*Math.random());
       	document.write("<img src=\""+imgs[rand]+"\" alt=\""+alts[rand]+"\" width=\"350\" height=\"285\" style=\"padding-top: 20px; border-bottom: 1px solid white;\" border=\"0\"/>");
    }
-->
</script>

<content:contentAttribute id="title" propertyName="Article" attributeName="Title" useInheritance="false"/>
<content:contentAttribute id="fullText" propertyName="Article" attributeName="FullText" useInheritance="false"/>

<div style="padding: 0px; padding-bottom: 20px; width: 88.4em; float: left; background-color: #ffffff; text-align: center;">
<div style="padding: 10px; width: 48.2em; float: left; background-color: #ffffff; text-align: left;">
	<h1><c:out value="${title}" escapeXml="false"/></h1>
	<c:out value="${fullText}" escapeXml="false"/>
</div>
<div style="padding: 10px; width: 35.2em; float: right; background-color: #ffffff;">
	<script type="text/javascript">showImage();</script>
</div>
</div>

<div style="padding: 0px; width: 88.4em; background-color: #ffffff; text-align: center;"><ig:slot id="puffArea"></ig:slot></div>