<style type="text/css">
		html, body { margin: 0;	padding: 0; }
		ul.menu { margin:0 auto; }
	</style>
    <style type="text/css">


h2{
font-size:17px;
color:#008da9;
margin-bottom:10px;
margin-top:10px;}
.credits {
	width: 280px;
	margin: 0 auto 20px;
	text-align: center;
	border-bottom: solid 1px #ccc;
	padding: 0 0 8px 0;
	font: 130%/110% Garamond, Georgia, serif;
}
.credits em {
	color: #999;
}
.credits a {
	color: #333;
	text-decoration: none;
	text-transform: uppercase;
}
.credits a:hover {
	text-decoration: underline;
}
img {
	border: none;
}

/* ---------- gallery styles start here ----------------------- */
.gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	
}
.gallery li {
	padding: 5px;
margin: 0;
float: left;
position: relative;
width: 180px;
height: 130px;

}
.gallery li:hover img {
	border-color: #000;
}
.gallery img {
	background: #fff;
	/*border: solid 1px #888;
	padding: 5px;*/
}
.gallery .image_boarder
{
	height:113px !important;
	width:170px !important;
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #888888;
    padding: 5px;
}

.gallery em {
	background: #fff url(images/grey-gradient.gif) repeat-y;
	color: #000;
	font-style: normal;
	padding: 2px 10px;
	display: block;
	position: absolute;
	top: 110px;
	left: 9px;
	border: 1px solid #999;
	border-left-color: #888;
	font: 70%/140% Arial, Helvetica, sans-serif;
}
.gallery a {
	text-decoration: none;
}
.gallery a:hover em {
	background: #62c3fa url(images/orange-gradient.gif) repeat-y;
	border-color: #0a6cff;
}
</style>
<style type="text/css" media="all">
			
			body, div, p {
				font-family: Arial, Helvetica, Verdana;
				color: #333;
			}
		
			a, a:link, a:active, a:visited {
				color: #666;
				text-decoration: none;
			}
			a:hover {
				text-decoration: underline;
			}
		
			.srolelr_wrapper {
				
				width: 700px;
				margin: 40px auto;
				margin-left:5px;
				
			
			}
			.list_carousel {
				width: 700px;
			}
			.list_carousel ul {
				margin: 0;
				padding: 0;
				list-style: none;
				display: block;
			}
			.list_carousel li {
				font-size: 40px;
				color: #999;
				text-align: center;
				background-color: #eee;
				border-radius:5px;
				border: 1px solid #999;
				width: 200px;
				height: 130px;
				padding: 0;
				margin: 6px;
				display: block;
				padding:8px;
				float: left;
				font:arial;
				color:#666;
				font-size:18px;
				font-weight:bold;
			}
			.list_carousel.responsive {
				width: auto;
				margin-left: 0;
			}
			.clearfix {
				float: none;
				clear: both;
			}
			.prev {
				float: left;
				margin-left: 10px;
			}
			.next {
				float: right;
				margin-right: 10px;
			}
			.pager {
				float: left;
				width: 700px;
				text-align: center;
			}
			.pager a {
				margin: 0 5px;
				text-decoration: none;
			}
			.pager a.selected {
				text-decoration: underline;
			}
			.timer {
				background-color: #999;
				height: 6px;
				width: 0px;
			}
		</style>
        <script type="text/javascript" language="javascript" src="<?php echo Yii::app()->baseUrl; ?>/js/front/jquery.carouFredSel-5.5.0-packed.js"></script>
		<script type="text/javascript" language="javascript">
			$(function() {

				//	Basic carousel, no options
				$('#foo0').carouFredSel();

				//	Basic carousel + timer
				$('#foo1').carouFredSel({
					auto: {
						pauseOnHover: 'resume',
						onPauseStart: function( percentage, duration ) {
							$(this).trigger( 'configuration', ['width', function( value ) { 
								$('#timer1').stop().animate({
									width: value
								}, {
									duration: duration,
									easing: 'linear'
								});
							}]);
						},
						onPauseEnd: function( percentage, duration ) {
							$('#timer1').stop().width( 0 );
						},
						onPausePause: function( percentage, duration ) {
							$('#timer1').stop();
						}
					}
				});

				//	Scrolled by user interaction
				$('#foo2').carouFredSel({
					prev: '#prev2',
					next: '#next2',
					pagination: "#pager2",
					auto: false
				});

				//	Variable number of visible items with variable sizes
				$('#foo3').carouFredSel({
					width: 360,
					height: 'auto',
					prev: '#prev3',
					next: '#next3',
					auto: false
				});

				//	Fluid layout example 1, resizing the items
				$('#foo4').carouFredSel({
					responsive: true,
					width: '100%',
					scroll: 2,
					items: {
						width: 400,
					//	height: '30%',	//	optionally resize item-height
						visible: {
							min: 2,
							max: 6
						}
					}
				});

				//	Fuild layout example 2, centering the items
				$('#foo5').carouFredSel({
					width: '100%',
					scroll: 2
				});

			});
		</script>
<div id="sub_menu"> <a href="<?php echo Yii::app()->createUrl('site/index'); ?>">Home</a>&nbsp;&nbsp; <img width="9" height="10" src="<?php echo Yii::app()->baseUrl; ?>/images/front/1/submenu_13.jpg">&nbsp;&nbsp;&nbsp; <a href="#"><?php echo $UserGroupName; ?></a>&nbsp;&nbsp;<img width="9" height="10" src="<?php echo Yii::app()->baseUrl; ?>/images/front/1/submenu_13.jpg">&nbsp;&nbsp;&nbsp;<a href="#"><?php echo $ProductGroupName; ?></a> </div>
<div id="content">
  <div id="business_solution_leftcontent">
    <?php $this->renderPartial('productgroup_left_menu');  ?>
    <!--initiate accordion--> 
    
    <?php $this->renderPartial('pages/leftcontent'); ?>
  </div>
  <div id="overview_rightcontent" style="padding-top: 10px;">
  <h3><?php echo $ProductGroupName; ?></h3>
    <ul class="gallery">
    <?php $oneItemPerId	=	array();
	if(!is_array($products) || count($products)==0)
		echo "No categories available in this user group";
	else
	foreach($products as $eachProduct): ?>
    <?php if(!in_array($eachProduct->product_category_id,$oneItemPerId)): ?>
      <li><a href="<?php echo Yii::app()->createUrl('site/products',array('user_group_id'=>@$user_group_id,'id'=>@$eachProduct->product_group_id,'product_category_id'=>@$eachProduct->product_category_id,'name'=>
            preg_replace('/[^a-z0-9_]/','',strtolower( str_replace(" ", "_", $eachProduct->productCategory->category_name))))); ?>"><em><?php echo $eachProduct->productCategory->category_name; ?></em>
            
            <?php
			if (!file_exists('media/product_images/thumbs/170_120'.$eachProduct->product_image)) 
			{
				$thumb=Yii::app()->phpThumb->create('media/product_images/'.$eachProduct->product_image);
				$thumb->resize(170,120);
				$thumb->save('media/product_images/thumbs/170_120'.$eachProduct->product_image);
			}
		 	?>
            <div class="image_boarder">
            <img src="<?php echo Yii::app()->baseUrl; ?>/media/product_images/thumbs/170_120<?php echo $eachProduct->product_image; ?>" alt="image" />
            </div>
            </a></li>
      <?php
		$oneItemPerId[]	=	$eachProduct->product_category_id;
		endif;
		 endforeach; ?>
    </ul>
  </div>
  <div id="overview_rightcontent">
    <div class="srolelr_wrapper">
      <div class="list_carousel">
        <h3><?php echo $UserGroupName; ?></h3>
        <?php if(count($allProductsUnderUserGroup)==0) echo "No products available in this user group"; ?>
        <!--<ul id="foo0">-->
        <?php foreach($allProductsUnderUserGroup as $eachProduct): ?>
        <?php
			if (!file_exists('media/product_images/thumbs/135_75'.$eachProduct->product_image)) 
			{
				$thumb=Yii::app()->phpThumb->create('media/product_images/'.$eachProduct->product_image);
				$thumb->resize(135,75);
				$thumb->save('media/product_images/thumbs/135_75'.$eachProduct->product_image);
			}
		 ?>
        <div id="compare_matter_outer">
                      <div id="product_image"><img src="<?php echo Yii::app()->baseUrl; ?>/media/product_images/thumbs/135_75<?php echo $eachProduct->product_image; ?>" style="float:left" /> </div>
                      <div id="product_image_matter">
                <h2><a href="<?php echo Yii::app()->createUrl('site/productdetails',array('id'=>$eachProduct->id,'name'=>
            preg_replace('/[^a-z0-9_]/','',strtolower( str_replace(" ", "_", $eachProduct->product_name))))); ?>"><?php echo ($eachProduct->product_generic_name!='')?$eachProduct->product_generic_name:$eachProduct->product_name; ?></a><br />
                          
                        </h2>
               <strong> <?php echo $eachProduct->product_name; ?><br /><br /></strong>
                <?php echo substr(strip_tags($eachProduct->description),0,200).'...'; ?><br />
                <br />
              </div>
                      <div id="product_compare_box"> <a href="<?php echo Yii::app()->createUrl('site/productdetails',array('id'=>$eachProduct->id,'name'=>
            preg_replace('/[^a-z0-9_]/','',strtolower( str_replace(" ", "_", $eachProduct->product_name))))); ?>">
                        <div id="find"> Find out more </div>
                        </a><br />
                <br />
                <br />
              </div>
                    </div>
            <?php endforeach; ?>
        <!--</ul>-->
      </div>
    </div>
  </div>
</div>