var index = 0;
var section = new Array();
var sectionIndex = 0;

var about = new Array();

var art = new Array();
art.push( {
    filename : 'higher.jpg',
    caption : 'Aspirations',
    descr : '<span>Photoshop CS 2<br />December 2005</span><i>You cannot teach a man anything; you can only help him find it within himself.</i> <b>–Galileo</b>'
}
);
art.push( {
    filename : 'framed.jpg', caption : 'Framed', descr : '<span>Photoshop CS 2<br />December 2005</span><i>Should old acquaintance be forgot,<br />And never brought to mind.<br />Should old acquaintance be forgot,<br />And Auld Lang Syne.</i> <b>–Robert Burns</b>I have tried to capture the expression of slight joy, the nostalgic moments that we enjoy glancing at the pictures within old simple frames.'
}
);
art.push( {
    filename : 'visage.jpg', caption : 'Visage',
    descr : '<span>Pencil, Photoshop CS 2<br />April 2006</span>This was the cover art I drew for the yearbook of MIT 2005, "Visage." Most of the work was done with pencil on paper, the coloring and the textures were laid down with Photoshop. The intricacies in the work is a representative of the efforts that have gone into the making of the yearbook. Also, if observed closely, you can see the faces of the entire editorial team of 24 members.'
}
);

art.push( {
    filename : 'dance.jpg', caption : 'Dance', descr : '<span>Photoshop CS 2<br />January 2006</span>The import here was to show the emergence of the soul when one dances and expresses freely, without care, without the fear of being judged.'
}
);

art.push( {
    filename : 'moonlady.jpg', caption : 'Touch Thy Soul',
    descr : '<span>Photoshop CS 2<br />January 2006</span><i>Yes, to dance beneath the diamond sky with one hand waving free,<br />Silhouetted by the sea, circled by the circus sands,<br />With all memory and fate driven deep beneath the waves,<br />Let me forget about today until tomorrow.</i> <b>–Bob Dylan</b>This is actually a remake of the previous painting titled \'Dance\'. This moon represents the soul, which she touches with the emotive steps of soft dance.'
}
);

art.push( {
    filename : 'education.jpg', caption : 'Litterateur', descr : '<span>Photoshop CS2<br />February 2006</span><i>And thus, she was blessed by the divine,When unto paper and ink her heart metamorphosed...Her creativity raged like thunder in the azure,<br />Then truest expression had her fury exposed.</i>This picture represents the power of education, the might of knowledge and its beauty.'
}
);
art.push( {
    filename : 'avantika.jpg', caption : 'Avantika', descr : '<span>Pencil, Photoshop 7<br />January 2005</span><i>The navel of the earth the Gods decreed,<br />Where Krishna in Sudama discovered a friend,<br />The gurukulam where myriad ideas one imbibed,<br />Where the universal language did differences transcend.</i>The artwork signifies the hostel-life of the students of MIT, where they meet new people and make new friends. Where they share joys and sorrows alike and learn to live independent of their parents.'
}
);
art.push( {
    filename : 'might.jpg', caption : 'Might', descr : '<span>Watercolor, Photoshop 7<br />June 2004</span>Will is by far the greatest power. One who owns it is a fearless conqueror, and can conquest the skies and the heavens. This was mainly done with watercolors, a few color adjustment and contrast features were applied using Photoshop.'
}
);
art.push( {
    filename : 'vision.jpg', caption : 'Vision', descr : '<span>Pencil, Photoshop 7<br />February 2005</span><i>Where perfection assuages the flaws,<br />Come alive in your hopes for that perfect future,<br />Where the superlative obliterates the egregious,<br />In utopia your cherished dreams you nurture</i>The artwork signifies contentment and the elevated state of mind when one is confident about a successful future.'
}
)
art.push( {
    filename : 'tree.jpg', caption : 'Tree of Life', descr : '<span>Photoshop 7<br />February 2005</span>The floating tree symbolizes a land, where one never ages. A land meant for the young to stay that way, cheerful and lively forever.'
}
)
art.push( {
    filename : 'revels.jpg', caption : 'Miticulus', descr : '<span>Photoshop 7<br />January 2005</span>The mascot designed as per specifications for Revels 2005.'
}
)
art.push( {
    filename : '2500.jpg', caption : '2500 A.D.', descr : '<span>Pen &amp; Ink<br />June 2005</span>Winning art entry for an interstate sketching competition, at Sarosh Institute, Mangalore.'
}
)

var design = new Array();
design.push( {
    filename : 'synergy.jpg', caption : 'Golden Ratio - Synergy', descr : '<span>SketchUp 5, Photoshop CS2<br />November 2006</span>Cover page designed for \'Synergy\' - The 49th National Association of Students of Architecture Convention, India'
}
);
design.push( {
    filename : 'mit50.jpg', caption : 'MIT.50 Brochure', descr : '<span>InDesign CS, Illustrator CS<br />August 2006</span>Brochure designed for the 5oth year celebrations of M.I.T. Manipal.'
}
);
design.push( {
    filename : 'visagebooksmall.jpg', caption : 'Visage - MIT Yearbook 2005-2006', descr : '<span>InDesign CS, Illustrator CS, Photoshop CS2<br />May 2006<br />488 Pages</span>Designed the entire yearbook of 2005-06 of MIT. The magazine features over 100 articles written by students of the college and contained the final year students\' database. Most of the design was done with Adobe InDesign CS, although PS was used for most of the artworks and photo - manipulations'
}
);
design.push( {
    filename : 'posters.jpg', caption : 'Various Posters', descr : '<span>Illustrator CS, Photoshop CS2, Corel PhotoPaint 9<br />2003-2006</span>Designed various posters, coupons, tickets, brochures etc. for a variety of clubs, parties, events etc. at MIT campus, developing concepts and designs, photoshop production of images, graphics as per specification.'
}
);
design.push( {
    filename : 'websynergy.jpg', caption : 'Synergy - Web design', descr : '<span>XHTML, CSS2, ASP<br />January 2007</span>Designed the official website for Synergy - the 49th Naitional Convention of NASA, India. The site featured a simple three stage registration process, news and updates of the event.'
}
);
design.push( {
    filename : 'webatharva.jpg', caption : 'Atharva Online - Web design', descr : '<span>XHTML, CSS2, ASP<br />December 2006</span>Designed the website for Atharva Online a national event for MBA Students of India. The site featured interactive games and quizzes.'
}
);
design.push( {
    filename : 'webtapmi.jpg', caption : 'TAPMI Placements - Web design', descr : '<span>XHTML, CSS2, ASP<br />November 2006</span>Designed the website for the placement cell of T.A. Pai Management Institiute, Manipal. The site had profiles of all the students of te institute and provided conditional searching features over the database.'
}
);

var sketching = new Array();
sketching.push({
    filename : '22.jpg', caption : 'Sorrow', descr : '<span>Pencil<br />January 2004</span>'
}
);
sketching.push({
    filename : '23.jpg', caption : 'Unborn', descr : '<span>Pencil<br />February 2005</span>'
}
);
sketching.push({
    filename : '24.jpg', caption : 'Slow Death', descr : '<span>Pencil<br />January 2005</span>'
}
);
sketching.push({
    filename : '25.jpg', caption : 'I am God', descr : '<span>Pencil<br />January 2005</span>'
}
);
sketching.push({
    filename : '26.jpg', caption : 'Frozen', descr : '<span>Pencil<br />August 2004</span>'
}
);
sketching.push({
    filename : '27.jpg', caption : 'X Games', descr : '<span>Pencil<br />August 2004</span>Illustration for the sports section of the college magazine'
}
);
sketching.push({
    filename : '28.jpg', caption : 'Guitar Trip', descr : '<span>Pencil<br />August 2004</span>'
}
);
sketching.push({
    filename : '29.jpg', caption : 'Fearless', descr : '<span>Pencil<br />February 2005</span>'
}
);
sketching.push({
    filename : '30.jpg', caption : 'The Family', descr : '<span>Pencil<br />January 2006</span>'
}
);
sketching.push({
    filename : '31.jpg', caption : 'Amelie', descr : '<span>Pencil<br />January 2006</span>Illustration for the yearbook - Visage'
}
);
sketching.push({
    filename : '32.jpg', caption : 'Student\'s Council', descr:'<span>Ink<br />January 2005</span> Illsutration for the monthly newsletter \'Article 19\' of MIT'
}
);
sketching.push({
    filename : '33.jpg', caption : 'EdBoard05', descr : '<span>Ink<br />September 2005</span>Illsutration for the monthly newsletter \'Article 19\' of MIT'
}
);
sketching.push({
    filename : '34.jpg', caption : 'Ed', descr : '<span>Pencil, Illustrator<br />February 2005</span>Illsutrations of the mascot designed for the yearbook of 2004'
}
);
sketching.push({
    filename : '35.jpg', caption : 'In Action', descr : '<span>Pencil<br />December 2005</span>'
}
);
sketching.push({
    filename : '36.jpg', caption : 'Hand Study', descr : '<span>Pencil<br />December 2005</span>'
}
);
sketching.push({
    filename : '39.jpg', caption : 'Hand Study 2', descr : '<span>Pencil<br />December 2005</span>'
}
);
sketching.push({
    filename : '37.jpg', caption : 'Touch Thy Soul', descr : '<span>Pencil<br />January 2006</span>'
}
);
sketching.push({
    filename : '38.jpg', caption : 'Eye for an eye', descr : '<span>Pen & Ink<br />December 2006</span>'
}
);
sketching.push({
    filename : '41.jpg', caption : 'Sorrow', descr : '<span>Pencil<br />December 2006</span>'
}
);


section.push({caption:'About Me', array:about, contentFunction:aboutContent, buttonFunction:showAbout, callFunction:'showAbout'});
section.push( {
    caption : 'Art', array : art, contentFunction : artContent, buttonFunction : showContent, callFunction:'showContent'
}
);
section.push( {
    caption : 'Design', array : design, contentFunction : artContent, buttonFunction : showContent, callFunction:'showContent'
}
);

section.push({
    caption : 'Sketchbook', array : sketching, contentFunction : artContent, buttonFunction : showContent, callFunction:'showContent'
}
);

function aboutContent() {
         var str = '<div id="about"><h3>About Me</h3><p>Hi, I\'m Ganesh Rao, a graduate student at the <a href="http://www-viz.tamu.edu" target="blank">Department of Visualization</a>, Texas A&M University. I am also a freelance web &amp; graphic designer, illustrator, developer and musician.</p><h3>Contact</h3><p>518.253.6937<br /><a href="mailto:admin@ganeshnrao.com">admin@ganeshnrao.com</a></p></div>'
         document.getElementById( 'description' ).innerHTML = str;
         document.getElementById('centercontent').innerHTML = '';
         new Effect.Move( 'leftcontent', {x : 200, y : 0, mode : 'absolute'} );
         new Effect.Appear( 'description' );
}

function clearLinks() {
         document.getElementById('link'+sectionIndex).className = '';
}

function setLink() {
         document.getElementById('link'+sectionIndex).className = 'clicked';   
}

function showAbout(linkObj, secInd) {
    if( sectionIndex == secInd ) return;
    clearLinks();
    sectionIndex = secInd;
    index = 0;
    new Effect.Highlight( linkObj, {
        startcolor : '#b8a26f', endcolor : '#000000', afterFinish: setLink
    }
    );
    new Effect.Fade( 'browse' );
    new Effect.Fade( 'description' );
    new Effect.Fade( 'centercontent', {afterFinish : aboutContent} );
}

function swap() {
    clearTnails();
    document.getElementById('artwork'+index).className='tnail current';
    Effect.Fade( 'centercontent', {
        duration : 0.5
    }
    );
    Effect.Fade( 'description', {
        duration : 0.5, afterFinish : fadeIn
    }
    );
}

function artContent() {
    var tmp = section[sectionIndex].array[index];
    str1 = '<a href="javascript:next();" title="Next"><img src="JPEG/'+tmp.filename+'" id="image" name="image" /></a>';
    str2 = '<h3>' + tmp.caption + '</h3><p>' + tmp.descr + '</p>';
    document.getElementById( 'centercontent' ).innerHTML = str1;
    document.getElementById( 'description' ).innerHTML = str2;
}

function fadeIn() {
    section[sectionIndex].contentFunction();
    Effect.Appear( 'centercontent', {
        duration : 0.5
    }
    );
    Effect.Appear( 'description', {
        duration : 0.5
    }
    );
}

function next() {
    index = ( index + 1 ) % section[sectionIndex].array.length;
    swap();
}

function prev() {
    index = ( index - 1 ) % section[sectionIndex].array.length;
    index = index < 0 ? index + section[sectionIndex].array.length : index;
    swap();
}

function showContent( linkObj, secInd ) {
    if( sectionIndex == secInd ) return;
    clearLinks();
    sectionIndex = secInd;
    index = 0;
    new Effect.Highlight( linkObj, {
        startcolor : '#b8a26f', endcolor : '#000000', afterFinish: setLink
    }
    );
    new Effect.Fade( 'browse', {afterFinish:showBrowse} );
    new Effect.Fade( 'centercontent' );
    new Effect.Fade( 'description');
    new Effect.Move( 'leftcontent', {
        x : 0, y : 0, mode : 'absolute', afterFinish : swap
    }
    );
}

function showBrowse() {
         var str = '<a href="javascript:prev();">« Prev</a> | <a href="javascript:next();">Next »</a><br />'
         for( var i = 0; i < section[sectionIndex].array.length; i++ ) {
              str += '<a href="javascript:showImage('+i+');" id="artwork'+i+'" class="tnail">'+(i+1)+'</a>'
         }
         document.getElementById( 'browse' ).innerHTML = str;         
         new Effect.Appear( 'browse' );
}

function showImage( i ) {
         index = i;
         swap();
}

function clearTnails() {
         for( var i = 0; i < section[sectionIndex].array.length; i++ ) {
              document.getElementById('artwork'+i).className='tnail';
         }
}

function init() {
    sectionIndex = 0;
    new Effect.Fade( 'centercontent' );
    new Effect.Fade( 'description', {afterFinish: fadeIn } );
    setLink();
}

function mainLinks() {
    document.write( '<div id="links"><ul>' );
    for( var i = 0; i < section.length; i ++ ) {
        document.write( '<li><a id="link'+i+'" href="javascript:'+section[i].callFunction+'(\'link'+i+'\', '+i+')">' + section[i].caption + '</a>' );
        document.write( '</li>' );
    }
    document.write( '</ul></div>' );
}