<div class="domWindow">
	
	<div class="shadowTop"></div>
	<div class="shadowBg">
		<div class="domContent photoGallery">
			<a href="" class="btnClose" title="Close Button"></a>
			<div id="mainImg">
				<a href="" class="prev" title="Prev">Prev Button</a>
				<a href="" class="next" title="Next">Next Button</a>
				<ul>
					<li>
			<span class="caption"></span>                        
			<img src="/MarketFacingTech/hmc/s3/domHeroPhotoGalleryS3-1.jpg" width="800" height="540" alt="" />
                    	</li>
				</ul>
			</div>
			
			<div class="module">
				<a href="" class="btnCarousel prev" title="Prev Button">Prev Button</a>
				<a href="" class="btnCarousel next" title="Next Button">Next Button</a>
				<div id="carouselGalleryDOM">   
					<ul class="carousel">
						<li>
			   <a href="" class="selected" title="Featured Product"><img src="/MarketFacingTech/hmc/s3/thumbPhotoGalleryS3-1.jpg" large="/MarketFacingTech/hmc/s3/domHeroPhotoGalleryS3-1.jpg" width="127" height="127" alt="Featured" /></a> <span class="caption displayNone"></span>
					
                        </li>
						<li>			
                            <a href="" class="Featured Product" title="Featured Product"><img src="/MarketFacingTech/hmc/s3/thumbPhotoGalleryS3-2.jpg" large="/MarketFacingTech/hmc/s3/domHeroPhotoGalleryS3-2.jpg" width="127" height="127" alt="Featured" /></a> <span class="caption displayNone"></span>
			</li>
                           			<li>			
                            <a href="" class="Featured Product" title="Featured Product"><img src="/MarketFacingTech/hmc/s3/thumbPhotoGalleryS3-3.jpg" large="/MarketFacingTech/hmc/s3/domHeroPhotoGalleryS3-3.jpg" width="127" height="127" alt="Featured" /></a> <span class="caption displayNone"></span>
                        </li>
						<li>
                            <a href="" class="Featured Product" title="Featured Product"><img src="/MarketFacingTech/hmc/s3/thumbPhotoGalleryS3-4.jpg" large="/MarketFacingTech/hmc/s3/domHeroPhotoGalleryS3-4.jpg" width="127" height="127" alt="Featured" /></a> <span class="caption displayNone"></span>
                        </li>
						<li>
                            <a href="" class="Featured Product" title="Featured Product"><img src="/MarketFacingTech/hmc/s3/thumbPhotoGalleryS3-5.jpg" large="/MarketFacingTech/hmc/s3/domHeroPhotoGalleryS3-5.jpg" width="127" height="127" alt="Featured" /></a> <span class="caption displayNone"></span>
			</li>
						<li>
                            <a href="" class="Featured Product" title="Featured Product"><img src="/MarketFacingTech/hmc/s3/thumbPhotoGalleryS3-6.jpg" large="/MarketFacingTech/hmc/s3/domHeroPhotoGalleryS3-6.jpg" width="127" height="127" alt="Featured" /></a> <span class="caption displayNone"></span>
			</li>
						<li>
                            <a href="" class="Featured Product" title="Featured Product"><img src="/MarketFacingTech/hmc/s3/thumbPhotoGalleryS3-7.jpg" large="/MarketFacingTech/hmc/s3/domHeroPhotoGalleryS3-7.jpg" width="127" height="127" alt="Featured" /></a> <span class="caption displayNone"></span>
			</li>
					</ul>
				</div>
			</div>
			
		</div>
	</div>
	<div class="shadowBtm"></div>
    
</div>

<!-- JavaScripts -->
<script type="text/javascript">	
//$(document).ready(function(){
 
    var gallery = function($container, opts){
        var self = this;
        self.opts = opts || {};
        
        self.debug = function(msg){
            if(!self.opts.debug) return false;
            try {
                console.log(msg);
            } catch(e) {
                alert(msg);
            }
        };
        
        self.container = $container;
        self.module = $container.closest('.domContent');
        self.mainImg = $('#mainImg').find('img').eq(0);
        self.direction = false;
        self.btnPrev = $('div.domContent').find('.prev');
        self.btnNext = $('div.domContent').find('.next');
        self.vis = [];
        
        self.afterEnd = function(lis){
            self.vis = $(lis);
            var cur = self.vis.filter(':has(a.selected)');
            if(!cur.length){
                cur = self.vis.filter(':has(img[large="' + self.getCurrentSrc() + '"])');
            }
            self.debug(cur);
            next = cur.length ? (self.direction ? cur.next('li') : cur.prev('li')) : (self.direction ? self.vis.eq(0) : self.vis.eq(self.vis.length-1));
            next.find('a').triggerHandler('click');
            self.debug(next);
        };
        
        self.beforeStart = function(lis){};
        
        self.changeImage = function(){
            var $li = $(this).closest('li');
            $li.siblings('li').andSelf().find('a').removeClass('selected');
            $(this).addClass('selected');
            self.mainImg.attr('src', $(this).find('img').attr('large'));
            self.mainImg.closest('li').find('span.caption').html( $(this).siblings('span.caption').eq(0).html() );
            return false;
        };
        self.container.find('li a').click(self.changeImage);
        self.btnPrev.click(function(){self.direction=false;});
        self.btnNext.click(function(){self.direction=true;});
        self.carousel = initModuleCarousel(self.container, {
            btnPrev: self.btnPrev,
            btnNext: self.btnNext,
            circular: true,
            afterEnd: self.afterEnd
        });
        
        self.getSelected = function(){
            return self.container.find('li:has(a.selected)');
        };
        
        self.getCurrentSrc = function(){
            var src = self.mainImg.attr('src');
            var url = window.location.protocol + '//' + window.location.host;
            if(src.indexOf(url) == 0){
                src = src.substr(url.length);
            }
            return src;
        };
        
    };
    
    var ga = new gallery($('#carouselGalleryDOM'), {
        /* 
         * set this to the query parameter used to set active thumbnail.
         */
        start: 0 
    });
   
	// Main Image Show/Hide Buttons
	$('#mainImg').hover(function() {
		$(this).children('a').addClass('show');
        $(this).find('.caption').not('.displayNone').addClass('show');
	}, function() {
		$(this).children('a').removeClass('show');
        $(this).find('.caption').not('.displayNone').removeClass('show');
	});
	
	// Main Image Button Animation
	$('#mainImg a.next').hover(function() {
		$(this).animate({ backgroundPosition: '5px -27px' }, 200 );
	}, function() {
		$(this).animate({ backgroundPosition: '0 -27px' }, 200 );
	});
	$('#mainImg a.prev').hover(function() {
		$(this).animate({ backgroundPosition: '-5px 0' }, 200 );
	}, function() {
		$(this).animate({ backgroundPosition: '0 0' }, 200 );
	});
 
//});
</script>

