#view_generator
{view_head}
<style>.main_wrap{height:100%;}.overlay{background-color:rgba(40,40,40,0.9);}img{-webkit-filter:brightness(100%);filter:brightness(100%);}#background_image{url('/ctrack/art/mexico_background_image.jpg')};{css_generator}</style>
{beige}
{instructions}
{generator}
{main_datainvestigators}
{view_tail}


#generator_crs_error
<div class="reminder_wrap top">
Please select <b>ONE</b> recipient and <b>NO</b> organisation to generate content here <p>- or choose a different View.</p>
</div>
#generator
<div id="generator" class="generator">
<form>

<div class="instruct_side">1</div><div class="instruct_more">
<div class="instruct_rel">
	<span class="drop_arrow"></span>
<span class="opt">ORG</span>
<select multiple id="generator_publisher" class="chosen">
	<option value></option>
	{generator_options_publisher}
</select>
</div>

<div class="instruct_rel">
	<span class="drop_arrow b"></span>
<span class="opt">RECIPIENT</span>
<select multiple id="generator_country" class="chosen">
	<option value></option>
	{generator_options_country}
</select>
</div>
</div>

<div class="instruct_chunk"></div>
<div class="instruct_side">2</div><div class="instruct_more">
<div>
<span class="opt">VIEW</span>
<select id="generator_view" class="chosen">
	<option value></option>
	{generator_options_view}
</select>
<a class="toggle" onclick="$('.view_wrap').toggle();">Example Views</a>
</div>

<div id="generator_aid_div" style="display:none;" >
<span class="opt">IATI-ID</span>
<input type="text" id="generator_aid" class="chosen" value="" />
<span class="txt">Enter an IATI Identifier to display a single activity <br/><b>OR</b></span>
</div>

<div id="generator_limit_div" style="display:none;" >
<span class="opt">LIMIT</span>
<input type="text" id="generator_limit" class="chosen" value="1" />
<span class="txt">Enter the maximum number of activities to show. <i>Press ENTER to update your content below.</i> <b>Type -1 to show ALL.</b></span>
</div>



<div id="generator_maxheight_div" style="display:none;" >
<span class="opt">HEIGHT</span>
<input type="text" id="generator_maxheight" class="chosen" value="" />
<span class="txt">Enter the maximum height in pixels (this enables scrolling content). <i>Press ENTER to update your content below. <b>Leave blank for full height.</b></i></span>
<select id="generator_maxheight_dropdown" class="chosen"><option value></option>{generator_options_height}</select>
</div>

<div id="generator_usd_div" style="display:none;" >
<span class="opt">CURRENCY</span>
<select id="generator_usd" class="chosen"><option value></option>{generator_options_usd}</select>
</div>


<div class="view_wrap">
	<div class="view_info"><span>Example views</span><span class="see">Pick one to update the preview of your widget below. <i><b>Scroll down to view it.</b></i></span></div>
	<div class="view_links">
		<a href="" class="view" onclick="$('#generator_view').val('publisher_countries').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/countriesall.png" width="260"/>
			<span class="imgtxt">Recipients (table)</span>
			<span class="overtxt">Organisation data</span>
		</a><a href="" class="view mid" onclick="$('#generator_view').val('publisher_countries_top').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/crsdonortop.png" width="260"/>
			<span class="imgtxt">Top Recipients (graph)</span>
			<span class="overtxt">Organisation data</span>
		</a><a href="" class="view" onclick="$('#generator_view').val('publisher_sectors').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/countriesall.png" width="260"/>
			<span class="imgtxt">Sectors (table)</span>
			<span class="overtxt">Organisation data</span>
		</a>
	</div>
	<div class="view_links">
		<a href="" class="view" onclick="$('#generator_view').val('publisher_sectors_top').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/crssectortop.png" width="260"/>
			<span class="imgtxt">Top Sectors (graph)</span>
			<span class="overtxt">Organisation data</span>
		</a><a href="" class="view mid" onclick="$('#generator_view').val('map').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/map.png" width="260"/>
			<span class="imgtxt">Map (only shows precise locations of activities)</span>
		</a><a href="" class="view" onclick="$('#generator_view').val('stats').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/overview.png" width="260"/>
			<span class="imgtxt">Overview (statistics)</span>
		</a>
	</div>
	<div class="view_links">
		<a href="" class="view" onclick="$('#generator_view').val('donors').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/countriesall.png" width="260"/>
			<span class="imgtxt">Donors for a single recipient (table)</span>
			<span class="overtxt">Recipient data only</span>
		</a><a href="" class="view mid" onclick="$('#generator_view').val('donors_top').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/crsdonortop.png" width="260"/>
			<span class="imgtxt">Top Donors for a single recipient (graph)</span>
			<span class="overtxt">Recipient data only</span>
		</a><a href="" class="view" onclick="$('#generator_view').val('sectors').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/countriesall.png" width="260"/>
			<span class="imgtxt">Sectors for a single recipient (table)</span>
			<span class="overtxt">Recipient data only</span>
		</a>
	</div>
	<div class="view_links">
		<a href="" class="view" onclick="$('#generator_view').val('sectors_top').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/crssectortop.png" width="260"/>
			<span class="imgtxt">Top Sectors for a single recipient (graph)</span>
			<span class="overtxt">Recipient data only</span>
		</a><a href="" class="view mid savi" onclick="$('#generator_view').val('act').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/savi.png" width="85"/>
			<span class="imgtxt">Activities displayed using SAVi</span>
		</a><a href="" class="view" onclick="$('#generator_view').val('list_activities').trigger('chosen:updated').trigger('change');return false;" >
			<img src="ctrack/art/generator/activities.png" width="260"/>
			<span class="imgtxt">List of activities</span>
		</a>
	</div>
</div>
</div>

<div class="instruct_chunk"></div>
<div class="instruct_down">See the content you have generated below. This will update automatically when you have selected from the above dropdowns.</div>

<div class="instruct_chunk"></div>
<div class="instruct_side">3</div><div class="instruct_more a">
<div>
<span class="opt">STYLE</span>
<select id="generator_skin" class="chosen">
	<option value></option>
	{generator_options_skin}
</select>
</div>

<div>
<span class="opt">SIZE</span>
<select id="generator_size" class="chosen">
	<option value></option>
	{generator_options_size}
</select>
</div>
</div><div class="instruct_more b">These are optional.</div>

<div class="instruct_chunk"></div>
<div class="instruct_side">4</div><div class="instruct_more">
<div class="instruct_info">Copy &amp; paste the code below into your webpage / blog post to embed the content you have generated.</div>
<textarea id="generator_textarea"></textarea>
</div>

</form>
</div>
<div id="frame" class="frame"></div>
{reminder}

#instructions
<div class="instruct_wrap">
	<div class="default">
		<a href="{ctrack_home}" title="Back to d-portal" class="logo">
			<img src="/ctrack/art/original/dp_logo.60.png" alt="d-portal logo" width="150" height="60">{status}
		</a><div class="instruct_head"> Create IATI content with the d-portal Generator</div>
	</div>
</div>
<div class="instruct_col_wrap">
	<div class="default"><div class="mid_wrap"></div><div class="mid_wrap"><div class="arrow"></div></div></div>
	<div class="default">
		<div class="instruct_col first">
			<div class="instruct_num">1</div>
			<div class="instruct_text">Pick your data</div>
			<div class="instruct_sub">Choose <b>Organisation</b>(s) &amp;/or <b>Recipient</b>(s) data to display.</div>
		</div><div class="instruct_col">
			<div class="instruct_num">2</div>
			<div class="instruct_text">Choose a View</div>
			<div class="instruct_sub">Select a way to display the data (list, table, map etc).</div>
		</div><div class="instruct_col">
			<div class="instruct_num">3</div>
			<div class="instruct_text">Pick a style &amp; size (optional)</div>
			<div class="instruct_sub">Choose from the styles and width sizes available.</div>
		</div><div class="instruct_col last">
			<div class="instruct_num">4</div>
			<div class="instruct_text">Use your content</div>
			<div class="instruct_sub">Copy the generated code, use on your website/blog.</div>
		</div>
	</div>
</div>

#reminder
<div class="reminder_wrap">
	<p><b>Are you creating widgets for a company's internal website?</b> Use the <a href="https://d-portal.org/ctrack.html#view=generator">secured version Generator</a> instead.</p>
	<p>Compare multiple datasets by choosing multiple RECIPIENTS and/or ORGANISATIONS.</p>
	<p>Picking both ORGANISATION and RECIPIENT data at the same time will limit the data in your generated content.</p>
	<p>The SIZE option allows you to generate a variety of blog-friendly sized content.</p>
	<p>Empty tables are due to no data found.
	<p><b>Data populating the tables can be quite large.</b> <i>Please wait until the spinner disappears for your widget to appear.</i></p>
	<p>All data is <b>LIVE</b> data and will change if these records are updated.</p>
	<p><b>Stuck?</b> <a href="/news/2014-11-30-Interactive-IATI-data-d-portal-generator.html">Click here for some examples of what you can do</a> or watch the excellent video below by <a href="https://www.bond.org.uk/">Bond</a>.</p>
	<p>{video}</p>
</div>

#video
<iframe src="https://player.vimeo.com/video/148486364?title=0&byline=0&portrait=0&wmode=transparent" width="100%" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

#footer_pick_text
Back to d-portal

#css_generator
body				{font-size:16px;}
textarea			{display:block; width:884px; height:100px; margin-top:5px;}
form div			{padding:5px 0;}
form div span.opt	{display:inline-block; min-width:100px; color:#FFF; text-align:right; vertical-align:middle; margin-right:10px;}
select				{border-radius:2px;}
 #frame				{margin:0 auto; width:100%; padding:100px 0; text-align:center; margin-top:50px; background-color:#cecece;}
a#frame_fix_size	{display:block; margin:0 auto; width:960px; border-radius:4px; padding:10px 0; text-align:center; background-color:#2573CD; color:#FFF; margin-top:10px; margin-bottom:10px;}
a#frame_fix_size:hover	{background-color:#2F84E5;}
.generator			{width:960px; margin:0 auto; padding:0; padding-top:20px;}
.default			{width:960px; margin:0 auto; padding:0;}
.mid_wrap			{display:inline-block; vertical-align:top; width:460px; max-width:460px;}
.arrow				{width:0; height:0; border-top:30px solid #2573CD; border-left:30px solid transparent; border-right:30px solid transparent;}
.instruct_wrap		{margin:0 auto; width:100%; padding:20px 0 40px 0; background-color:#2573CD;}
.instruct_head		{display:inline-block; vertical-align:bottom; width:710px; text-align:right; color:#FFF; font-size:2em;}
.instruct_info		{color:#FFF; margin-top:15px;}
.instruct_down		{margin-left:70px; padding:20px 0; color:#FFF; font-size:0.97em; line-height:1.35em;}
.instruct_col_wrap	{width:100%;}
.instruct_col		{display:inline-block; vertical-align:top; width:231px; padding:30px 20px; background-color:rgba(21,21,21,0.7); margin:40px 6px; box-sizing:border-box; border-radius:6px; max-height:280px; height:280px;}
.instruct_col.first	{margin-left:0;}
.instruct_col.last	{margin-right:0;}
.instruct_num		{text-align:center; color:#eee; font-size:6em; margin-bottom:10px;}
.instruct_text		{text-align:center; color:#4CA0FF; font-size:1.4em;}
.instruct_sub		{text-align:center; color:#ccc; font-size:1.0em; line-height:1.2em; margin-top:10px;}
.instruct_fix		{background-color:#333; color:#ccc; padding:15px 0; text-align:center;}
.instruct_fix span	{color:#4CA0FF; font-weight:bold;}
.chosen-container	{min-width:250px; max-width:500px;}
.reminder_wrap		{margin:0 auto; margin-top:60px; background-color:rgba(21,21,21,0.7); width:880px; padding:20px 40px 40px 40px; color:#ccc; font-size:0.9em; line-height:1.2em; padding-bottom:80px;}
.reminder_wrap.top	{background-color:#2573CD; font-size:1.4em; color:#FFF; padding:30px 40px; margin-bottom:0;}
.reminder_wrap p	{padding-top:25px; color:#ccc; display:list-item; list-style-position:inside; list-style-type:circle; font-size:16px;}
.reminder_wrap p:last-of-type	{display:block;}
.tips_head			{border-bottom:1px solid #666; padding:15px 0 10px 0; font-size:1.8em; color:#aaa; display:block;}
.reminder_wrap.top p{color:#FFF;}
.view_info			{padding-bottom:10px; color:#FFF; font-size:0.9em; border-bottom:3px solid #666; margin-bottom:20px;}
.view_info span		{display:inline-block; vertical-align:top; width:100px; color:#ccc;}
.view_info span.see	{width:740px; text-align:right; color:#FFF;}
.view_wrap			{display:none; vertical-align:top; width:840px; margin-left:110px;}
.view_links			{margin-bottom:20px;}
a.view				{display:inline-block; vertical-align:top; width:260px; position:relative;}
a.view.mid			{margin:0 30px;}
a.view.mid.savi		{text-align:center;}
a.view span.imgtxt	{display:block; margin-top:5px; color:#ccc; font-size:0.8em;}
.reminder_wrap a	{color:#4CA0FF;}
.reminder_wrap a:hover		{color:#74B5FF;}
a.mail				{display:block; margin-top:15px; color:#4CA0FF; padding:5px 0;}
a.mail:hover		{color:#74B5FF;}
a.logo				{display:inline-block; vertical-align:bottom; width:250px;}
a.toggle			{display:inline-block; vertical-align:middle; margin-left:20px; font-size:0.9em; color:#FFF; padding:6px 10px; background-color:#2573CD; border-radius:4px;}
a.toggle:hover		{background-color:#428DE3;}
 #generator_aid_div span.txt, #generator_limit_div span.txt, #generator_maxheight_div span.txt	{display:inline-block; vertical-align:middle; font-size:0.9em; color:#ccc; width:520px;
margin-left:10px; line-height:1.5em;}

span.overtxt		{display:none;}
a.view:hover span.overtxt	{display:block; position:absolute; top:0; left:0; width:260px; height:119px; background-color:rgba(0,0,0,0.6); color:#FFF; text-align:center; line-height:6em;}

.instruct_side		{display:inline-block; vertical-align:middle; margin-right:40px; width:30px; font-size:5em; color:#CCC;}
.instruct_more		{display:inline-block; vertical-align:middle; width:890px;}
.instruct_more.a	{width:440px;}
.instruct_more.b	{width:450px; font-size:0.9em; color:#CCC; font-style:italic;}
.instruct_chunk		{width:960px; margin:0 auto; padding-top:10px; border-top:1px solid #535661; margin-top:10px;}

.instruct_rel		{position:relative;}
span.drop_arrow		{display:block; width:20px; height:100%; background:url(/art/chosen-sprite.png) no-repeat 0 2px; text-align:right; position:absolute; left:595px; top:15px; z-index:999; pointer-events:none;}
span.drop_arrow.b	{left:385px;}

div#generator_maxheight_dropdown_chosen	{margin-left:113px;}