function PageContent()
{
    global $objCategory;
    ?>
    
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // fix to preserve width of cells
                var fixHelper = function(e, ui) {
                    ui.children().each(function() {
                        $(this).width($(this).width());
                    });
                    return ui;
                };
                var saveIndex = function(e, ui) {
                    //alert("New position: " + ui.item.index());
                    //alert("Image Id: " + ui.item.attr("id"));
                    id = ui.item.attr("id").replace("img_", "");
                    $.ajax({
                        url: 'itemvideo_list.php',
                        data: {
                            dragsort: 1,
                            idx: ui.item.index(),
                            id: id
                        },
                        type: 'POST',
                        dataType: 'html',
                        success: function (data) {
                            //alert("done");
                        },
                        error: function (xhr, status) {
                            alert('Sorry, there was a problem!');
                        }
                    });
                }; // end saveIndex
    
                $("#list_table tbody").sortable({
                    helper: fixHelper,
                    stop: saveIndex
                }).disableSelection();
    
            }); // end document.ready
        </script>
        <style>
            .icon-resize-vertical:hover {
                cursor:grab;
            }
        </style>        
    
            <div class="layout center-flex">

                <?php 
    $aLabels = array();
    $aLinks = array();
    $aLabels[0] = 'Home';
    $aLinks[0] = 'mainpage.php';
    $aLabels[1] = $objCategory->CategoryName;
    $aLinks[1] = 'category_list.php?';
    $aLabels[2] = 'Items';
    $aLinks[2] = 'item_list.php?cat=' . $_REQUEST['cat'];
    $aLabels[3] = 'Item Videos';
    $aLinks[3] = '';
    echo Helpers::CreateBreadCrumbs($aLabels, $aLinks);
    ?>

                <div class="bigbotspace flex-container space-between">
                    <p class="larger auto heading"><?php 
    echo $objCategory->CategoryName;
    ?>
</p>
                    <a href="itemvideo_admin.php?cat=<?php 
    echo $objCategory->Id;
    ?>
&item=<?php 
    echo $_REQUEST['item'];
    ?>
" class="button_link"><button class="">Add New Item Video</button></a>
                </div>
            </div>
    
            <div class="layout">
    
                <table class="tablestyle" id="list_table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Video File Name</th>
<!-- 
                            <th>Image</th>
 -->
                            <th class="mid">Order</th>
                            <th class="mid">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
    $objItemVideo = new ItemVideo();
    $oItemVideo = $objItemVideo->getAllItemVideoByItemId($_REQUEST['item']);
    foreach ($oItemVideo as $itemvideo) {
        echo '<tr id="img_' . $itemvideo->Id . '">' . PHP_EOL;
        echo '<td>' . $itemvideo->Id . '</td>' . PHP_EOL;
        echo '<td>' . $itemvideo->ItemVideoTitle . '</td>' . PHP_EOL;
        echo '<td>';
        echo $itemvideo->ItemVideoUrl;
        echo '</td>' . PHP_EOL;
        //                             echo '<td>';
        //                             if ($itemvideo->ItemVideoPlaceholderImageUrl != '') {
        //                                 echo '<img src="/' . $itemvideo->GetPath() . $itemvideo->ItemVideoPlaceholderImageUrl . '" style="width:80px;">';
        //                             }
        //                             echo '</td>' . PHP_EOL;
        echo '<td class="mid"><img src="img/arrow-up-down.png" /></td>' . PHP_EOL;
        echo '<td class="mid"><a href="itemvideo_admin.php?cat=' . $_REQUEST['cat'] . '&item=' . $_REQUEST['item'] . '&id=' . $itemvideo->Id . '"><img src="img/edit-icon.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="itemvideo_delete.php?cat=' . $_REQUEST['cat'] . '&item=' . $_REQUEST['item'] . '&id=' . $itemvideo->Id . '"><img src="img/delete-icon.png" /></a></td>' . PHP_EOL;
        echo '</tr>' . PHP_EOL;
    }
    ?>
                    </tbody>
                </table>
    
            </div> <!-- layout -->
    
<?php 
}
function PageContent()
{
    $item = new Item($_REQUEST['item']);
    $category = new Category($item->CategoryId);
    ?>
    
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                // fix to preserve width of cells
                var fixHelper = function(e, ui) {
                    ui.children().each(function() {
                        $(this).width($(this).width());
                    });
                    return ui;
                };
                var saveIndex = function(e, ui) {
                    //alert("New position: " + ui.item.index());
                    //alert("Image Id: " + ui.item.attr("id"));
                    id = ui.item.attr("id").replace("img_", "");
                    $.ajax({
                        url: 'itemimage_list.php',
                        data: {
                            dragsort: 1,
                            idx: ui.item.index(),
                            id: id
                        },
                        type: 'POST',
                        dataType: 'html',
                        success: function (data) {
                            //alert("done");
                        },
                        error: function (xhr, status) {
                            alert('Sorry, there was a problem!');
                        }
                    });
                }; // end saveIndex
    
                $("#list_table tbody").sortable({
                    helper: fixHelper,
                    stop: saveIndex
                }).disableSelection();
    
            }); // end document.ready
        </script>
        <style>
            .icon-resize-vertical:hover {
                cursor:grab;
            }
        </style>        
    
            <div class="layout center-flex">

                <?php 
    $aLabels = array();
    $aLinks = array();
    $aLabels[0] = 'Home';
    $aLinks[0] = 'mainpage.php';
    $aLabels[1] = $category->CategoryName;
    $aLinks[1] = 'item_list.php?cat=' . $category->Id;
    $aLabels[2] = $item->ItemName;
    $aLinks[2] = '';
    echo Helpers::CreateBreadCrumbs($aLabels, $aLinks);
    ?>

<!-- 
                <div class="bigbotspace flex-container space-between">
                    <p class="larger auto heading"><?php 
    echo $item->ItemName;
    ?>
 Images</p>
                    <a href="itemimage_admin.php?item=<?php 
    echo $_REQUEST['item'];
    ?>
" class="button_link"><button class="">Add New Item Image</button></a>
                </div>
 -->
            </div>
    
            <div class="layout">
    
                <table class="tablestyle">
                    <thead>
                        <tr>
                            <th colspan="2">Item Settings&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="item_admin.php?id=<?php 
    echo $item->Id;
    ?>
"><img src="img/edit-icon.png" /></a></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Item Name:</td>
                            <td><?php 
    echo $item->ItemName;
    ?>
</td>
                        </tr>
                        <tr>
                            <td>Background Color:</td>
                            <td><?php 
    echo $item->BackgroundColor;
    ?>
</td>
                        </tr>
                        <tr>
                            <td>Contact Email:</td>
                            <td><?php 
    echo $item->ContactEmail;
    ?>
</td>
                        </tr>
                    </tbody>
                </table>
                    
            </div> <!-- layout -->

			<div class="all-section-separator"></div>
			
            <div class="layout">
    
                <table class="tablestyle" id="list_table">
                    <thead>
                    	<tr>
                    		<th colspan="5">Item Images</th>
                    	</tr>
                    </thead>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Side</th>
                            <th>Image</th>
                            <th>Hotspots</th>
<!-- 
                            <th class="mid">Order</th>
 -->
                            <th class="mid">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
    $objItemImage = new ItemImage();
    $objItemImageHighlight = new ItemImageHighlight();
    $oItemImage = $objItemImage->getAllItemImageByItemId($_REQUEST['item']);
    foreach ($oItemImage as $itemimage) {
        echo '<tr id="img_' . $itemimage->Id . '">' . PHP_EOL;
        echo '<td>' . $itemimage->Id . '</td>' . PHP_EOL;
        echo '<td>' . $itemimage->ItemImageSide . '</td>' . PHP_EOL;
        echo '<td><img src="/' . $itemimage->GetPath() . $itemimage->ItemImageUrl . '" style="width:80px;"></td>' . PHP_EOL;
        echo '<td>';
        $hcount = $objItemImageHighlight->getCountItemImageHighlightByItemImageId($itemimage->Id);
        //echo '<a href="itemimagehotspot.php?img=' . $itemimage->Id . '">' . $hcount . ' Hotspots</a>';
        // note: above hotspot admin would be pretty complicated from a user perspective (x, y, dimensions, image).
        //       therefore, not implementing now. - Jay
        echo $hcount . ' Hotspots</a>';
        echo '</td>' . PHP_EOL;
        //                             echo '<td class="mid"><img src="img/arrow-up-down.png" /></td>' . PHP_EOL;
        echo '<td class="mid"><a href="itemimage_admin.php?id=' . $itemimage->Id . '" style="width:200px;"><img src="img/edit-icon.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="itemimage_delete.php?id=' . $itemimage->Id . '"><img src="img/delete-icon.png" /></a></td>' . PHP_EOL;
        echo '</tr>' . PHP_EOL;
    }
    ?>
                    </tbody>
                </table>
    
            </div> <!-- layout -->

			<div class="all-section-separator"></div>

            <div class="layout">
    
                <table class="tablestyle" id="list_table">
                    <thead>
                    	<tr>
                    		<th colspan="4">Item Infos</th>
                    	</tr>
                    </thead>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Category</th>
                            <th>Text</th>
                            <th class="mid">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
    $objItemInfo = new ItemInfo();
    $objItemInfoType = new ItemInfoType();
    $item_info_types = $objItemInfoType->GetAllItemInfoType();
    $objItemInfoImage = new ItemInfoImage();
    foreach ($item_info_types as $type) {
        $oItemInfo = $objItemInfo->GetAllItemInfoByItemIdItemInfoTypeId($_REQUEST['item'], $type->Id);
        $item_info = $oItemInfo[0];
        echo '<tr>' . PHP_EOL;
        echo '<td>' . $item_info->Id . '</td>' . PHP_EOL;
        echo '<td>' . $type->ItemInfoTypeName . '</td>' . PHP_EOL;
        echo '<td>' . strip_tags($item_info->ItemInfo) . '</td>' . PHP_EOL;
        echo '<td class="mid"><a href="iteminfotype_admin.php?id=' . $item_info->Id . '" style="width:200px;"><img src="img/edit-icon.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="iteminfotype_delete.php?id=' . $item_info->Id . '"><img src="img/delete-icon.png" /></a> (not working)</td>' . PHP_EOL;
        echo '</tr>' . PHP_EOL;
    }
    ?>
                    </tbody>
                </table>
    
            </div> <!-- layout -->

			<div class="all-section-separator"></div>

            <div class="layout">
    
                <table class="tablestyle" id="list_table">
                    <thead>
                    	<tr>
                    		<th colspan="4">Item Info Images</th>
                    	</tr>
                    </thead>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Image</th>
                            <th>&nbsp;</th>
                            <th class="mid">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
    $objItemInfoImage = new ItemInfoImage();
    $oItemInfoImage = $objItemInfoImage->GetAllItemInfoImageByItemId($_REQUEST['item']);
    foreach ($oItemInfoImage as $image) {
        echo '<tr>' . PHP_EOL;
        echo '<td>' . $image->Id . '</td>' . PHP_EOL;
        echo '<td><img src="/' . $image->GetPath() . $image->ItemInfoImageUrl . '" style="height:60px;"></td>' . PHP_EOL;
        echo '<td>' . '&nbsp;' . '</td>' . PHP_EOL;
        echo '<td class="mid"><a href="iteminfoimage_admin.php?id=' . $image->Id . '" style="width:200px;"><img src="img/edit-icon.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="iteminfoimage_delete.php?id=' . $image->Id . '"><img src="img/delete-icon.png" /></a> (not working)</td>' . PHP_EOL;
        echo '</tr>' . PHP_EOL;
    }
    ?>
                    </tbody>
                </table>
    
            </div> <!-- layout -->
            			
			<div class="all-section-separator"></div>

            <div class="layout">
    
                <table class="tablestyle" id="list_table">
                    <thead>
                    	<tr>
                    		<th colspan="5">Item Videos</th>
                    	</tr>
                    </thead>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>URL</th>
                            <th>Image</th>
                            <th class="mid">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
    $objItemVideo = new ItemVideo();
    $oItemVideo = $objItemVideo->GetAllItemVideoByItemId($_REQUEST['item']);
    foreach ($oItemVideo as $video) {
        echo '<tr>' . PHP_EOL;
        echo '<td>' . $video->Id . '</td>' . PHP_EOL;
        echo '<td>' . $video->ItemVideoTitle . '</td>' . PHP_EOL;
        echo '<td>' . $video->ItemVideoUrl . '</td>' . PHP_EOL;
        echo '<td><img src="/' . $video->GetPath() . $video->ItemVideoPlaceholderImageUrl . '" style="height:60px;"></td>' . PHP_EOL;
        echo '<td class="mid"><a href="itemvideo_admin.php?id=' . $video->Id . '" style="width:200px;"><img src="img/edit-icon.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="itemvideo_delete.php?id=' . $video->Id . '"><img src="img/delete-icon.png" /></a> (not working)</td>' . PHP_EOL;
        echo '</tr>' . PHP_EOL;
    }
    ?>
                    </tbody>
                </table>
    
            </div> <!-- layout -->
						
			<div class="all-section-separator"></div>

<?php 
    // this section disabled because added item_gallery table.
    ?>
<!-- 
            <div class="layout">
    
                <table class="tablestyle" id="list_table">
                    <thead>
                    	<tr>
                    		<th colspan="4">Item Gallery Images</th>
                    	</tr>
                    </thead>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Description</th>
                            <th>Image</th> 
                            <th class="mid">Order (comment out)</th>
                            <th class="mid">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
    $objItemGalleryImage = new ItemGalleryImage();
    $oItemGalleryImage = $objItemGalleryImage->getAllItemGalleryImageByItemId($_REQUEST['item']);
    foreach ($oItemGalleryImage as $image) {
        echo '<tr id="img_' . $image->Id . '">' . PHP_EOL;
        echo '<td>' . $image->ItemGalleryImageDescription . '</td>' . PHP_EOL;
        echo '<td><img src="/' . $image->GetPath() . $image->ItemGalleryImageUrl . '" style="width:80px;"></td>' . PHP_EOL;
        //                             echo '<td class="mid"><img src="img/arrow-up-down.png" /></td>' . PHP_EOL;
        echo '<td class="mid"><a href="itemgalleryimage_admin.php?id=' . $image->Id . '" style="width:200px;"><img src="img/edit-icon.png" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="itemgalleryimage_delete.php?id=' . $image->Id . '"><img src="img/delete-icon.png" /></a> (not working)</td>' . PHP_EOL;
        echo '</tr>' . PHP_EOL;
    }
    ?>
                    </tbody>
                </table>
    
            </div> <!~~ layout ~~>
 -->
			
			<p>Presentations:</p>

<?php 
}
require '../inc/classes/Helpers.php';
// page vars
$page_title = "";
$id = $_REQUEST['id'];
// id required
if ($id == "") {
    header("Location:mainpage.php");
    exit;
}
// if form was submitted
if ($_POST['commit'] == "Cancel") {
    header("Location:itemvideo_list.php?cat=" . $_REQUEST['cat'] . "&item=" . $_REQUEST['item']);
    exit;
}
if ($_POST['commit'] == "Delete Item Video") {
    $objItemVideo = new ItemVideo($id);
    $objItemVideo->Delete($id);
    header("Location:itemvideo_list.php?cat=" . $_REQUEST['cat'] . "&item=" . $_REQUEST['item']);
    exit;
}
$objItemVideo = new ItemVideo($id);
include "includes/pagetemplate.php";
function PageContent()
{
    global $objItemVideo;
    global $id;
    $item = new Item($objItemVideo->ItemId);
    $objCategory = new Category($item->CategoryId);
    ?>

            <div class="layout laymidwidth">
        $obj = new ItemVideo($id);
        $obj->ItemId = $_REQUEST["item"];
        $obj->ItemVideoTitle = $_REQUEST["item_video_title"];
        $obj->ItemVideoUrl = $_REQUEST["item_video_url"];
        $obj->update();
        $obj->handleFileUploads();
        $obj->handleDropFileUploads($aDropFields[0], 'ItemVideoUrl');
        //$obj->handleDropFileUploads($aDropFields[1], 'ItemVideoPlaceholderImageUrl');
        // redirect to listing list
        header("Location:itemvideo_list.php?cat=" . $_REQUEST['cat'] . "&item=" . $_REQUEST['item']);
        exit;
    }
} else {
    if ($_REQUEST['mode'] == 'e') {
        //listing
        $objItemVideo = new ItemVideo($id);
        $item_id = $objItemVideo->ItemId;
        $item_video_title = $objItemVideo->ItemVideoTitle;
        $item_video_url = $objItemVideo->ItemVideoUrl;
        $item_video_placeholder_image_url = $objItemVideo->ItemVideoPlaceholderImageUrl;
        $path = $objItemVideo->GetPath();
    } else {
        if ($_REQUEST['mode'] == 'a') {
            $item_id = $_REQUEST["item"];
        }
    }
}
include "includes/pagetemplate.php";
function PageContent()
{
    global $id;
function pageContent()
{
    global $id, $item;
    $objItemInfo = new ItemInfo();
    $oItemInfo = $objItemInfo->getAllItemInfoByItemId($item->Id);
    $info_types_list = '<ol class="info-buttons">';
    $i = 0;
    foreach ($oItemInfo as $item_info) {
        $info_type = new ItemInfoType($item_info->ItemInfoTypeId);
        $class = '';
        if ($i == 0) {
            $class = ' class="active"';
        }
        $info_types_list .= '<li' . $class . ' data-id="' . $item_info->ItemInfoTypeId . '">' . $info_type->ItemInfoTypeName . '</li>';
        $i++;
    }
    //$info_types_list .= '<li data-id="2">Specs</li>';
    $info_types_list .= '</ol>';
    $info_types_content = '<div class="content">';
    $i = 0;
    foreach ($oItemInfo as $item_info) {
        $active_class = '';
        if ($i == 0) {
            $active_class = 'active ';
        }
        $info_types_content .= '<div class="' . $active_class . 'info-content-section info-content-section-' . $item_info->ItemInfoTypeId . '">' . preg_replace("/[\r\n]/", "", $item_info->ItemInfo) . '</div>';
        $i++;
    }
    $info_types_content .= '</div>';
    $objItemInfoImage = new ItemInfoImage();
    $oItemInfoImage = $objItemInfoImage->getAllItemInfoImageByItemId($id);
    $info_images = '';
    $i = 0;
    $info_image_count = 0;
    foreach ($oItemInfoImage as $image) {
        if ($i > 0) {
            $info_images .= ",";
        }
        $info_images .= "'/" . $image->GetPath() . $image->ItemInfoImageUrl . "'";
        $i++;
    }
    $info_image_count = $i;
    $info_images = "var info_images = [" . $info_images . "];\n";
    $frontimage = '';
    $rightimage = '';
    $leftimage = '';
    $backimage = '';
    $frontimage_id = 0;
    $rightimage_id = 0;
    $leftimage_id = 0;
    $backimage_id = 0;
    $openimage = '';
    $rotate_sides = array();
    $objItemImage = new ItemImage();
    $obj = $objItemImage->getAllItemImageByItemIdItemImageSide($id, 'Open');
    if (count($obj) > 0) {
        $itemimage = $obj[0];
        $openimage = '/' . $itemimage->GetPath() . $itemimage->ItemImageUrl;
    }
    $obj = $objItemImage->getAllItemImageByItemIdItemImageSide($id, 'Front');
    if (count($obj) > 0) {
        $itemimage = $obj[0];
        $rotate_sides[] = 'Front';
        $frontimage = '/' . $itemimage->GetPath() . $itemimage->ItemImageUrl;
        $frontimage_id = $itemimage->Id;
    }
    $obj = $objItemImage->getAllItemImageByItemIdItemImageSide($id, 'Right');
    if (count($obj) > 0) {
        $itemimage = $obj[0];
        $rotate_sides[] = 'Right';
        $rightimage = '/' . $itemimage->GetPath() . $itemimage->ItemImageUrl;
        $rightimage_id = $itemimage->Id;
    }
    $obj = $objItemImage->getAllItemImageByItemIdItemImageSide($id, 'Back');
    if (count($obj) > 0) {
        $itemimage = $obj[0];
        $rotate_sides[] = 'Back';
        $backimage = '/' . $itemimage->GetPath() . $itemimage->ItemImageUrl;
        $backimage_id = $itemimage->Id;
    }
    $obj = $objItemImage->getAllItemImageByItemIdItemImageSide($id, 'Left');
    if (count($obj) > 0) {
        $itemimage = $obj[0];
        $rotate_sides[] = 'Left';
        $leftimage = '/' . $itemimage->GetPath() . $itemimage->ItemImageUrl;
        $leftimage_id = $itemimage->Id;
    }
    $objItemVideo = new ItemVideo();
    $oItemVideo = $objItemVideo->getAllItemVideoByItemId($id);
    $product_videos = '';
    $i = 0;
    $video_count = 0;
    foreach ($oItemVideo as $video) {
        if ($i > 0) {
            $product_videos .= ",";
        }
        $vpath = "/" . $video->GetPath();
        if (preg_match("/http/", $video->ItemVideoUrl)) {
            // a URL, don't get from local directory:
            $vpath = "";
        }
        $product_videos .= '{"video":"' . $vpath . $video->ItemVideoUrl . '", "title":"' . $video->ItemVideoTitle . '"}';
        $i++;
    }
    $video_count = $i;
    $product_videos = 'var product_videos = {"videos":[' . "\n" . $product_videos . "\n" . '    ]}' . "\n";
    $objItemGalleryImage = new ItemGalleryImage();
    $oItemGalleryImage = $objItemGalleryImage->getAllItemGalleryImageByItemId($id);
    $gallery_images = '';
    $i = 0;
    $gallery_image_count = 0;
    foreach ($oItemGalleryImage as $image) {
        if ($i > 0) {
            $gallery_images .= ",";
        }
        $gallery_images .= "'/" . $image->GetPath() . $image->ItemGalleryImageUrl . "'";
        $i++;
    }
    $gallery_image_count = $i;
    $gallery_images = "var gallery_images = [" . $gallery_images . "];\n";
    $gallery_caption = "Gallery";
    if ($item->GalleryDescription != "") {
        $gallery_caption = $item->GalleryDescription;
    }
    $objItemPresentation = new ItemPresentation();
    $objItemPresentationImage = new ItemPresentationImage();
    $oItemPresentation = $objItemPresentation->getAllItemPresentationByItemId($id);
    $product_shows = "";
    $show_images = array();
    $product_show_images = '';
    $i = 0;
    $show_count = 0;
    foreach ($oItemPresentation as $show) {
        if ($i > 0) {
            $product_shows .= ",";
        }
        $product_shows .= '{"thumbnail":"/' . $show->GetPath() . $show->ItemPresentationThumbnailUrl . '", "title":"' . $show->ItemPresentationName . '"}';
        $oItemPresentationImage = $objItemPresentationImage->getAllItemPresentationImageByItemPresentationId($show->Id);
        $j = 0;
        foreach ($oItemPresentationImage as $image) {
            if ($j > 0) {
                $show_images[$i] .= ",";
            }
            $show_images[$i] .= "'/" . $image->GetPath() . $image->ItemPresentationImageUrl . "'";
            $j++;
        }
        $product_show_images .= "            show_images[" . $i . "] = [" . $show_images[$i] . "];\n";
        $i++;
    }
    $show_count = $i;
    $product_shows = 'var product_shows = {"shows":[' . "\n" . $product_shows . "\n" . '    ]}' . "\n";
    $objItemImageHighlight = new ItemImageHighlight();
    ?>
        <script type="text/javascript">
			var current_show = 0;
			var show_needs_full_load = true;
            var rotate_sides = [];
<?php 
    foreach ($rotate_sides as $side) {
        echo "            rotate_sides.push('" . $side . "');\n";
    }
    ?>
            var rotate_current_item = 0;
            <?php 
    echo $info_images;
    ?>
            <?php 
    echo $product_videos;
    ?>
            <?php 
    echo $gallery_images;
    ?>
            var show_images = [];
<?php 
    echo $product_show_images;
    ?>
            <?php 
    echo $product_shows;
    ?>
            $(document).ready(function() {              
                $("#email_form_submit").on('click touch', function() {
                    if ($("#name").val() == "" || $("#email").val() == "" || $("#question").val() == "") {
                        alert("All fields are required.");
                        return false;
                    };
                    if (!validateEmail($("#email").val())) {
                        alert("Email address is invalid.")
                        return false;
                    }
                
                    $.ajax({
                    url: "ajax_send_email.php",
                        type: 'GET',
                        data: {
                            name: $("#name").val(),
                            email: $("#email").val(),
                            question: $("#question").val(),
                            item_id: "<?php 
    echo $item->Id;
    ?>
",
                            category_id: "<?php 
    echo $item->CategoryId;
    ?>
"
                        },
                        success: function(data){
                            if (data == '1') {
                                $("#thankDiv").show();
                                $("#form-div").hide();
                                $("#name").val("");
                                $("#email").val("");
                                $("#question").val("");
                            }
                            else {
                                alert("Error: Please try again.");
                            }
                        },
                        error: function(){
                            console.log('error');
                        }
                    });
                    return false;
                });
				$('.prod-icon').on('click',function(){
                	show_needs_full_load = true;
                	current_show = 0;
					$('.close-form').trigger('click');
					$('.rotate-carousel-indicators').fadeOut();
					$('.open-not-active').fadeOut();
					$('.carousel-inner').fadeIn();
					$('.top-section').css('border-bottom','none');
					$('.bottom-section').css('display','block');
					$('.rotate-menu-item').css('display', 'block');
					$('.rotate-menu-item-active').css('display', 'none');
					$('.open-door').attr('src','/assets/img/opendoor.png');
					$('.open-door').removeClass('open-door-active');
					var activeItem = $('.active-item').parent().parent().attr('data-id');
					$('.active-item').attr('src','/assets/img/'+activeItem+'.png');
					$('.active-item').removeClass('active-item')
					var newItem = $(this).parent().parent().attr('data-id');
					$(this).attr('src','/assets/img/'+newItem+'-active.png');
					$(this).addClass('active-item');
				});
				$('.rotate-icon').on('click',function(){
                	show_needs_full_load = true;
                	current_show = 0;
					$('.close-form').trigger('click');
					$('.open-not-active').fadeOut();
					$('.carousel-inner').fadeIn();
					$('.open-door').attr('src','/assets/img/opendoor.png');
					$('.open-door').removeClass('open-door-active');
					if( $(this).parent().parent().hasClass('rotate-menu-item-active') ){
						$(this).parent().parent().css('display','none');
						$('.rotate-menu-item').css('display', 'block');
					}else if( $(this).parent().parent().hasClass('rotate-menu-item') ){
						$(this).parent().parent().css('display','none');
						$('.rotate-menu-item-active').css('display', 'block');
					}
				});
				
				var nav_controls = ""; // used in lightbox add functions below
                // adds info data to the lightbox
                $('.info-menu-item').on('click touch',function () {
                	show_needs_full_load = true;
                    $("#name").val("");
                    $("#email").val("");
                    $("#question").val("");
                    $("#form-div").show();
                    $("#thankDiv").hide();
                	current_show = 0;
                    $('.product-lightbox-container .top-section').html('<div id="product-info-carousel" class="carousel slide" data-ride="carousel"><div class="carousel-inner" role="listbox"></div></div>');
                    nav_controls = "";
                    if (info_images.length > 1) {
                    	nav_controls = '<div class="prev"><a href="#product-info-carousel" role="button" data-slide="prev"><img src="assets/img/red-arrow.png" alt="arrow"></a></div><div class="next slider-next"><a href="#product-info-carousel" role="button" data-slide="next"><img src="assets/img/red-arrow.png" alt="arrow"></a></div>';
                    }
                    $('.product-lightbox-container .bottom-content').prepend('<div class="slider-container"><div class="slider-controls">'+nav_controls+'</div></div>');
                    $(info_images).each(function(i, data){
                        $('#product-info-carousel .carousel-inner').append('<div class="item"><img src="'+data+'" alt="Info Image"></div>');
                        $('.info-carousel-indicators').append('<li data-target="#product-info-carousel" data-slide-to="'+i+'"></li>');
                    });
                    $('#product-info-carousel .carousel-inner .item').first().addClass('active');
                    $('.info-carousel-indicators li').first().addClass('active');
                    $('.info-carousel-indicators li').on('click',function(){
                        $('.info-carousel-indicators .active').removeClass('active');
                        $(this).addClass('active');
                    });
                    $('.product-lightbox-container .bottom-content').append('<div class="show-form-container"><a href="" class="show-form">Request Info</a><a href="" class="show-form show-form-img"><img src="assets/img/mail_button.png"></a></div><div class="clear"></div><?php 
    echo $info_types_list . $info_types_content;
    ?>
');
                });
                
                $('.rotate-menu-item-active .next-view').on('click touch', function() {
                    rotate_current_item++;
                    if (rotate_current_item >= rotate_sides.length) {
                        rotate_current_item = 0;
                    }
                    $('#rotate-title').text(rotate_sides[rotate_current_item]);
                });
                $('.rotate-menu-item-active .prev-view').on('click touch', function() {
                    rotate_current_item--;
                    if (rotate_current_item < 0) {
                        rotate_current_item = (rotate_sides.length - 1);
                    }
                    $('#rotate-title').text(rotate_sides[rotate_current_item]);
                });
                $('.open-door').on('click',function(e){
                	show_needs_full_load = true;
                	current_show = 0;
                    e.preventDefault();
                    $('.close-form').trigger('click');
                    $('.rotate-carousel-indicators').fadeOut();
                    $('.modalx-container').trigger('click')
                    $('.rotate-menu-item').css('display', 'block');
                    $('.rotate-menu-item-active').css('display', 'none');
                    if( $('.open-door').hasClass('open-door-active') ){
                        $(this).attr('src','assets/img/opendoor.png');
                        $(this).removeClass('open-door-active');
                        $('.open-not-active').fadeOut( 300, function() {
                            $('.carousel-inner').fadeIn();
                        });
                    }else{
                        $(this).attr('src','assets/img/opendoor-active.png');
                        $(this).addClass('open-door-active');
                        $('.carousel-inner').fadeOut( 300, function() {
                            $('.open-not-active').fadeIn();
                        });
                    }
                });
                // adds video data to the lightbox
                $('.video-menu-item').on('click',function(){
                	show_needs_full_load = true;
                	current_show = 0;
                    $('.product-lightbox-container .bottom-section').css('display','none');
                    $('.product-lightbox-container .top-section').html('<div id="product-video-carousel" class="carousel slide" data-ride="carousel"><div class="carousel-inner" role="listbox"></div></div>').css('border-bottom','#FF1D25 solid 55px');
                    $(product_videos.videos).each(function(i, data){
                    	var mimetype = "video/mp4";
                    	var ext = data.video.split('.').pop();
                    	if (ext == "mov") {
                    		mimetype = "video/quicktime";
                    	}
                    	else if (ext == "wmv") {
                    		mimetype = "video/x-ms-wmv";
                    	}
                    	else if (data.video.indexOf("webm")) {
                    	    mimetype = "video/webm";
                    	}
                        $('#product-video-carousel .carousel-inner').append('<div class="item"><video style="width:560px; height:315px;"><source src="'+data.video+'" type="'+mimetype+'"></video><div class="video-info-container"><div class="carousel-caption">'+data.title+'</div><div class="fullscreen"></div><div class="videoplay" ><img src="assets/img/red_play.png" style="width:100%; height:100%;"></div><div class="videopause" style="display:none;"><img src="assets/img/red_pause.png" style="width:100%; height:100%;"></div><div class="video-time" style="float:right; margin-right:20px; color:red; display:none;">Length: <span id="video-length"></span></div></div>');
                    });
                    nav_controls = "";
                    if (product_videos.videos.length > 1) {
                    	nav_controls = '<div class="prev"><a href="#product-video-carousel" role="button" data-slide="prev"><img src="assets/img/red-arrow.png" alt="arrow"></a></div><div class="next slider-next"><a href="#product-video-carousel" role="button" data-slide="next"><img src="assets/img/red-arrow.png" alt="arrow"></a></div>';
                    }
                    $('.product-lightbox-container .top-section').append('<div class="video-info-container"><div class="video-slider-controls">'+nav_controls+'</div></div>');
                    $('#product-video-carousel .carousel-inner .item').first().addClass('active');
                });
                // adds gallery data to the lightbox
                $('.gallery-menu-item').on('click',function(){
                	show_needs_full_load = true;
                	current_show = 0;
                    $('.product-lightbox-container .bottom-section').css('display','none');
                    $('.product-lightbox-container .top-section').html('<div id="product-gallery-carousel" class="carousel slide" data-ride="carousel"><div class="carousel-inner" role="listbox"></div></div>').css('border-bottom','#FF1D25 solid 55px');
                    $(gallery_images).each(function(i, data){
                        $('#product-gallery-carousel .carousel-inner').append('<div class="item"><img src="'+data+'" alt="Gallery Image"></div>');
                        $('.info-carousel-indicators').append('<li data-target="#gallery-info-carousel" data-slide-to="'+i+'"></li>');
                    });
                    nav_controls = "";
                    if (gallery_images.length > 1) {
                    	nav_controls = '<div class="prev"><a href="#product-gallery-carousel" role="button" data-slide="prev"><img src="assets/img/red-arrow.png" alt="arrow"></a></div><div class="next slider-next"><a href="#product-gallery-carousel" role="button" data-slide="next"><img src="assets/img/red-arrow.png" alt="arrow"></a></div>';
                    }
                    $('.product-lightbox-container .top-section').append('<div class="gallery-info-container"><div class="carousel-caption"><?php 
    echo $gallery_caption;
    ?>
</div><div class="fullscreen"></div><div class="gallery-slider-controls">'+nav_controls+'</div></div>');
                    $('#product-gallery-carousel .carousel-inner .item').first().addClass('active');
                });
                // adds show/presentation data to the lightbox
                $('.show-menu-item').on('click',function(){
                	$('#bottom-slides div').removeClass("selected");
                    $('.product-lightbox-container .top-section').html('<div id="product-show-carousel" class="carousel slide" data-ride="carousel"><div class="carousel-inner" role="listbox"></div></div>');
                    $(show_images[current_show]).each(function(i, data){
                        $('#product-show-carousel .carousel-inner').append('<div class="item"><img src="'+data+'" alt="Gallery Image"></div>');
                        $('.info-carousel-indicators').append('<li data-target="#show-info-carousel" data-slide-to="'+i+'"></li>');
                    });
                	if (show_needs_full_load) {
						nav_controls = "";
						if (show_images.length > 1) {
							nav_controls = '<div class="prev"><a href="#product-show-carousel" role="button" data-slide="prev"><img src="assets/img/red-arrow.png" alt="arrow"></a></div><div class="next slider-next"><a href="#product-show-carousel" role="button" data-slide="next"><img src="assets/img/red-arrow.png" alt="arrow"></a></div>';
						}
                    	$('.product-lightbox-container .bottom-content').html('<div class="bottom-top-container"><div class="col-sm-2"><div class="show-slider-controls">'+nav_controls+'</div></div><div class="col-sm-8"><h2>'+product_shows.shows[current_show].title+'</h2></div><div class="col-sm-2"><div class="fullscreen"></div></div></div>');
						// bottom slider to switch show/presentation:
						nav_controls = "";
						if (product_shows.shows.length > 3) {
							nav_controls = '<div class="prev"><a href="javascript:void(0);" id="bottom-show-prev"><img src="assets/img/red-arrow.png" alt="arrow"></a></div><div id="bottom-slides-outer"><div id="bottom-slides"></div></div><div class="next slider-next"><a href="javascript:void(0);" id="bottom-show-next"><img src="assets/img/red-arrow.png" alt="arrow"></a></div>';
						}
						$('.product-lightbox-container .bottom-content').append('<div class="bottom-bottom-container">'+nav_controls+'</div>');
						$(product_shows.shows).each(function(i, data){
							$('#bottom-slides').append('<div id="bottom_slide_'+i+'"><img src="'+data.thumbnail+'"><p>'+data.title+'</p></div>');
						});
					}
					else {
						// not first load, only load top of bottom container
                    	$('.product-lightbox-container .bottom-content .bottom-top-container').html('<div class="col-sm-2"><div class="show-slider-controls"><div class="prev"><a href="#product-show-carousel" role="button" data-slide="prev"><img src="assets/img/red-arrow.png" alt="arrow"></a></div><div class="next slider-next"><a href="#product-show-carousel" role="button" data-slide="next"><img src="assets/img/red-arrow.png" alt="arrow"></a></div></div></div><div class="col-sm-8"><h2>'+product_shows.shows[current_show].title+'</h2></div><div class="col-sm-2"><div class="fullscreen"></div></div>');
					}
					$('#product-show-carousel .carousel-inner .item').first().addClass('active');
                    $('#bottom_slide_' + current_show).addClass("selected");
                    show_needs_full_load = false;
                });
                
                $(".product-lightbox-container").on("click touch", "#bottom-show-next", function() {
                	var newPos = $("#bottom-slides-outer").scrollLeft() + ($("#bottom-slides-outer").width() / 3);
                	$("#bottom-slides-outer").animate({scrollLeft: newPos}, 800);
                });
                $(".product-lightbox-container").on("click touch", "#bottom-show-prev", function() {
                	var newPos = $("#bottom-slides-outer").scrollLeft() - ($("#bottom-slides-outer").width() / 3);
                	$("#bottom-slides-outer").animate({scrollLeft: newPos}, 800);
                });
                
                $(".product-lightbox-container").on("click touch", "#bottom-slides div", function() {
                	var id = $(this).attr("id").replace("bottom_slide_", "");
                	current_show = id;
                    $('.show-menu-item').click();
                });
                
                $(".product-lightbox-container").on("click touch", ".fullscreen", function() {
                 	$("#underlay").show();
                 	$(".product-lightbox-container").css("width", "100%").addClass('fullscreen-wrap');
                 	$(".product-lightbox-container").css("margin-left", "0");
                 	$(".product-lightbox-container .top-section").css("background-color", "black");
                 	$(".product-lightbox-container .top-section").css("border-bottom", "0");
                 	$(".product-lightbox-container .modalx-container").css("background-color", "transparent");
                 	$(".product-lightbox-container .modalx-container").css("margin-right", "2%");
                 	$(".product-lightbox-container .videoplay, .product-lightbox-container .videopause").css("margin-right", "0");
                 	$(".product-lightbox-container .video-slider-controls").css("margin-top", "20px");
                 	$(".product-lightbox-container .video-info-container").css("width", "94%");
                 	$(".fullscreen").hide();
                 	$(".bottom-section").css("background-color", "black");
                 	$(".bottom-section").css("border-bottom", "0");
                 	$(".bottom-top-container").css("border-bottom", "0");
                 	$(".bottom-bottom-container").hide();
                 	$("#product-video-carousel video").css("width", "94%");
                 	$(".gallery-info-container").css("width", "94%");
                 	$("#product-video-carousel video").css("height", "");
                 	$(".carousel-caption").hide();
                 	if ($(".item.active .video-info-container .carousel-caption").length) {
                 		$(".modaltitle-container p").text($(".item.active .video-info-container .carousel-caption").text());
                 	}
                 	else if ($(".gallery-info-container .carousel-caption").length) {
                 		$(".modaltitle-container p").text($(".gallery-info-container .carousel-caption").text());
                 	}
                 	else if ($(".bottom-top-container div h2").length) {
                 		$(".modaltitle-container p").text($(".bottom-top-container div h2").text());
                 		$(".bottom-top-container div h2").hide();
                 	}
                 	$(".modaltitle-container").show();
                });
				$(".product-lightbox-container").on("click touch", ".videoplay", function() {
					$("video").trigger('pause');
					$(".product-lightbox-container #product-video-carousel .item.active video").trigger('play');
					$(".videoplay").hide();
					$(".videopause").show();
					//var duration_secs = $(".product-lightbox-container #product-video-carousel .item.active video").get(0).duration;
					//var minutes = Math.round(duration_secs / 60);
					//var seconds = Math.round(duration_secs % 60);
					//$("#video-length").text(minutes + ":" + seconds);
				});
				
				$(".product-lightbox-container").on("click touch", ".videopause, .video-info-container .next, .video-info-container .prev", function() {
					$("video").trigger('pause');
					$(".videopause").hide();
					$(".videoplay").show();
				});
				$(".product-lightbox-container").on("slid.bs.carousel", "#product-video-carousel", function() {
                 	$(".modaltitle-container p").text($(".item.active .video-info-container .carousel-caption").text());
				});
				
				$(".highlight").on("click touch", function(e) {
					$(this).next("div.highlight-text").toggle();
					$(this).toggleClass("highlight-active");
				});
				
				// swipe left/right on slideshows: touch handling
				document.addEventListener('touchstart', handleTouchStart, false);
				document.addEventListener('touchmove', handleTouchMove, false);
				var xDown = null;
				var yDown = null;
				var carousel_id = null;  // use to call carousel "next" or "prev" actions (default slideHandler)
				var slideHandler = null; // determines how to do slide action (default or other)
				var section = null;      // some swipes require this also for alternate or additional function call
				var nextClass = null;    // some swipes require this also for alternate or additional function call
				var prevClass = null;    // some swipes require this also for alternate or additional function call
				function handleTouchStart(e) {
					if (e.target.id == "top-section" || $(e.target).parents("#top-section").size()) { 
						xDown = e.touches[0].clientX;
						yDown = e.touches[0].clientY;
						slideHandler = "default"; // use default carousel action
						if (e.target.id == "product-info-carousel" || $(e.target).parents("#product-info-carousel").size()) {
						    carousel_id = "#product-info-carousel";
						}
						else if (e.target.id == "product-video-carousel" || $(e.target).parents("#product-video-carousel").size()) {
						    carousel_id = "#product-video-carousel";
						}
						else if (e.target.id == "product-gallery-carousel" || $(e.target).parents("#product-gallery-carousel").size()) {
						    carousel_id = "#product-gallery-carousel";
						}
						else if (e.target.id == "product-show-carousel" || $(e.target).parents("#product-show-carousel").size()) {
						    carousel_id = "#product-show-carousel";
						}
					}
					else if (e.target.id == "bottom-section" || $(e.target).parents("#bottom-section").size()) { 
						xDown = e.touches[0].clientX;
						yDown = e.touches[0].clientY;
						slideHandler = "bottom-div"; // uses slider-specific action
						section = ".product-lightbox-container .bottom-bottom-container";
						nextClass = " .next a:first";
						prevClass = " .prev a:first";
					}
					else if (e.target.id == "rotate-product-carousel" || $(e.target).parents("#rotate-product-carousel").size()) { 
						xDown = e.touches[0].clientX;
						yDown = e.touches[0].clientY;
						slideHandler = "rotate-prod"; // uses default carousel action AND slider-specific action
						carousel_id = "#rotate-product-carousel";
						section = ".rotate-menu-item-active";
						nextClass = " .next-view";
						prevClass = " .prev-view";
					}
					else {
						xDown = null;
						yDown = null;
						carousel_id = null
						slideHandler = null;
						section = null;
						nextClass = null;
						prevClass = null;
					}
				};                                                
				function handleTouchMove(e) {
					if (!xDown || !yDown) {
						return;
					}
					var xUp = e.touches[0].clientX;
					var yUp = e.touches[0].clientY;
					var xDiff = xDown - xUp;
					var yDiff = yDown - yUp;
					// check for most significant touch movement direction
					if (Math.abs(xDiff) > Math.abs(yDiff)) {
						if ( xDiff > 0 && xDiff > 10) {
							// left swipe
							//$(section+nextClass).click();
							if (slideHandler == "default" || slideHandler == "rotate-prod") {
							    $(carousel_id).carousel("next");
							}
							if (slideHandler == "bottom-div" || slideHandler == "rotate-prod") {
							   $(section+nextClass).click(); 
							}
							e.stopPropagation();
						}
						else if (xDiff < 0 && xDiff < -10) {
							// right swipe
							//$(section+prevClass).click();
							if (slideHandler == "default" || slideHandler == "rotate-prod") {
							    $(carousel_id).carousel("prev");
							}
							if (slideHandler == "bottom-div" || slideHandler == "rotate-prod") {
							   $(section+prevClass).click();
							}
							e.stopPropagation();
						}
					} else {
						if ( yDiff > 0 && yDiff > 2) {
							// up swipe
						}
						else if (yDiff < 0 && yDiff < -2) {
							// down swipe
						}
					}
					/* reset values */
					xDown = null;
					yDown = null;
					carousel_id = null;
					slideHandler = null;
					section = null;
					nextClass = null;
					prevClass = null;
				};
				
            }); // end document.ready
        </script>
        <header class="product-header">
            <div class="col-sm-5"><a class="main-logo" href="/">Coca-Cola</a></div>
            <div class="col-sm-7 header-tagline">Explore <strong><?php 
    echo $item->ItemName;
    ?>
</strong></div>
        </header>
        <div class="product-left-nav left-nav col-sm-3">
            <ul>
<?php 
    if ($info_image_count > 0) {
        ?>
                <li data-id="info" class="info-menu-item"><a href="" class="activate-lightbox"><img class="prod-icon" src="assets/img/info.png" alt="Info"></a></li>
<?php 
    }
    if (count($rotate_sides) > 1) {
        ?>
                <li data-id="rotate" class="rotate-menu-item-active" style="display:none">
                    <a data-id="rotate" href="" class="activate-menu-toggle"><img class="rotate-icon" src="assets/img/rotate-active.png" alt="Rotate"></a>
                    <div class="menu-activated-toggles">
                        <h6 id="rotate-title">Front</h6>
                        <div class="prev-view"><a href="#rotate-product-carousel" role="button" data-slide="prev"><img src="assets/img/arrow-toggle.png" alt="arrow"></a></div>
                        <div class="next-view"><a href="#rotate-product-carousel" role="button" data-slide="next"><img src="assets/img/arrow-toggle.png" alt="arrow"></a></div>
                    </div>
                </li>
                <li data-id="rotate" class="rotate-menu-item" style="display: block;">
                    <a data-id="rotate" href="" class="activate-menu-toggle"><img class="rotate-icon active-rotate" src="assets/img/rotate.png" alt="Rotate"></a>
                </li>
<?php 
    }
    if ($openimage != "") {
        ?>
                <li data-id="opendoor" class="open-menu-item">
                    <a href=""><img class="open-door" src="assets/img/opendoor.png" alt="open-door"></a>
                </li>
<?php 
    }
    if ($video_count > 0) {
        ?>
                <li data-id="video" class="video-menu-item"><a href="" class="activate-lightbox"><img class="prod-icon" src="assets/img/video.png" alt="Video"></a></li>
<?php 
    }
    if ($gallery_image_count > 0) {
        ?>
                <li data-id="gallery" class="gallery-menu-item"><a href="" class="activate-lightbox"><img class="prod-icon" src="assets/img/gallery.png" alt="Gallery"></a></li>
<?php 
    }
    if ($show_count > 0) {
        ?>
                <li data-id="show" class="show-menu-item"><a href="" class="activate-lightbox"><img class="prod-icon" src="assets/img/show.png" alt="Show"></a></li>
<?php 
    }
    ?>
            </ul>
        </div>
        <div class="product-content col-sm-9">
            <div class="item open-not-active">
                <img src="<?php 
    echo $openimage;
    ?>
" alt="Product Front">
                <div class="carousel-caption"></div>
            </div>
            <div id="rotate-product-carousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators rotate-carousel-indicators">
                    <li data-target="#rotate-product-carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#rotate-product-carousel" data-slide-to="1"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
<?php 
    if ($frontimage != '') {
        ?>
                    <div class="item active">
                        <img src="<?php 
        echo $frontimage;
        ?>
" alt="Product Front">
                        <div class="carousel-caption"></div>
<?php 
        $button_width = 64;
        $full_div_width = 615;
        $bubble_LR_offset = 16;
        $bubble_top_offset = 8;
        $oItemImageHighlight = $objItemImageHighlight->getAllItemImageHighlightByItemImageId($frontimage_id);
        foreach ($oItemImageHighlight as $highlight) {
            echo '                        <div class="highlight" style="top:' . $highlight->HotspotTop . 'px; ';
            echo 'left:' . $highlight->HotspotLeft . 'px;"><img src="assets/img/plus_white.png"></div>' . "\n";
            $htext_position = 'left:' . ($highlight->HotspotLeft + ($button_width + $bubble_LR_offset)) . 'px;';
            $htext_class = "highlight-text-right";
            if ($highlight->HotspotLeft > $full_div_width / 2) {
                $htext_position = 'right:' . ($full_div_width - $highlight->HotspotLeft + $bubble_LR_offset) . 'px;';
                $htext_class = "highlight-text-left";
            }
            echo '						  <div class="highlight-text ' . $htext_class . '" style="top:' . ($highlight->HotspotTop - $bubble_top_offset) . 'px; ';
            echo $htext_position . '"><span class="red">Highlight</span><br />' . $highlight->ItemImageHighlightInfo . '</div>' . "\n";
            // note: 64 is width of highlight button
        }
        ?>
                    </div>
<?php 
    }
    if ($rightimage != '') {
        ?>
                    <div class="item">
                        <img src="<?php 
        echo $rightimage;
        ?>
" alt="Product Right">
                        <div class="carousel-caption"></div>
                    </div>
<?php 
    }
    if ($backimage != '') {
        ?>
                    <div class="item">
                        <img src="<?php 
        echo $backimage;
        ?>
" alt="Product Back">
                        <div class="carousel-caption"></div>
                    </div>
<?php 
    }
    if ($leftimage != '') {
        ?>
                    <div class="item">
                        <img src="<?php 
        echo $leftimage;
        ?>
" alt="Product Left">
                        <div class="carousel-caption"></div>
                    </div>
<?php 
    }
    ?>
                </div>
            </div>
        </div>
<?php 
}