/*
Image Gallery
Author: Yang Wang

each thumbnail points to a image
.viewport is the item used to display real pictures
setup the images array in this js file and thumbnail buttons on the html page
var pause is the auto rotation pause time
*/
var pause = 5000;
var images = new Array();
var links = new Array();

var timeoutVal;
var selected_section = 0;
var selected_image = 0;
var current_section = 0;
images[0] = new Array();
images[1] = new Array();
images[2] = new Array();
images[3] = new Array();

images[0][0] = "images/banners/OneSolution_1.jpg";
images[1][0] = "images/banners/DMB_1.jpg";
images[1][1] = "images/banners/DMB_2.jpg";
images[1][2] = "images/banners/DMB_3.jpg";
images[2][0] = "images/banners/Restaurants_1.jpg";
images[2][1] = "images/banners/Restaurants_2.jpg";
images[3][0] = "images/banners/UNOApp.jpg";

links[0] = new Array();
links[1] = new Array();
links[2] = new Array();
links[3] = new Array();

links[0][0] = "cdpai.php";
links[1][0] = "menuboxes.php";
links[1][1] = "menuboxes.php";
links[1][2] = "menuboxes.php";
links[2][0] = "menuboxes.php";
links[2][1] = "menuboxes.php";
links[3][0] = "#";

$(document).ready(function() {
    //hightlight the selected thumbnail and show image
    $(".viewport img").live('click', function() {
        var index = getSelectedSection();
        //alert(index);
        //        //alert(selected_section + " " + selected_image);
        window.location.href=links[index][selected_image];
    });
    $(".gallery_button").live('mouseover', function() {
        if(event.type=='mouseover') {
            
    }
    });
    $(".gallery_button").live('click', function() {
        clearTimeout(timeoutVal);
        $(".gallery_button").each(function() {
            //$(this).css("background", "url(images/gallery_image_default.png) no-repeat");
            $(this).removeClass('gallery_round_button_selected');
        //alert($(this).css("background"));
        });
        $(this).addClass('gallery_round_button_selected');
        //$(this).css("background", "url(images/gallery_image_visible.png) no-repeat");
        var index = $(".gallery_button").index($(this));
        section = $(".thumbnail_selected").eq(0);
        $(".viewport img").eq(0).attr("src", images[selected_section][index]);
        selected_image = index;
    });
    
    $(".thumbnail").hover(
        function() {
            if(!$(this).hasClass("thumbnail_selected")) {
                $(this).addClass("thumbnail_hover");
            }
            $(this).click(function () {
            {
                clearTimeout(timeoutVal);
                rotateGallery(pause);
                var index = $(".thumbnail").index($(this));
                sectionClick($(this), index, 0);
                current_section = index;
            }
            });
            
        },
        function() {
            $(this).removeClass("thumbnail_hover");
        });

    rebuildImageButtons();
    rotateGallery(pause);
});
//auto rotate
function rotateGallery(pause) {
    /*
    var index = $(".thumbnail").index($(".thumbnail.thumbnail_selected"));
    if(index+1>=images.length || index < 0) {
        index=0;
    } else {
        index++;
    }
    */
    $(".thumbnail_selected").each(function() {
        $(this).removeClass("thumbnail_selected");
    });
    $(".thumbnail").eq(selected_section).addClass("thumbnail_selected");
    $(".viewport img").eq(0).attr("src", images[selected_section][selected_image]);
    //alert($(".viewport img").eq(0).attr("src") + " " + selected_section + " " + selected_image);
    rebuildImageButtons();
    //alert("images[selected_section].length: " + images[selected_section].length + " images.length: " + images.length+ " " + selected_section + " " + selected_image);
    //$(".gallery_button").eq(selected_image).trigger("click");
    $(".gallery_button").eq(selected_image).trigger("click");
    calculateNextImageIndex();
    current_section = selected_section;
    
    timeoutVal=setTimeout("rotateGallery(pause)", pause);
    
    
}

function sectionClick(obj, selected_section_index, selected_image_index) {

    
    $(".thumbnail_selected").each(function() {
        $(this).removeClass("thumbnail_selected");
    });
    $(".thumbnail_hover").each(function() {
        $(this).removeClass("thumbnail_hover");
    });
    obj.addClass("thumbnail_selected");
    //alert("clicked on: " + selected_section_index + " current_section: " + current_section + "selected section: " +selected_section);
    $(".viewport img").eq(0).attr("src", images[selected_section_index][selected_image_index]);
    selected_section = selected_section_index;
    selected_image = selected_image_index;
    rebuildImageButtons();

}

//calculate the next picture the gallery should rotate through
//these are stored in the global variables selected_image and selected_section
function calculateNextImageIndex() {
    //alert("images[selected_section].length: " + images[selected_section].length + " images.length: " + images.length+ " " + selected_section + " " + selected_image);
    selected_section = getSelectedSection();
    selected_image = getSelectedImage();
    if(selected_image == images[selected_section].length - 1) {
        selected_image = 0;
        if(selected_section == images.length -1) {
            selected_section = 0;
        } else {
            selected_section++;
        }
    } else {
        selected_image++;
    }
//alert();
}

function rebuildImageButtons() {
    var i = 0;
    var buttons_str = "";
    //alert(selected_section);
    for(i=0;i<images[selected_section].length;i++) {
        buttons_str += "<div class='gallery_button gallery_round_button_default'></div>";
    }
    $(".gallery_buttons .buttons_container").eq(0).html(buttons_str);
    $(".gallery_button").eq(0).addClass('gallery_round_button_selected');
//.css("background", "url(images/gallery_image_visible.png) no-repeat");
}

function getSelectedSection() {
    return $(".thumbnail").index($(".thumbnail_selected"));
}

function getSelectedImage() {
    return $(".gallery_button").index($(".gallery_round_button_selected"));
}