/*
* Material Experience - Primary Card Layout Class
*
* EYEMG - Interactive Media Group
* Created by Mike Crute (mcrute@eyemg.com)
* Updated by Mike Crute (mcrute@eyemg.com) on 9/26/07
*
* WARNING: Here be dragons, OK so not as many as before but good luck you poor
* sap.
*/
Card.Layout.Primary = Class.create();
Object.extend(Object.extend(Card.Layout.Primary.prototype, Card.Layout.prototype),
{
/*
* Initialize the layout class
*/
initialize: function(cframe, data, card)
{
this.cframe = cframe;
this.data = data;
this.card = card;
this.color = this.card.options.color;
this.hasResources = false;
var direction = data.template.replace(/narrow-/,'');
this.direction = direction ? direction : 'left';
this.oppositeDirection = (direction == 'left') ? 'right' : 'left';
},
/*
* Set the column content. This can be flash, an image or an iframe.
*/
setColumn: function(url, direction, contTitle)
{
var content = Builder.node('div', { style: 'float: ' + this.oppositeDirection });
var myCol = direction + 'Col';
if (/swf$/.test(url)) // Flash
{
content.innerHTML = new SWFObject(url, 'cardFlash', 580, 479, 9, '#FFFFFF').getSWFHTML();
}
else if (/(png|gif|jpg|jpeg)$/.test(url)) // Image
{
content = Builder.node('img',
{
src: url,
alt: contTitle,
title: contTitle,
style: 'float: ' + this.oppositeDirection
});
}
else // iFrame
{
// Can't use DOM methods because IE is allergic
content.innerHTML = '';
}
// We need to replace the content of the column if it exists to
// facilitate changing content later on (i.e. thumbnails)
if (typeof this[myCol] != 'undefined')
{
this.cframe.replaceChild(content, this[myCol]);
this[myCol] = content;
}
else
{
this[myCol] = this.cframe.appendChild(content);
}
},
/*
* Build the resource (more information) list.
*/
getResourceList: function()
{
// Only run if we need to
if (!this.data.resources)
{
return;
}
var numResources = 0;
var iter = 0;
var limit = 5;
this.hasResources = true;
this.resourceContainer = this.contentArea.appendChild(
Builder.node('div',
[
Builder.node('h2', { style: 'color: ' + this.card.options.color }, Strings.moreInfo),
this.resources = Builder.node('ul', { className: 'resourceList' })
]
));
this.data.resources.each(function(item)
{
// Limit the number of allowable resources
if (typeof item == 'undefined' || ++iter > limit)
{
return;
}
numResources++;
this.resources.appendChild(Builder.node('li',
Builder.node('a',
{
href: item.link + '?entrypoint=DESIGNER',
target: '_new',
style: 'color: ' + this.color
}, item.title)
));
}.bind(this));
},
/*
* Set the contents of the narrow column.
*/
setHTML: function(content)
{
this.htmlDiv.innerHTML = content;
},
/*
* Setup the thumbnails.
*/
getThumbnails: function()
{
// Only run if we need to
if (this.data.media.size() <= 1)
{
return;
}
var iter = 0;
var limit = 5; // Includes main media file
var lData = this.data.media;
this.thumbStrip = this.contentArea.appendChild(Builder.node('div', { className: 'thumbStrip' }));
// Add the main media file to the data array
lData.push(
{
thumb: this.data.contentWide[0].thumb,
url: this.data.contentWide[0].url
});
this.data.media.each(function(item)
{
// Limit the number of thumbnails
if (typeof item == 'undefined' || ++iter > limit)
{
return;
}
var mediaPiece = this.thumbStrip.appendChild(
Builder.node('img',
{
src: item.thumb,
className: 'mediaThumb'
})
);
Event.observe(mediaPiece, 'click', function()
{
this.setColumn(item.url, this.direction, '');
}.bindAsEventListener(this));
}.bind(this));
},
/*
* Clean up the data.
*/
_cleanData: function()
{
var lData = this.data.contentNarrow[0].htmlContent;
this.data.contentNarrow[0].htmlContent = lData.replace(/ 1.6 I'm just going to add this into here.
*/
_doIntro: function()
{
this.contentArea.appendChild(Builder.node('div', { className: 'skipbox' },
this.skipLink = Builder.node('a', { href: '#tablehome', className: 'skiplink' },
[
Strings.skipButton,
Builder.node('img', { src: 'images/arrow_right_grey.gif', className: 'skipimg' })
])
));
},
/*
* Throw the card into a popup window for printing.
*/
print: function()
{
var wind = window.open('', '', 'width=' + SME.sizes.innerCard.width + ',height=' + (SME.sizes.innerCard.height + 60));
with (wind)
{
with (document)
{
write('');
write('');
write(this.cframe.innerHTML);
write('');
close();
}
print();
close();
}
return true;
},
/*
* Debug the card layout. Generally this should be used to spot out
* data issues. But it could also be used for other debugging purposes.
*/
_debug: function()
{
}
});