function ProductGallery(mainId, thumbsId)
{
this.MainElement = document.getElementById(mainId);
this.ThumbhElement = document.getElementById(thumbsId);
this.ImageCount = 37;
}
ProductGallery.prototype.Template = {
'Main': [
'',
'',
' | ',
'',
' | ',
' | ',
'
',
'',
'| ',
' | ',
'',
' ',
' | ',
'',
' | ',
'
',
'',
' | ',
'',
' | ',
' | ',
'
',
'
'
].join(' '),
'Small' : [
'',
'',
' | ',
'',
' | ',
' | ',
'
',
'',
'| ',
' | ',
' ',
' | ',
'',
' | ',
'
',
'',
' | ',
'',
' | ',
' | ',
'
',
'
'
].join(' ')
};
ProductGallery.prototype.Bind = function (){
this.MainElement.innerHTML = this.Template['Main'];
for (var i = 1; i <= this.ImageCount; i++)
{
var params = {
'smallImageId' : 'smallImageId_'+i,
'index' : i
};
var thumbDiv = document.createElement('div');
thumbDiv.id = 'smallDivImageId_'+i;
thumbDiv.innerHTML = this.TemplateReplacer(this.Template['Small'],params);
this.ThumbhElement.appendChild(thumbDiv);
var imageElement = document.getElementById('smallImageId_'+i);
addEvent(imageElement, 'click', this.ImageSelected);
//addEvent(thumbDiv, 'click', this.ImageSelected);
}
};
ProductGallery.prototype.ImageSelected = function (e){
var elem = e.srcElement||e.target;
var id = elem.id;
var index = id.split('_')[1];
var imageElement = document.getElementById('galleryBigImage');
imageElement.src = '../images/gallery/'+index+'.jpg?'+returnGUID();
var i = 0;
};
ProductGallery.prototype.TemplateReplacer = function(template, paramArray){
var s = template;
for(var key in paramArray)
{
s = s.replace('{#'+key+'}',paramArray[key]);
}
return s;
};
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function returnGUID(){
var guid = "";
for (var i = 0; i < 32; i++)
guid += parseInt(Math.random() * 16).toString(16);
return guid;
};