/*
SAMPLE DYNAMIC CODE FOR FRONT

<?php 
//this is a simple example on how you can pull your data from the database to generate the product slideshow
$link = mysqli_connect('localhost','root','');
mysqli_select_db($link,'mydatabase');
?>
<div id="banners">
<?php
$slides = 0;//slide counter
//get all rows
$query = mysqli_query($link,'SELECT * FROM product_slideshow');
while ( $row = mysqli_fetch_assoc($query) )
{
        $slides++;
?>
<div id="banner1">
        <img src="banner<?php echo $slides?>.jpg">
        <span><?php echo description;?></span>
</div>  
<?php
}
//generate links and numbering
for ($i =0; $i < $slides;$i++)
{
?>
        <li><a href="/products/myproduct-<?php echo $i?>.html"><?php echo $i?></a></li>
<?php
}
?>
</div>
<script>bannertime = 2000;banner_init();</script>

CSS FOR SCRIPT 

body
{
       
        margin:0px;
        padding:0px;
        font-size:10px;
        font-family:Tahoma,Verdana,Arial;
}
#banners
{
        width:500px;
        height:275px;
        border:2px solid #cccccc;
}

#banners div
{
        width:500px;
        height:250px;
        display:none;
        margin:0px;

}

#banners #banner1
{
        display:block;
}

#banners div span
{
        width:350px;
        position:relative;
        display:block;
        top:-150px;
        line-height:1.5em;
        left:10px;
        background:#fff;
        font-size:1.2em;
        padding:5px;
        opacity:0.7;//standard
        filter:alpha(opacity=50);//internet explorer
        -moz-opacity:.50;//older firefox versions
        
}

#banners ul
{
        width:auto;
        height:25px;
        background:#0063DC;
        margin:0px;
}

#banners ul li
{
        display:inline;
        width:10px;
}

#banners ul li a
{
        text-decoration:none;
        padding:5px;
        line-height:2.5em;
        margin:5px;
        color:#fff;
        height:25px;
        font-weight:bold;
}

#banners ul li a:hover
{
        background:#fff;
        color:#0063DC;  
}


*/
var current_banner = 1;
var total_banners = 0;
var wait = 0;

function banner_init()
{

        //stop banner change if mouse over one banner
        elements = document.getElementById('bannerConatiner').getElementsByTagName('div');
        total_banners = elements.length;
        for (var i = 0; i < elements.length; i++) 
        { 
                elements[i].onmouseover = function () 
                {

                        clearTimeout(wait);
                }
                elements[i].onmouseout = function () 
                {

                        clearTimeout(wait);

                        wait = setTimeout('nextBanner()',bannertime);

                }       
        }
        //set navigation
        elements = document.getElementById('slideShowNavContainer').getElementsByTagName('ul')[0].getElementsByTagName('li');
        total_banners = elements.length;
		
        for (var i = 0; i < total_banners; i++) 
        { 
                elements[i].title = i + 1;
				
                elements[i].onclick = function () 
                {
					
						//alert('setNav('+this.title+', '+total_banners+');');
						
						setNav(this.title, total_banners);
						setActiveLi(this.title, total_banners);
                        banner(this.title);
                        clearTimeout(wait);
                }
                elements[i].onmouseout = function () 
                {

                        clearTimeout(wait);

                        wait = setTimeout('nextBanner()',bannertime);

                }       
        }
		
        wait = setTimeout('nextBanner()',bannertime);
} 

function banner(nr,total)
{
        clearTimeout(wait);
        elements = document.getElementById('bannerConatiner').getElementsByTagName('div');
        //hide all divs
        for (var i = 0; i < elements.length; i++) 
        { 
		//alert($("#bannerContainer> div:eq("+i+"").style);
               
				if (nr == (i + 1))
                {
						
						
                        //show selected banner  
					   $("#banner"+(i+1)).fadeIn('slow');
                     //  $("#bannerContainer> div:eq("+i+"").show("slow");
																// elements[i].style.display = "block";
                } else
                {       //hide everything else
                        //elements[i].style.display = "none";     
						$("#banner"+(i+1)).hide();
                }
        }
        wait = setTimeout('nextBanner()',bannertime);
}

function setNav(current, total)
{
	elements = document.getElementById('slideShowNavContainer').getElementsByTagName('ul')[0].getElementsByTagName('a');
		
	for(var i=0; i<total; i++)
	{
		
		if(i!=current-1) {
			if(elements[i].className == 'currentSlide') {
				elements[i].className = ''
			}
		}else{
				elements[i].className = 'currentSlide'	
		}
	}
	
	
	
	
	
}
function setActiveLi(current, total)
{			
elements = document.getElementById('slideShowNavContainer').getElementsByTagName('ul')[0].getElementsByTagName('li');
		
	for(var i=0; i<total; i++)
	{
		
		if(i!=current-1) {
			if(elements[i].className == 'active') {
				elements[i].className = ''
			}
		}else{
				elements[i].className = 'active'	
		}
	}
}
function nextBanner() 
{

        if(current_banner < total_banners) 
        {
                current_banner ++; 
        }

        else
        {       current_banner = 1;
        }

        banner(current_banner, total_banners);
		
		setNav(current_banner, total_banners);
		setActiveLi(current_banner, total_banners);
}