<script language="javascript">
function openYouTube(id){
      //YouTube Player Parameters
      var width = 640;
      var height = 505;
      var FullScreen = "yes";
      var AutoPlay = "yes";
      var HighDef = "yes";
     
      //Calculate Page width and height
      var pageWidth = window.innerWidth;
      var pageHeight = window.innerHeight;
      if (typeof pageWidth != "number"){
      if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
      } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
            }
      }
      // Make Background visible...
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "visible";
     
      //Create dynamic Div container for YouTube Popup Div
      var divobj = document.createElement('div');
      divobj.setAttribute('id',id); // Set id to YouTube id
      divobj.className = "popup";
      divobj.style.visibility = "visible";
      var divWidth = width + 4;
      var divHeight = height + 20;
      divobj.style.width = divWidth + "px";
      divobj.style.height = divHeight + "px";
      var divLeft = (pageWidth - divWidth) / 2;
      var divTop = (pageHeight - divHeight) / 2 - 10;
      //Set Left and top coordinates for the div tag
      divobj.style.left = divLeft + "px";
      divobj.style.top = divTop + "px";
     
      //Create dynamic Close Button Div
      var closebutton = document.createElement('div');
      closebutton.style.visibility = "visible";
      closebutton.innerHTML = "<span onclick=\"closeYouTube('" + id +"')\" class=\"close_button\">X</span>";
      //Add Close Button Div to YouTube Popup Div container
      divobj.appendChild(closebutton);

      //Create dynamic YouTube Div
      var ytobj = document.createElement('div');
      ytobj.setAttribute('id', "yt" + id);
      ytobj.className = "ytcontainer";
      ytobj.style.width = width + "px";
      ytobj.style.height = height + "px";
      if (FullScreen == "yes") FullScreen="&fs=1"; else FullScreen="&fs=0";
      if (AutoPlay == "yes") AutoPlay="&autoplay=1"; else AutoPlay="&autoplay=0";
      if (HighDef == "yes") HighDef="&hd=1"; else HighDef="&hd=0";
      var URL = "http://www.youtube.com/v/" + id + "&hl=en&rel=0&showsearch=0" + FullScreen + AutoPlay + HighDef;
      var YouTube = "<object width=\"" + width + "\" height=\"" + height + "\">";
      YouTube += "<param name=\"movie\" value=\"" + URL + "\"></param>";
      YouTube += "<param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param>";
      YouTube += "<embed src=\"" + URL + "\" type=\"application/x-shockwave-flash\" ";
      YouTube += "allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"" + width + "\" height=\"" + height + "\"></embed></object>";
      ytobj.innerHTML = YouTube;
      //Add YouTube Div to YouTube Popup Div container
      divobj.appendChild(ytobj);
     
      //Add YouTube Popup Div container to HTML BODY
      document.body.appendChild(divobj);
}
function closeYouTube(id){
      var divbg = document.getElementById('bg');
      divbg.style.visibility = "hidden";
      var divobj = document.getElementById(id);
      var ytobj = document.getElementById("yt" + id);
      divobj.removeChild(ytobj); //remove YouTube Div
      document.body.removeChild(divobj); // remove Popup Div
}
</script>
<style type="text/css">
.popup {
      position: fixed;
      z-index: 2;
}
.popup_bg {
    border: 1px solid #A0A0A0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      position: fixed;     
      visibility: hidden;
      padding: 10px;
      height: 100%; width: 100%;
      filter: alpha(opacity=70); /* for IE */
      opacity: 0.7; /* CSS3 standard */
      left: 0px; top: 0px;
      background-color: #999;
      z-index: 1;
}
.ytcontainer {
      border: 2px solid #666;
      clear: both;
}
.close_button {
      font-family: Verdana, Geneva, sans-serif;
      font-size: small; font-weight: bold;
      color: #666; text-decoration: none;
      display: block; float: right;
      background-color: #FFF;
      z-index: 3; cursor: default;
      border: 2px solid #666;
      margin-bottom: -2px;
      padding: 0px 3px 0px 3px;
      cursor: pointer;
}
.vdo
{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #A0A0A0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    display: none;
    font-size: 1em;
    padding: 10px;
    text-align: left;
    z-index: 100002;
     display: block;
    left: 324.5px;
    position: fixed;
    top: -120.5px;
}
</style>
<div id="bg" class="popup_bg"><div class="vdo">aa</div></div>
<div class="main_content">
  <div class="innercontent_outerbox">
        <h1>Video Center</h1>
        <br />
        <table width="885" border="0" align="center" cellpadding="5" cellspacing="5">
          <tr>
            <td><form action="" method="get">
                <table width="100%" border="0" cellspacing="5" cellpadding="5">
                  <tr>
                    <td width="20%"> 
                        <?php echo CHtml::dropDownList('user_group_id',@$_GET['user_group_id'],UserGroup::userGroupFrontEnd(),array(
                'prompt'=>'Category (All)',
                'class'=>'Product_selectbox',
                //'onChange'=>'javascript:window.location="'.Yii::app()->createUrl('site/video_center').'?user_group_id="+$("#user_group_id").val()'
                )); ?></td>
                    
                    <?php /*<td width="20%"> 
                        <?php echo CHtml::dropDownList('product_id',@$_GET['product_id'],Product::getProduct(null,null,null,true,null),array(
                'prompt'=>'Product (All)',
                'class'=>'Product_selectbox',
                //'onChange'=>'javascript:window.location="'.Yii::app()->createUrl('site/video_center').'?product_id="+$("#product_id").val()'
                )); ?></td> */ ?>
                    
                    <td width="20%"> <?php echo CHtml::dropDownList('purpose',@$_GET['purpose'],array('configuration'=>'Configuration','product_feature_demo'=>'Product Feature & Demo','solution_intro'=>'Solution Intro',),array(
                'prompt'=>'Purpose (All)',
                'class'=>'Product_selectbox',
                //'onChange'=>'javascript:window.location="'.Yii::app()->createUrl('site/video_center').'?purpose="+$("#purpose").val()'
                )); ?></td>
                    <td valign="top" width="40%"><input type="submit" value="Search" name="btValide" class="submit_button"></td>
                  </tr>
                </table>
              </form></td>
          </tr>
        </table>
        <br />
        <div class="featured_items_boxouter">
          <ul class="video">
              <?php if($model==null) echo "<h2>No results found </h2>"; ?>
              <?php foreach($model as $eachModel):
                  preg_match('/[\\?\\&]v=([^\\?\\&]+)/',$eachModel->video_script,$matches); 
              ?>
            <li> <a class="video"  title="<?php echo $eachModel->title; ?>" href="#" onclick="openYouTube('<?php echo $matches[1]; ?>')">
                    <span><div class="play_button"></div>
                        <img src="http://img.youtube.com/vi/<?php echo $matches[1]; ?>/mqdefault.jpg" width="245" height="153" />
                    </span>
                </a>
              <div class="video_title">
                <h2><?php echo $eachModel->title; ?></h2>
                <?php echo $eachModel->brief_description; ?> </div>
                <div class="watch_video">
                <a href="#">Watch Video</a>
<span style="color:#F00"><?php echo $eachModel->date; ?></span>
                
                </div>
            </li>
            <?php endforeach; ?>
          </ul>
            
             
        </div><?php
        // the pagination widget with some options to mess
    $this->widget('CLinkPager', array(
            'currentPage'=>$pages->getCurrentPage(),
            'itemCount'=>$item_count,
            'pageSize'=>$page_size,
            'maxButtonCount'=>5,
            //'nextPageLabel'=>'My text >',
            'header'=>'',
        'htmlOptions'=>array('class'=>'pagination classC page-C-01'),
        ));
        ?>
        
      </div>
    
<?php echo $this->renderPartial('_bottom_common_user_product_group'); ?> 