// -----------------------------------------------------------------------------------
//
//	Thumbnail v.01
//	by Christian Stone - http://xtian.stonescape.net
//	Last Modification: 12/9/08
//
//	For more information, visit:
//	http://xtian.stonescape.net
//
// -
// - All copyright notices regarding this software MUST remain
// - intact in the scripts and in the outputted HTML.
// -
// - You are not allowed to copy or redistribute this software without explicit permission from Christian Stone
// -
//
// -----------------------------------------------------------------------------------


function createThumbnail(thumbnailview,gallery,imagePath,thumbnailPath,thumbWidth,thumbHeight,description,thumbAlt) {
    //creates HTML that looks similar to this:
    //
    //<div class="galleryFrame">
    //   <div class="galleryThumb">
    //       <img class="galleryImage" src="thumbnails/IMG_0816.jpg" width="120" height="160" alt=""/>
    //       <img class="thumbur" style="left:90px;" src="/gallery/galimage/thumb/ur.png" alt=""/>
    //       <img class="thumbll" style="top:153px;" src="/gallery/galimage/thumb/ll.png" alt=""/>
    //       <img class="thumblr" style="left:90px;top:153px;" src="/gallery/galimage/thumb/lr.png" alt=""/>
    //    <img class="thumbbborder" style="width:45px;top:153px;" src="/gallery/galimage/thumb/bottom.png"/>
    //      <img class="thumbrborder" style="height:151px;left:93px;" src="/gallery/galimage/thumb/right.png"/>
    //   </div>
    //    <div class="thumbCaption" style="top:180px;width:120px;">
    //      <center>
    //          <span class="thumbTitle">Title</span><br/>
    //      </center>
    //    </div>
    //</div>

        var objBody =  document.getElementById(thumbnailview);
        var captionOffset = thumbHeight - thumbWidth;
        var captionOffsetString = 'width:'+thumbWidth+'px;left:-3px;';
        if (captionOffset < 0) captionOffset = 0;
        else {captionOffsetString='left:-'+((captionOffset / 2)-17)+'px;width:'+thumbHeight+'px;'}
         objBody.appendChild(Builder.node('div',{CLASS:'galleryFrame'}, [
            Builder.node('div',{CLASS:'galleryThumb',style:'width:'+(thumbWidth+20)+'px;'}, [
                Builder.node('a', {href:imagePath, rel:gallery}, [
                    Builder.node('img', {CLASS:'galleryImage',src:thumbnailPath, height:thumbHeight, width:thumbWidth, alt:thumbAlt, rel:gallery})
                ]),
                Builder.node('img', {CLASS:'thumbur',style:'left:'+(thumbWidth+6)+"px;", src:'/gallery/galimage/thumb/wh_top_rt.png'}),
                Builder.node('img', {CLASS:'thumbll',src:'/gallery/galimage/thumb/wh_bot_lt.png', style:'top:'+(thumbHeight+6)+'px;'}),
                Builder.node('img', {CLASS:'thumblr',src:'/gallery/galimage/thumb/wh_bot_corner.png' , style:'left:'+(thumbWidth+6)+'px;top:'+(thumbHeight+6)+'px;'}),
                Builder.node('img', {CLASS:'thumbbborder',src:'/gallery/galimage/thumb/wh_bot.png', style:'width:'+(thumbWidth-29)+'px;top:'+(thumbHeight+6)+'px;'}),
                Builder.node('img', {CLASS:'thumbrborder',src:'/gallery/galimage/thumb/wh_rt.png', style:'left:'+(thumbWidth+6)+'px;height:'+(thumbHeight-27)+'px;'})
            ]),
             Builder.node('div',{CLASS:'thumbCaption', style:'top:'+(thumbHeight+20)+'px;'+captionOffsetString}, [
                Builder.node('center', [
                    Builder.node('span',{CLASS:'thumbTitle'}, description)
                ])
             ])
            ]));
}


function createThumbnailDescription(thumbnailview,gallery,imagePath,thumbnailPath,thumbWidth,thumbHeight,thumbDescription,thumbAlt,description) {
    //creates HTML that looks similar to this:
    //
    //<div class="galleryFrame">
    //   <div class="galleryThumb">
    //       <img class="galleryImage" src="thumbnails/IMG_0816.jpg" width="120" height="160" alt=""/>
    //       <img class="thumbur" style="left:90px;" src="/gallery/galimage/thumb/ur.png" alt=""/>
    //       <img class="thumbll" style="top:153px;" src="/gallery/galimage/thumb/ll.png" alt=""/>
    //       <img class="thumblr" style="left:90px;top:153px;" src="/gallery/galimage/thumb/lr.png" alt=""/>
    //    <img class="thumbbborder" style="width:45px;top:153px;" src="/gallery/galimage/thumb/bottom.png"/>
    //      <img class="thumbrborder" style="height:151px;left:93px;" src="/gallery/galimage/thumb/right.png"/>
    //   </div>
    //    <div class="thumbCaption" style="top:180px;width:120px;">
    //      <center>
    //          <span class="thumbTitle">Title</span><br/>
    //      </center>
    //    </div>
    //</div>

        var objBody =  document.getElementById(thumbnailview);
        var captionOffset = thumbHeight - thumbWidth;
        var captionOffsetString = 'width:'+thumbWidth+'px;left:-3px;';
        if (captionOffset < 0) captionOffset = 0;
        else {captionOffsetString='left:-'+((captionOffset / 2)-17)+'px;width:'+thumbHeight+'px;'}
         objBody.appendChild(Builder.node('div',{CLASS:'galleryFrame'}, [
            Builder.node('div',{CLASS:'galleryThumb',style:'width:'+(thumbWidth+20)+'px;'}, [
                Builder.node('a', {href:imagePath, rel:gallery, title:description}, [
                    Builder.node('img', {CLASS:'galleryImage',src:thumbnailPath, height:thumbHeight, width:thumbWidth, alt:thumbAlt, rel:gallery})
                ]),
                Builder.node('img', {CLASS:'thumbur',style:'left:'+(thumbWidth+6)+"px;", src:'/gallery/galimage/thumb/wh_top_rt.png'}),
                Builder.node('img', {CLASS:'thumbll',src:'/gallery/galimage/thumb/wh_bot_lt.png', style:'top:'+(thumbHeight+6)+'px;'}),
                Builder.node('img', {CLASS:'thumblr',src:'/gallery/galimage/thumb/wh_bot_corner.png' , style:'left:'+(thumbWidth+6)+'px;top:'+(thumbHeight+6)+'px;'}),
                Builder.node('img', {CLASS:'thumbbborder',src:'/gallery/galimage/thumb/wh_bot.png', style:'width:'+(thumbWidth-29)+'px;top:'+(thumbHeight+6)+'px;'}),
                Builder.node('img', {CLASS:'thumbrborder',src:'/gallery/galimage/thumb/wh_rt.png', style:'left:'+(thumbWidth+6)+'px;height:'+(thumbHeight-27)+'px;'})
            ]),
             Builder.node('div',{CLASS:'thumbCaption', style:'top:'+(thumbHeight+20)+'px;'+captionOffsetString}, [
                Builder.node('center', [
                    Builder.node('span',{CLASS:'thumbTitle'}, thumbDescription)
                ])
             ])
            ]));
}


function createGalleryThumbnail(thumbnailview,gallery,galleryPath,thumbnailPath,thumbWidth,thumbHeight,description,size,thumbAlt) {
//creates HTML that looks similar to this:
//
//<div class="galleryFrame">
//   <div class="galleryThumb">
//       <img class="galleryImage" src="thumbnails/IMG_0816.jpg" width="120" height="160" alt=""/>
//      <img class="galleryul" src="/gallery/galimage/gal/ul.png" alt=""/>
//       <img class="galleryur" style="left:90px;" src="/gallery/galimage/gal/ur.png" alt=""/>
//       <img class="galleryll" style="top:153px;" src="/gallery/galimage/gal/ll.png" alt=""/>
//       <img class="gallerylr" style="left:90px;top:153px;" src="/gallery/galimage/gal/lr.png" alt=""/>
//    <img class="gallerytborder" style="width:45px;" src="/gallery/galimage/gal/top.png"/>
//    <img class="gallerylborder" style="height:151px;" src="/gallery/galimage/gal/left.png"/>
//    <img class="gallerybborder" style="width:45px;top:153px;" src="/gallery/galimage/gal/bottom.png"/>
//      <img class="galleryrborder" style="height:151px;left:93px;" src="/gallery/galimage/gal/right.png"/>
//   </div>
//    <div class="galleryCaption" style="top:180px;width:120px;">
//      <center>
//          <span class="galleryTitle">Title</span><br/>
//          <span class="galleryMetric">13 Pictures</span>
//      </center>
//    </div>
//</div>

    var objBody =  document.getElementById(thumbnailview);
     objBody.appendChild(Builder.node('div',{CLASS:'galleryFrame'}, [
        Builder.node('div',{CLASS:'galleryThumb',style:'width:'+(thumbWidth+20)+'px;'}, [
            Builder.node('a', {href:galleryPath}, [
                Builder.node('img', {CLASS:'galleryImage',src:thumbnailPath, height:thumbHeight, width:thumbWidth, alt:thumbAlt})
            ]),
            Builder.node('img', {CLASS:'galleryul',src:'/gallery/galimage/gal/ul.png'}),
            Builder.node('img', {CLASS:'galleryur',style:'left:'+(thumbWidth-30)+"px;", src:'/gallery/galimage/gal/ur.png'}),
            Builder.node('img', {CLASS:'galleryll',src:'/gallery/galimage/gal/ll.png', style:'top:'+(thumbHeight-7)+'px;'}),
            Builder.node('img', {CLASS:'gallerylr',src:'/gallery/galimage/gal/lr.png' , style:'left:'+(thumbWidth-30)+'px;top:'+(thumbHeight-7)+'px;'}),
            Builder.node('img', {CLASS:'gallerytborder',src:'/gallery/galimage/gal/top.png', style:'width:'+(thumbWidth-75)+'px;'}),
            Builder.node('img', {CLASS:'gallerylborder',src:'/gallery/galimage/gal/left.png', style:'height:'+(thumbHeight-9)+'px;'}),
            Builder.node('img', {CLASS:'gallerybborder',src:'/gallery/galimage/gal/bottom.png', style:'width:'+(thumbWidth-75)+'px;top:'+(thumbHeight-7)+'px;'}),
            Builder.node('img', {CLASS:'galleryrborder',src:'/gallery/galimage/gal/right.png', style:'left:'+(thumbWidth-27)+'px;height:'+(thumbHeight-9)+'px;'})
        ]),
         Builder.node('div',{CLASS:'galleryCaption', style:'top:'+(thumbHeight+20)+'px;width:'+thumbWidth+'px;'}, [
            Builder.node('center', [
                Builder.node('span',{CLASS:'galleryTitle'}, description),
                Builder.node('br'),
                Builder.node('span',{CLASS:'galleryMetric'}, size+' Pictures')
            ])
         ])
        ]));
}