/**
 * @author Elan Noy
 */
var portfolios = new Array();
portfolios[0] = 'Weddings';
portfolios[1] = 'BarMitzvah';
portfolios[2] = 'famPortraits';
portfolios[3] = 'corpPortraits';
portfolios[4] = 'commercial';
portfolios[5] = 'petsPortraits';
portfolios[6] = 'Architecture';
portfolios[7] = 'TBD';
portfolios[8] = 'Albums';

var maxImages = new Array();//max images for each portfolio
maxImages[0] = 60; //Wedding
maxImages[1] = 60; //BarMitzvah
maxImages[2] = 30; //famPortraits
maxImages[3] = 30; //corpPortraits
maxImages[4] = 30; //commercial
maxImages[5] = 30; //petsPortraits
maxImages[6] = 0; //Architecture
maxImages[7] = 0; //TBD 
maxImages[8] = 0; //Albums   
//Set of helper functions to build the Gallery---------------------------------------------
//Create a row object            
function row(){
    ro = document.createElement('tr');
    return ro;
}

//Create a cell object
function cell(){
    ce = document.createElement('td');
    ce.setAttribute('class', 'thumbClass');
    return ce;
}

//select an image based on index
function img(i){
    var myImage = document.createElement('img');
    myImage.setAttribute("src", randArray[i]);
    return myImage;
}

//Create Gallery Function
var firstImage = 0;//Index to first image that will be dispayed for current gallery
var portfolio;
var galleryWidth = 3;//# of columns in Galley
var galleryLength = 10;// # of rows in Gallery was 5
var imageCount = firstImage + 1; //index of image on current display
function createGallery(portfolioIndex){
    var noOfThmbs = galleryWidth * galleryLength;
    portfolio = portfolioIndex;
    imageDirectory = 'images/' + portfolios[portfolio] + '/Images/';
    thumbDirectory = 'images/' + portfolios[portfolio] + '/ThumbNails/';
    var largeImage = document.getElementById('largeImage');
    largeImage.setAttribute('src', imageDirectory + '0001.jpg');
    var arrowL = document.getElementById('arrowL');
    var arrowR = document.getElementById('arrowR');
    //remove arrows if there is no need for more images
    if (maxImages[portfolio] <= noOfThmbs) {
        arrowL.style.visibility = 'hidden';
        arrowR.style.visibility = 'hidden';
    }
    else {
        if (firstImage + noOfThmbs >= maxImages[portfolio]) {
            arrowR.style.visibility = 'hidden';//No more images
        }
        else {
            arrowR.style.visibility = 'visible';//make arrow visible when going back
        }
        if (firstImage < noOfThmbs) {
            arrowL.style.visibility = 'hidden'; //No need to go back
        }
        else {
            arrowL.style.visibility = 'visible'; //make arrow visible after going fist forward
        }
    }
    var imageCount = firstImage + 1;
    var galleyTable = document.createElement("table");
    galleyTable.setAttribute("id", "galleryTable");
    galleyTable.setAttribute("class", "galleryTable");
    var el = document.getElementById('begin')
    el.appendChild(galleyTable);
    var tbody = document.createElement("tbody");
    galleyTable.appendChild(tbody);
    //Populate the Galley----------------------------------------------
    for (var i = 0; i < galleryLength; i++) {
        row[i] = new row();
        tbody.appendChild(row[i]);
        for (var j = 0; j < galleryWidth; j++) {
            cell[j] = new cell();
            var cImage = document.createElement('img');
            //Build the image name in directory like 00xx.jpg or 000x.jpg
            if (imageCount <= maxImages[portfolio]) {
                if (imageCount < 10) 
                    var imageNo = '000' + imageCount; //images start with 0001
                else 
                    var imageNo = '00' + imageCount;
                var imageFile = thumbDirectory + imageNo + '.gif';
            }
            else {
                var imageFile = 'images/noImage.jpg';
            }
            cImage.setAttribute("src", imageFile);
            if (maxImages[portfolio] == 0) {
                cImage.setAttribute("src", 'images/noImage.jpg');
            }
            row[i].appendChild(cell[j]);
            cell[j].setAttribute('id', imageCount);
            //  cell[j].style.background = '#330000'; //set background for marking
            var aElement = document.createElement('a');
            aElement.appendChild(cImage)
            aElement.setAttribute('herf', '#');
            aElement.setAttribute('class', 'thumbClass');
            ce.appendChild(aElement);
            intId = i;
            cell[j].onmouseover = onHover;//To trigger picture change
            cell[j].onmouseout = onOut;
            imageCount++;
        }
    }
    
}

//----------------------------------------------------------------------
//Function that is fired when hovering over a thumbnail. 
//Will display that image and change the appearance of the thumbnail.
function onHover(){
    var img = document.getElementById('largeImage');
    if (this.id < 10) 
        var imageNo = '000' + this.id;
    else 
        var imageNo = '00' + this.id;
    //  var imageFile = imageDirectory + imageNo + '.jpg';
    var imageFile = imageDirectory + imageNo + '.jpg';
    img.setAttribute('src', imageFile);
    img.setAttribute('border', 'solid');
    var thumb = document.getElementById(this.id);
    var item = thumb.firstChild;
    thumb.style.opacity = "0.5";
    thumb.style.filter = "alpha(opacity=50)";
    thumb.style.border = 'none';
}

//Function to revert the change in the thumbnail appearance
function onOut(){
    var thumb = document.getElementById(this.id);
    thumb.style.opacity = "1.0";
    thumb.style.filter = "alpha(opacity=100)";
}

//Function fired by clicking the green (more) arrow
function more(){
    firstImage = firstImage + galleryWidth * galleryLength; //Adds the number of current gallet size to fisrtImage
    var begin = document.getElementById('begin');
    var tbl = document.getElementById('galleryTable');
    begin.removeChild(tbl);
    createGallery(portfolio);
}

//Function fired by clicking the red (back) arrow
function back(){
    if (firstImage != 0) {
    
        firstImage = firstImage - galleryWidth * galleryLength;
        var begin = document.getElementById('begin');
        var tbl = document.getElementById('galleryTable');
        begin.removeChild(tbl);
        createGallery(portfolio);
    }
}

//Set of Drop Down Menu functions-----------------------------

var timeout = 50;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id){
    // cancel close timer
    mcancelclosetime();
    
    // close old layer
    if (ddmenuitem) 
        ddmenuitem.style.visibility = 'hidden';
    
    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
    
}

// close showed layer
function mclose(){
    if (ddmenuitem) 
        ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime(){
    closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime(){
    if (closetimer) {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

// close layer when click-out
document.onclick = mclose;


//Function to prevent right click and copy. Works only on MSE
var message = 'Copyright Protected!';
function clickie(){
    if (document.all) {
        //alert("1");
        return false;
    }
}

function clickns(e){
    if (document.layers || (document.getElementById && !document.all)) {
        if (e.which == 2 || e.which == 3) {
            alert(message);
            createGallery(1);
            return false;
        }
    }
}

if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown = clickns;
}
else {
    document.onmouseup = clickns;
    document.oncontextmenu = clickie;
}