<%@ 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"/>

<div style="text-align:center;">
<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"/>
      imgs[<c:out value="${count.index}"/>] = "<content:assetUrl contentId="${contentId}"/>";
	  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=\"661\" height=\"234\" style=\"border-bottom: 1px solid #869ab2;\" border=\"0\"/>");
    }
-->
</script>

<script type="text/javascript">showImage();</script>
</div>
<content:contentAttribute id="title" propertyName="Article" attributeName="Title" useInheritance="false"/>
<content:contentAttribute id="fullText" propertyName="Article" attributeName="FullText" useInheritance="false"/>

<div style="padding: 10px; width: 350px; float: left; background-color: #ffffff;">
	<h1><c:out value="${title}" escapeXml="false"/></h1>
	<c:out value="${fullText}" escapeXml="false"/>
</div>

<div style="padding: 10px; width: 350px; float: right; background-color: #ffffff;">
	<ig:slot id="puffArea"></ig:slot>
</div>