// jSlideshow v0.9
// Created by Joe Root

var imgJS = new Array();
var imgCaption = new Array();

var imgNo = 0;
var currentImg = 0;

var widthImg = 358; //change this value to edit the width of the slideshow
var heightImg = 358; //change thi value to edit the height of the slideshow

if (widthImg < 300) 
{
  widthImg = 300;
}

var paddingSize = 0; //change this value if you want the image to be padded within the slideshow

var widthJS = widthImg + paddingSize;
var heightJS = heightImg + paddingSize;

var playing = false;
var timer = setTimeout("", 0)
var timeJS = 4;
var counterJS = 0;

$(function() {
    
    createSlideshow();
    createButtons();
    buttonClick();
    // pictureHover();
    placeImage(0);
    
    /*
    $("#detailsOverlay p#status").empty();
    if (playing == true) 
    {
        $("#detailsOverlay p#status").append("playing");
    } 
    else 
    {
        $("#detailsOverlay p#status").append("paused");
    }
    if ($.browser.msie)
    {
        $("#menuOverlay").css({filter:"alpha(opacity=70)"});
    }
    */
    startTimer();
});

function createSlideshow() 
{
    var tempWidth = widthJS + "px";
    var tempHeight = heightJS + "px";

    $("#jslideshow").before("<div id='containerJS'></div>");
    
    $("#containerJS").append("<div id='pictureJS'></div>");
    $("#pictureJS").css({background:"transparent", width:"auto", height:tempHeight});
    $("#pictureJS").append("<div style='padding:0px; margin:0px;'></div>");
    
    $("#jslideshow img").each(function(i) {
        imgJS[i]=new Image();
        imgJS[i].src = this.src;
        imgCaption[i] = this.name;
        imgNo = i;
    });
    
    // pictureButtons();
    
    $("#containerJS").prepend("<div id='menuJS' style='text-align:center'></div>");
    // $("#menuJS").css({background:"transparent", padding:"5px"});
    $("#jslideshow").remove();
}

function createButtons() 
{
    for (i=0;i<=imgNo;i++) 
    {
        $("#menuJS").append("<a href=#JS" + (i+1) + ">" + (i+1) + "</a>");
    }
};

function buttonClick() 
{
    $("#menuJS a").click(function() {
        var imglink = this.href;
        imglink = imglink.substring(imglink.indexOf("#")+3);
        imglink = imglink-1;
        placeImage(imglink);
        playing = false;
        $("#menuJS a").attr({className:""});
        $(this).attr({className:"active"});
        counterJS = 0;
        return false;
    });
};


function pictureHover() 
{
    
    $("#pictureJS").click(function() {
            $("#detailsOverlay p#playing").empty();
            $("#detailsOverlay p#playing").append(
                imgCaption[currentImg] + " (" + (currentImg+1) + "/" + (imgNo+1) + ")"
                );
            $("#menuOverlay").fadeIn(400);    
    });
    
    $("#menuOverlay").click(function() {
        $("#menuOverlay").fadeOut(400);        
    });
    
    $("#menuOverlay a").click(function() {
        $("#detailsOverlay p#playing").empty();
        $("#detailsOverlay p#playing").append(
            imgCaption[currentImg] + " (" + (currentImg+1) + "/" + (imgNo+1) + ")"
            );
        return false;        
    });
    
}

function pictureButtons() 
{
    
    var    tempWidth = widthJS + "px";
    var paddingTop = heightJS/2 - 28;
    var tempHeight = heightJS - paddingTop;
    tempHeight = tempHeight + "px";
    paddingTop = paddingTop + "px";
    
    $("#containerJS").append(
        "<div id='menuOverlay' style='width:" + 
        tempWidth + "; height:" + tempHeight + 
        "; padding-top:" + paddingTop + ";'></div>"
        );
    
    $("#menuOverlay").append("<a id='prevJS' href='#'><img src='images/prev.gif' /></a>");
    $("#menuOverlay").append("<a id='playJS' href='#'><img src='images/play.gif' /></a>");
    $("#menuOverlay").append("<a id='pauseJS' href='#'><img src='images/pause.gif' /></a>");
    $("#menuOverlay").append("<a id='nextJS' href='#'><img src='images/next.gif' /></a>");
    
    $("#menuOverlay a").css({border:"none", margin:"0px 5px", outline:"none"});
    $("#menuOverlay a img").css({border:"none"});
    
    $("#menuOverlay").prepend(
        "<div id='detailsOverlay' style='width:" + tempWidth + 
        ";'><p id='playing'></p><p id='status'></p></div>"
        );
    
    $("#prevJS").click(function() {
    
        if (currentImg != 0) {
                currentImg = currentImg - 1;
                placeImage(currentImg);    
        } else {
            currentImg = imgNo;
            placeImage(currentImg);    
        }
        
        counterJS = 0;
        
        return false;
        
    });
    
    $("#nextJS").click(function() {
    
        if (currentImg != imgNo) {
                currentImg = currentImg + 1;
                placeImage(currentImg);    
        } else {
            currentImg = 0;
            placeImage(currentImg);    
        }
        
        counterJS = 0;
        
        return false;
        
    });
    
    $("#playJS").click(function() {
    
        playing = true;
        startTimer();
        
        $("#detailsOverlay p#status").empty();
        $("#detailsOverlay p#status").append("playing");
        
        return false;
        
    });
    
    $("#pauseJS").click(function() {
    
        playing = false;
        startTimer();
        
        $("#detailsOverlay p#status").empty();
        $("#detailsOverlay p#status").append("paused");
        
        return false;
        
    });

}

function placeImage(linkImg) 
{
        
    $("#pictureJS div").empty();

    // Resize Image Code If To Big
    
    var resized = false;
    var ratio = imgJS[linkImg].width/imgJS[linkImg].height;
    
    if (imgJS[linkImg].width > widthImg) 
    {
            imgJS[linkImg].width = widthImg;
            imgJS[linkImg].height = widthImg/ratio;
            resized = true;
    }
    
    if (imgJS[linkImg].height > heightImg) 
    {
            imgJS[linkImg].height = heightImg;
            imgJS[linkImg].width = heightImg*ratio;
            resized = true;
    }
    
    var links = $("#menuJS a");
    $("#menuJS a").attr({className:""});
    $(links[linkImg]).attr({className:"active"});
    
    // Resize Image Code If To Big
    
    // Safari does not allow elm.append() to use an object so 
    // we must create a string of the HTML for Safari.
    
    if ($.browser.safari)
    {
        var _img = '<img src="' + imgJS[linkImg].src + '" ' +
                   'width="' + imgJS[linkImg].width + '" ' +
                   'height="' + imgJS[linkImg].height + '" />';
        $("#pictureJS div").append(_img);
    }
    else
    {
        $("#pictureJS div").append(imgJS[linkImg]);
    }
    currentImg = linkImg;
}

function startTimer() 
{
    if (playing == true) 
    {
        timer = setTimeout("resetTimer()",1000);
    }
}

function resetTimer() 
{
    counterJS=counterJS + 1;
    
    if (counterJS >= timeJS) 
    { 
		currentImg = currentImg + 1;
		
		if (currentImg > imgNo) 
		{
			currentImg=0;
		} 
		
		$("#detailsOverlay p#playing").empty();
		$("#detailsOverlay p#playing").append(imgCaption[currentImg] + 
			" (" + (currentImg+1) + "/" + (imgNo+1) + ")");
		
		placeImage(currentImg);
		counterJS = 0;
    }
    startTimer();
}