// -----------------------------------------------------------------------------------
//
//	Thumbnail v.02
//	by Christian Stone - http://xtian.stonescape.net
//	Last Modification: 11/9/09
//
//	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).createAppend(

            'div',{className:'galleryFrame'}, [
                'div',{className:'galleryThumb',style:'width:'+(thumbWidth+20)+'px;'}, [
                    'a', {href:imagePath, rel:gallery}, [
                        'img', {className:'galleryImage',src:thumbnailPath, height:thumbHeight, width:thumbWidth, alt:thumbAlt, rel:gallery},[]
                    ],
                    'img', {className:'thumbur',style:'left:'+(thumbWidth+6)+"px;", src:'/gallery/galimage/thumb/wh_top_rt.png'},[],
                    'img', {className:'thumbll',src:'/gallery/galimage/thumb/wh_bot_lt.png', style:'top:'+(thumbHeight+6)+'px;'},[],
                    'img', {className:'thumblr',src:'/gallery/galimage/thumb/wh_bot_corner.png' , style:'left:'+(thumbWidth+6)+'px;top:'+(thumbHeight+6)+'px;'},[],
                    'img', {className:'thumbbborder',src:'/gallery/galimage/thumb/wh_bot.png', style:'width:'+(thumbWidth-29)+'px;top:'+(thumbHeight+6)+'px;'},[],
                    'img', {className:'thumbrborder',src:'/gallery/galimage/thumb/wh_rt.png', style:'left:'+(thumbWidth+6)+'px;height:'+(thumbHeight-27)+'px;'},[]
                 ],
                 'div',{className:'thumbCaption', style:'top:'+(thumbHeight+20)+'px;'+captionOffsetString}, [
                     'center', {}, [
                        'span',{className:'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).createAppend(
            'div',{className:'galleryFrame'}, [
               'div',{className:'galleryThumb',style:'width:'+(thumbWidth+20)+'px;'}, [
                    'a', {href:imagePath, rel:gallery, title:description}, [
                        'img', {className:'galleryImage',src:thumbnailPath, height:thumbHeight, width:thumbWidth, alt:thumbAlt, rel:gallery},[]
                    ]
                ],
                'img', {className:'thumbur',style:'left:'+(thumbWidth+6)+"px;", src:'/gallery/galimage/thumb/wh_top_rt.png'},[],
                'img', {className:'thumbll',src:'/gallery/galimage/thumb/wh_bot_lt.png', style:'top:'+(thumbHeight+6)+'px;'},
                'img', {className:'thumblr',src:'/gallery/galimage/thumb/wh_bot_corner.png' , style:'left:'+(thumbWidth+6)+'px;top:'+(thumbHeight+6)+'px;'},[],
                'img', {className:'thumbbborder',src:'/gallery/galimage/thumb/wh_bot.png', style:'width:'+(thumbWidth-29)+'px;top:'+(thumbHeight+6)+'px;'},[],
                'img', {className:'thumbrborder',src:'/gallery/galimage/thumb/wh_rt.png', style:'left:'+(thumbWidth+6)+'px;height:'+(thumbHeight-27)+'px;'},[]
             ],
             'div',{className:'thumbCaption', style:'top:'+(thumbHeight+20)+'px;'+captionOffsetString}, [
                'center',{}, [
                    'span',{className:'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).createAppend(
        'div',{className:'galleryFrame'}, [
            'div',{className:'galleryThumb',style:'width:'+(thumbWidth+20)+'px;'}, [
               'a', {href:galleryPath}, [
                  'img', {className:'galleryImage',src:thumbnailPath, height:thumbHeight, width:thumbWidth, alt:thumbAlt},[]
               ],
            'img', {className:'galleryul',src:'/gallery/galimage/gal/ul.png'},[],
            'img', {className:'galleryur',style:'left:'+(thumbWidth-30)+"px;", src:'/gallery/galimage/gal/ur.png'},[],
            'img', {className:'galleryll',src:'/gallery/galimage/gal/ll.png', style:'top:'+(thumbHeight-7)+'px;'},[],
            'img', {className:'gallerylr',src:'/gallery/galimage/gal/lr.png' , style:'left:'+(thumbWidth-30)+'px;top:'+(thumbHeight-7)+'px;'},[],
            'img', {className:'gallerytborder',src:'/gallery/galimage/gal/top.png', style:'width:'+(thumbWidth-75)+'px;'},[],
            'img', {className:'gallerylborder',src:'/gallery/galimage/gal/left.png', style:'height:'+(thumbHeight-9)+'px;'},[],
            'img', {className:'gallerybborder',src:'/gallery/galimage/gal/bottom.png', style:'width:'+(thumbWidth-75)+'px;top:'+(thumbHeight-7)+'px;'},[],
            'img', {className:'galleryrborder',src:'/gallery/galimage/gal/right.png', style:'left:'+(thumbWidth-27)+'px;height:'+(thumbHeight-9)+'px;'},[]
        ],'div',{className:'galleryCaption', style:'top:'+(thumbHeight+20)+'px;width:'+thumbWidth+'px;'}, [
            'center',{}, [
                'span',{className:'galleryTitle'}, description,
                'br',{},[],
                'span',{className:'galleryMetric'}, size+' Pictures'
             ]
         ]]);
}