{if $widgetMode eq 'view'} 
<!--[if lt IE 9]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!--<![endif]-->
<script type="text/javascript" src="{$globalUrl}public/default/affiliate/standard/javascript/jquery.cycle.all.js"></script>
<link rel="stylesheet" type="text/css" href="{$globalUrl}public/default/affiliate/standard/styles/widget-page.css" />
{/if}
<style type="text/css">
.widgetSiteInfoFooter,.widgetSiteInfoBanner{
	background:{$widgetHeaderColor};
}
.productContainerInd,.productContainerInd.banner,.navigation.rightnav,.navigation.leftnav{
	border-color:{$widgetHeaderColor};
}
.widgetSiteInfoFooter a ,.widgetSiteInfo a{
 color: {$widgetHeaderTextColor|default:''};
}
.widgetSiteInfoTop {
	background:{$widgetHeaderColor};
}
{if $widgetFormat eq 'Large'}
.productDetail.large .head-link {
	color:{$textColor};
}
.navigation{
	cursor:pointer;
}	
{/if}
.widgetHolder{
 border-color: {$widgetHeaderColor};
 background-color: {$widgetBackgroundColor}!important;
}
.navigation{
 {if $widgetScrolling != 'Vertical'}
 width:23px;
 position:absolute;
 z-index:100;
 {/if}
}
.widgetHolder .navigation .prev{
 border-bottom-color:{$widgetHeaderColor};		
}
.widgetHolder .navigation .next{
 border-top-color:{$widgetHeaderColor};		
}
{if $widgetScrolling != 'Vertical'}
.widgetHolder .navigation .prevHoriz{
 border-right-color:{$widgetHeaderColor};		
}
.widgetHolder .navigation .nextHoriz{
 border-left-color:{$widgetHeaderColor};		
}
{/if}
.productContainerInd{
 background-color: {$widgetBackgroundColor};	
 {if $widgetScrolling != 'Vertical'}
 position:relative;
 {/if}
}
.widgetSiteInfoTop a,.widgetSiteInfoFooter a,a.grab_button{
	color:{$textColor};
}
.productTypeContainer{
 border-color: {$widgetHeaderColor};
 {if $widgetScrolling != 'Vertical'}
 border-top-width: 0;
 {/if}
}
.widgetHolder h5{
  color:{$widgetDiscountTextColor|default:''};
}
{if $widgetScrolling != 'Vertical'}
.productTypeSelected{
	color:{$widgetSelectedHeaderTextColor|default:''};
	background-color: {$widgetBackgroundColor};
}
{/if}
{if $widgetFormat eq 'Banner'}
.widgetSiteInfo{
	float: right;
	margin-right: 5px;
}
{/if}
{if $message neq ''}
.no-products{
{if $widgetHeaderColor}
border: {$widgetHeaderColor} 1px solid;
{/if}
{if $widgetBackgroundColor}
background-color: {$widgetBackgroundColor};	
{/if}
font:normal 11px/14px Arial, Helvetica, sans-serif;
text-align:center;
{if $widgetWidth}
width:{$widgetWidth-4}px; 
{/if}
{if $widgetHeight}
height:{$widgetHeight-4}px;
{/if}
margin:0 auto;
}
.no-products span{
	{if $widgetHeight}
	margin-top:{$widgetHeight/2-20}px;
	{/if}
	display:block;
	{if $textColor}
	color:{$textColor};
	{/if}
	font-weight:bold;
}
{/if}
a.grabButton {
background-color:{$widgetGrabButtonColor};
color: {$widgetGrabButtonTextColor};
}
{if $widgetFormat == 'Sidebar' && $affiliateWidgetContentType eq 'Text_Only'}
.productDetail {
margin: 0 12px 15px;
}
{/if}
</style>
{if $message neq ''}
<div class="no-products" {if $response neq 'failure'}style="width:100%;height:100%;"{/if}>
		<span>{$message}</span>
	</div>
{else}
<div class="widgetOuter" style="width:{$widgetWidthPx}; height:{$widgetHeight}px;">	
	<div class="widgetHolder"> 
		
		{if $widgetFormat eq 'Sidebar'}
			<div class="widgetSiteInfoTop">
			{if $companyLogo}
				<a target="_blank" href="{$globalUrl}">
				<img border="0" alt="{$siteName}" src="{$companyLogo}" title="{$siteName}" class="c-logo" height="20">
				</a> 
			{else}
				<a href="{$globalUrl}" target="_blank">{$siteName}</a> 
			{/if}
			</div>
		{/if} 
		
		{if $widgetFormat eq 'Large'}
		<div class="widgetSiteInfoFooter">
			{if $companyLogo}
				<a target="_blank" href="{$globalUrl}">
				<img border="0" alt="{$siteName}" src="{$companyLogo}" title="{$siteName}" height="40">
				</a>
			{else}
				<a href="{$globalUrl}" target="_blank">{$siteName}</a> 
			{/if}
		</div>
		{/if}  	
		
		{assign var="thumbHeight" value="{round($widgetHeightPx/2)}"} 
		{assign var="thumbWidth" value="{round($widgetWidthPx/2)}"}
		
		<div class="productTypeContainer clearfix"> 
		
		{if $widgetFormat eq 'Banner'} 
		<div class="widgetSiteInfoBanner">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
			  <tr>
				<td align="center" valign="middle" height="90"> {if $companyLogo}
					<a target="_blank" href="{$globalUrl}">
						<img border="0" alt="{$siteName}" src="{$companyLogo}" title="{$siteName}">
					</a>
		{else}
			<a href="{$globalUrl}" target="_blank">{$siteName}</a> 
		{/if}
				</td>
			  </tr>
			</table>
        </div>
        <div class="productContainerInd banner"> 
        {else}
			<div class="productContainerInd"> 
        {/if}
		{if $widgetScrolling == 'Vertical'}
			<div class="navigation"><span class="prev"></span></div>
        {/if}
        <ul id="carousel" class="carouselUl clearfix">
		{assign var="liCounter" value=1}          
		{if $affiliateWidgetContentType eq 'Image_with_Text'}
		{assign var="liCounterCheck" value=3}
		{else}
		{assign var="liCounterCheck" value=5}
		{/if}
		{assign var="productCount" value=$resProducts|count}		  
		{foreach from=$resProducts item="value"}
			{assign var="widgetURL" value={$globalUrl}|cat:"referral/widget/"|cat:{$widgetIDEncrypted}|cat:"/product"}	
			{assign var="widgetURL" value={$widgetURL}|cat:"/"|cat:{$value.productUrl}|cat:"/id/"|cat:{$value.productID}|cat:"/"}
			{assign var=productOptionDiscount1 value="."|explode:$value['productOptionDiscount']}
			{if isset($productOptionDiscount1[1]) && $productOptionDiscount1[1] eq "00"}
				{assign var="discountFinalVar" value=$productOptionDiscount1[0]|cat:"%"}
			{else}
				{assign var="discountFinalVar" value=$value['productOptionDiscount']|cat:"%"}
			{/if}
			  
			{if $widgetFormat neq 'Large'}
				{if $liCounter eq 1}
					<li> 
				{/if}
			{else}
				<li>
			{/if}		
			
			{if $widgetFormat == 'Sidebar'} <!--Vertical--> 				
				<div align="center" class="productDetail">
				{if $affiliateWidgetContentType eq 'Image_with_Text'} 
					<a class="img-tag" target="_blank" href="{$widgetURL}"><img border="0" alt="{$value.productTitle}" src="{$globalUrl}public/uploads/catalog/product/small/{$value.productImage}" title="{$value.productTitle}">
					</a>
				{/if}
				{html->anchor href="{$widgetURL}" target="_blank" caption=$value.productTitle|truncate:15:".." title=$value.productTitle class="grab_button"}
				<div class="pricediv">								
					{if $value['productOptionRegularPrice'] neq  $value['offerPrice']} 
						<span class="strikethrough" style="color:{$widgetRegualarPriceTextColor};">{$value['productOptionRegularPrice']|price}</span><br/>
					{/if}
					<strong style="color:{$widgetProductPriceTextColor};">{$value['offerPrice']|price}</strong>
				</div>              
				</div>				 					
			{else if $widgetFormat eq 'Large'} <!--Horizontal Square model--> 										
				{if $affiliateWidgetContentType eq 'Image_with_Text'}
					<div class="productDetail large">
						<div style="width:40%;float:left;" class="thumb-img-bx">
							<a href="{$widgetURL}" target="_blank"> 
								<img src="{$globalUrl}public/uploads/catalog/product/thumb/{$value.productImage}" alt="{$value.productTitle}" border="0"/>
							</a>
						</div>
					<div style="width:58%;float:right">
				{else}
					<div class="productDetail large align-center">
						<div>
				{/if}
				{html->anchor href="{$widgetURL}" target="_blank" content=$value.productTitle|truncate:40:".." title=$value.productTitle class="head-link"}
				<div style="font-size:13px;" class="price-tag">
					{if $value['productOptionRegularPrice'] neq  $value['offerPrice']} 
						<span style="color:{$widgetRegualarPriceTextColor};padding:0 0 5px;" class="strikethrough">{$value['productOptionRegularPrice']|price:'':$value.productDefaultCurrency|default:'':$value.productDefaultCurrency|default:''}</span>&nbsp;
					{/if}
					<strong>
						<span  style="color:{$widgetProductPriceTextColor};font-size:15px"> {$value['offerPrice']|price:'':$value.productDefaultCurrency|default:'':$value.productDefaultCurrency|default:''}</span>
					</strong>
				</div>
				<a href="{$widgetURL}" target="_blank" class="grabButton">{$language.lblBuyNow}</a>
				</div>
				<div style="clear:both"></div>
				</div>
			{else if $widgetFormat eq 'Banner'} <!--horizontal-->										
				{if $affiliateWidgetContentType eq 'Image_with_Text'}
					<div class="productDetail banner">
						<a class="img-tag" target="_blank" href="{$widgetURL}"><img border="0" alt="{$value.productTitle}" src="{$globalUrl}public/uploads/catalog/product/small/{$value.productImage}" title="{$value.productTitle}">
						</a>
				{else}
					<div class="productDetail banner banner-without-img">
				{/if}
				{html->anchor href="{$widgetURL}" target="_blank" caption=$value.productTitle|truncate:15:".." title=$value.productTitle class="grab_button"}
				<br />
				{if $value['productOptionRegularPrice'] neq  $value['offerPrice']} 
					<span style="color:{$widgetRegualarPriceTextColor};padding:0 0 5px;" class="strikethrough">{$value['productOptionRegularPrice']|price:'':$value.productDefaultCurrency|default:'':$value.productDefaultCurrency|default:''}</span>&nbsp;
				{/if}
				<span style="color:{$widgetProductPriceTextColor}; font-weight:bold;">
					{$value['offerPrice']|price:'':$value.productDefaultCurrency|default:'':$value.productDefaultCurrency|default:''}
				</span>
				</div>					  				
			{/if}
			
			{if $widgetFormat neq 'Large'}	
				{if $liCounter eq $liCounterCheck}	
					</li>
					{assign var="liCounter" value=1}	
				{else}
					{assign var="liCounter" value=$liCounter+1}	
				{/if}				
			{else}
				</li>
			{/if}
			
        {/foreach}
        </ul>
		
        {if $widgetScrolling == 'Vertical'}
			<div class="navigation"><span class="next"></span></div>
        {else}
			<div class="navigation leftnav"><span class="prevHoriz"></span></div>
			<div class="navigation rightnav"><span class="nextHoriz"></span></div>
        {/if} 
		
		</div>		
		</div>
	{/if}
    </div>
    {form->hidden name="widgetFormat" value=$widgetFormat} 
    {form->hidden name="widgetScrolling" value=$widgetScrolling} 
    {form->hidden name="widgetHeight" value=$widgetHeightPx} 
    {form->hidden name="widgetWidth" value=$widgetWidthPx} 
    {form->hidden id="affiliateWidgetID" name="affiliateWidgetID" value=$generatedWidgetID} 
</div>

{if $widgetMode eq 'view'} 
	<script type="text/javascript" src="{$globalUrl}public/default/affiliate/standard/javascript/ajax.widget.page.js"></script> 
	<script type="text/javascript">
	$(window).bind("load", function() {
	setAffWidget();	
	});
	</script> 
{/if}