");
divOverlayPlay.attr("data_id", objThumb.attr("data_id"));
divOverlayPlay.css("opacity", 0.7);
var divWrapper = objCanvasTemplateImage.parent(); // insert the video object into this wrapper
divWrapper.prepend(divOverlayPlay);
divOverlayPlay.click( function() {
objCanvasTemplateImage.click();
$(this).css("display", "none");
objCanvasTemplateImage.css("display", "none"); // remove any images
var divPlayer = $("
")
divWrapper.append(divPlayer);
//var objImgAttrs = ShowCaseView.getCanvasFitSize(objCanvasTemplate.width(), objCanvasTemplate.height());
var objImgAttrs = {width:objCanvasTemplate.width(), height:objCanvasTemplate.height(), top:0, left:0 }; // forcefully set to fit the canvas size
if (objImgAttrs.top != null) {
divWrapper.css({
"position": "relative",
"left": objImgAttrs.left + "px",
"top": objImgAttrs.top + "px"
});
}
// The video to load
var strContainer = divPlayer.attr("id");
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always", wmode: "opaque" };
// The element id of the Flash embed
var atts = { id: "ShowCaseYTPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/v/" + strVideoID +
"&enablejsapi=1&autoplay=1&playerapiid=player1",
strContainer, objImgAttrs.width, objImgAttrs.height, "8", null, null, params, atts);
objCanvasTemplateMessageWrapper.css("display", "none");
});
}
else if ( objCanvasTemplate.attr("content_type") == "video") {
objCanvasTemplateImage.attr("src", objThumb.attr("content_src_1"));
this.m_objDivCanvas.prepend(objCanvasTemplate);
var divOverlayPlay = $("
");
divOverlayPlay.attr("data_id", objThumb.attr("data_id"));
divOverlayPlay.css("opacity", 0.7);
var divWrapper = objCanvasTemplateImage.parent(); // insert the video object into this wrapper
divWrapper.prepend(divOverlayPlay);
strCurrentPlayerId = "flowplayer_" + objThumb.attr("data_id");
var strVideoURL = objThumb.attr("content_src_2");
var strWidth = objCanvasTemplate.css("width");
var strHeight = objCanvasTemplate.css("height");
divOverlayPlay.click( function() {
objCanvasTemplateImage.click();
$(this).css("display", "none");
objCanvasTemplateImage.css("display", "none"); // remove any images
var divPlayer = $("
")
//divPlayer.attr("id", strCurrentPlayerId);
divPlayer.css({"display": "block", "height": strHeight, "width": strWidth, "position": "relative", "top": "0px", "left": "0px"});
divWrapper.append(divPlayer);
/*var objImgAttrs = ShowCaseView.getCanvasFitSize(480, 380);
if (objImgAttrs.top != null) {
divWrapper.css({
"position": "relative",
"left": objImgAttrs.left + "px",
"top": objImgAttrs.top + "px"
});
}*/
// if it's a video, call flowplayer to handle it.
flowplayer( strCurrentPlayerId,
"/embeds/flowplayer/flowplayer.commercial-3.1.5.swf", {
key: GetFlowPlayerLicense(), // GetFlowPlayerLicense() function is defined at the bottom of this file
// change the default controlbar to tube
plugins: {
controls: {
url: '/embeds/flowplayer/flowplayer.controls-tube-3.1.5.swf'
}
},
// here is our playlist with two clips
playlist: [
{
url: strVideoURL,
scaling: 'orig',
autoPlay: true,
// video will be buffered when splash screen is visible
autoBuffering: false
}
],
onBegin : function(){
ShowCaseView.m_bVideoPlaying = true;
ShowCaseView.doAutoTransition();
},
onFinish : function(){
ShowCaseView.m_bVideoPlaying = false;
ShowCaseView.doAutoTransition();
}
});
objCanvasTemplateMessageWrapper.css("display", "none");
});
}
else {
// if it's an image type item
objCanvasTemplateImage.attr("src", objThumb.attr("content_src_1"));
this.m_objDivCanvas.prepend(objCanvasTemplate);
/*
var imgCanvas = new Image();
$(imgCanvas).load(function() {
// now resize / change the image according to the style setup
if (ShowCaseView.m_objDivCanvas.find("div").length != 0) {
var objImgAttrs = ShowCaseView.getCanvasFitSize(imgCanvas.width, imgCanvas.height);
objCanvasTemplate.find("img").css( {
"cursor": "pointer",
"width" : objImgAttrs.width + "px",
"height": objImgAttrs.height + "px"
});
if ( objImgAttrs.top != null ) {
objCanvasTemplate.find("img").css( {
"left": objImgAttrs.left + "px",
"top" : objImgAttrs.top + "px"
});
}
}
delete imgCanvas;
imgCanvas = null;
}).attr("src", objThumb.attr("content_src_1"));
*/
}
objCanvasTemplateImage.attr("data_id", objThumb.attr("data_id"));
objCanvasTemplateImage.load(function() {
// now resize / change the image according to the style setup
//if ( $(this).attr("resized") != 1 ) { //if (ShowCaseView.m_objDivCanvas.find("div").length != 0) {
//alert(objCanvasTemplateImage.attr("src") + "\nW: " + objCanvasTemplateImage.width() + " - H: " + objCanvasTemplateImage.height());
//alert("createCanvasBuffer.resizing: " + $(this).attr("data_id") + "\n" +
//"W: " + $(this).width() + " - H: " + $(this).height());
var objImgAttrs = ShowCaseView.getCanvasFitSize($(this).width(), $(this).height());
if ( objImgAttrs.width > 0 && objImgAttrs.height > 0 ) {
$(this).css( {
"cursor": "pointer",
"width" : objImgAttrs.width + "px",
"height": objImgAttrs.height + "px"
});
if ( objImgAttrs.top != null ) {
$(this).css( {
"left": objImgAttrs.left + "px",
"top" : objImgAttrs.top + "px"
});
}
}
//$(this).attr("resized", 1);
//}
objImgAttrs = null;
});
objCanvasTemplate.css("visibility", "hidden");
objThumb = null;
return objCanvasTemplate;
},
displayToCanvas: function(p_objLI) {
this.displayToCanvasProccess(this.createCanvasBuffer(p_objLI));
},
// p_intBufferNum is the number id to the buffer div.
displayBufferToCanvas: function(p_intBufferNum) {
this.displayToCanvasProccess(this.m_objDivCanvas.find("div[num='" + p_intBufferNum + "']"));
},
// private
displayToCanvasProccess: function($p_objCanvasTemplate) {
var objCanvasTemplate = $p_objCanvasTemplate;
// extra code begins
// most browsers do not require this code snippet, however, Opera needs this code to resize the image properly. sigh extra code.
if ( objCanvasTemplate.css("visibility") == "hidden" ) {
var objImg = objCanvasTemplate.find("img");
//if ( objImg.attr("resized") != 1 ) {
//alert("displayToCanvasProccess.resizing: " + objImg.attr("data_id") + "\n" +
//"W: " + objImg.width() + " - H: " + objImg.height());
var objImgAttrs = ShowCaseView.getCanvasFitSize(objImg.width(), objImg.height());
if ( objImgAttrs.width > 0 && objImgAttrs.height > 0 ) {
objImg.css({
"cursor": "pointer",
"width": objImgAttrs.width + "px",
"height": objImgAttrs.height + "px"
});
if (objImgAttrs.top != null) {
objImg.css({
"left": objImgAttrs.left + "px",
"top": objImgAttrs.top + "px"
});
}
}
//objImg.attr("resized", 1);
objImgAttrs = null;
//}
objImg.load(function() {
// now resize / change the image according to the style setup
//if ( $(this).attr("resized") != 1 ) { //if (ShowCaseView.m_objDivCanvas.find("div").length != 0) {
//alert(objCanvasTemplateImage.attr("src") + "\nW: " + objCanvasTemplateImage.width() + " - H: " + objCanvasTemplateImage.height());
//alert("displayToCanvasProccess.resizing: " + $(this).attr("data_id") + "\n" +
//"W: " + $(this).width() + " - H: " + $(this).height());
var objImgAttrs = ShowCaseView.getCanvasFitSize($(this).width(), $(this).height());
$(this).css( {
"cursor": "pointer",
"width" : objImgAttrs.width + "px",
"height": objImgAttrs.height + "px"
});
if ( objImgAttrs.top != null ) {
$(this).css( {
"left": objImgAttrs.left + "px",
"top" : objImgAttrs.top + "px"
});
}
//$(this).attr("resized", 1);
//}
objImgAttrs = null;
});
objImg = null;
objCanvasTemplate.css("visibility", "visible");
}
// extra code ends
// fade out the previous Canvas
var $objPreviousCanvas = this.m_objMainDivFrame.find("#divCanvasSelected");
$objPreviousCanvas.attr("id", "").fadeOut(this.m_intThumbTransitionTime / 3);
if ( $objPreviousCanvas.attr("content_type") == "youtube" ) {
this.m_bVideoPlaying = false;
swfobject.removeSWF("ShowCaseYTPlayer"); // remove Youtube player safely.
$objPreviousCanvas.find("#divOverlayPlay").css("display", "block");
$objPreviousCanvas.find("img").css("display", "block");
$objPreviousCanvas.find("img").parent().css({
"position": "",
"left": "",
"top": ""
});
$objPreviousCanvas.find("#divMessageWrapper").css("display", "block");
}
else if ( $objPreviousCanvas.attr("content_type") == "video" ) {
this.m_bVideoPlaying = false;
$objPreviousCanvas.find("a").remove(); // remove FlowPlayer; it's embedded in a
tab
$objPreviousCanvas.find("#divOverlayPlay").css("display", "block");
$objPreviousCanvas.find("img").css("display", "block");
$objPreviousCanvas.find("img").parent().css({
"position": "",
"left": "",
"top": ""
});
}
$objPreviousCanvas = null;
// find the buffered canvas and display it
objCanvasTemplate.find("#divMessageWrapper").hide(); // fix for lousy IE's transparency bug when fading in.
objCanvasTemplate.find("#divBackground").css("opacity", 0); // fix for lousy IE's transparency bug when fading in.
objCanvasTemplate.attr("id", "divCanvasSelected").fadeIn(this.m_intThumbTransitionTime, function() {
$(this).find("#divMessageWrapper").show(); // fix for lousy IE's transparency bug when fading in.
$(this).find("#divBackground").css("opacity", 0).animate({"opacity": 0.7}, 200); // fix for lousy IE's transparency bug when fading in.
$(this).find("span.panel-overlay").css({'opacity':0, 'color':'white'}).animate({"opacity": 1}, 200); // fix for lousy IE's transparency bug when fading in.
$(this).find("div.InfoLink").css({'opacity':0, 'color':'white'}).animate({"opacity": 1}, 200); // fix for lousy IE's transparency bug when fading in.
});
objCanvasTemplate.find("span.panel-overlay").css({'opacity':0}); // fix for lousy IE's transparency bug when fading in.
objCanvasTemplate.find("div.InfoLink").css({'opacity':0}); // fix for lousy IE's transparency bug when fading in.
objCanvasTemplate.find("#divBackground").attr("style", "display: block; position: absolute; z-index: 998; width: 100%; left: 0pt; bottom: 0px;"); // fix for lousy IE's transparency bug when fading in.
objCanvasTemplate = null;
},
// private
clearFilmStrip: function() {
if ( this.m_objDivCanvas != null )
this.m_objDivCanvas.html("");
if ( this.m_objUlFilmStrip != null )
this.m_objUlFilmStrip.html("");
},
// private
getCanvasFitSize: function(p_intWidth, p_intHeight) {
var intCanvasWidth = parseInt(this.m_objDivCanvasTemplate.css("width"));
var intCanvasHeight = parseInt(this.m_objDivCanvasTemplate.css("height"));
if (ShowCaseView.m_strCanvasImageStyle == "stretch") {
return { "width": intCanvasWidth, "height": intCanvasHeight };
} else if (ShowCaseView.m_strCanvasImageStyle == "original") {
return { "width": "", "height": "" };
} else if (ShowCaseView.m_strCanvasImageStyle == "fit") {
var intImageScale = Math.min(intCanvasWidth / p_intWidth, intCanvasHeight / p_intHeight);
var intNewWidth = (p_intWidth * intImageScale);
var intNewHeight = (p_intHeight * intImageScale);
var intNewLeft = (intCanvasWidth - (intImageScale * p_intWidth)) / 2;
var intNewTop = (intCanvasHeight - (intImageScale * p_intHeight)) / 2;
//Debug("width " + intNewWidth + " height " + intNewHeight + " scale " + intImageScale + " left " + intNewLeft + " top" + intNewTop);
return { "width": intNewWidth, "height": intNewHeight, "scale": intImageScale, "left": intNewLeft, "top": intNewTop };
}
},
// private
// Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).
// When the SWF is first loaded it will broadcast an unstarted (-1) event. When the video is cued and ready to play it will broadcast a video cued event (5).
onPlayerStateChange: function(p_intState) {
switch (p_intState) {
case 0:
this.m_bVideoPlaying = false;
this.doAutoTransition();
break;
case 1:
this.m_bVideoPlaying = true;
break;
case 2:
this.m_bVideoPlaying = true;
break;
case 3:
this.m_bVideoPlaying = true;
this.doAutoTransition();
break;
}
},
// public
test: function() {
//alert(this.m_objLITemplate.html());
/*
this.m_objUlSource.find("li").each( function() {
alert($(this).html());
});
*/
}
};
// this event handler is called automatically
// the method name is hardcored in google's code, so do not change "onYoutubePlayerReady"
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ShowCaseYTPlayer"); // the ID must be the one that's playing!! else, it wont work.
ytplayer.addEventListener("onStateChange", "ShowCaseView.onPlayerStateChange");
}
function getYoutubeVideoThumb(url, size) {
if (url === null) { return ""; }
size = (size === null) ? "big" : size;
var vid;
results = url.match("[\\?&]v=([^&#]*)");
vid = getYoutubeVideoIdByUrl(url);
if (size == "big" )
return "http://i1.ytimg.com/vi/" + vid + "/hqdefault.jpg";
else if (size == "small") {
return "http://img.youtube.com/vi/" + vid + "/2.jpg";
}
else {
return "http://img.youtube.com/vi/" + vid + "/0.jpg";
}
}
function getYoutubeVideoIdByUrl(p_strURL) {
var results = p_strURL.match("[\\?&]v=([^&#]*)");
return (results === null) ? p_strURL : results[1];
}
var _FlowPlayerLicenses = new Array();
_FlowPlayerLicenses["beanfun.com.tw"] = "#@bdaa4d904d5e60a0dc5";
_FlowPlayerLicenses["beanfun.com.hk"] = "#@1ff5fc73b42335e420f";
_FlowPlayerLicenses["beanfun.com.cn"] = "#@4771532c3a9fab1e163";
_FlowPlayerLicenses["beanfun.com.us"] = "#@a00823de96fcaaeba55";
_FlowPlayerLicenses["beanfun.com.jp"] = "#@cedbd02fc9c11dec118";
_FlowPlayerLicenses["beanfun.com.kr"] = "#@020ece74e8939752a7a";
_FlowPlayerLicenses["beanfun.com.eu"] = "#@3e91ed5b1b18629a08e";
_FlowPlayerLicenses["twindex.com.tw"] = "#@3c92b84b0f0bc5c573c";
_FlowPlayerLicenses["gameastor.com"] = "#@6c8f7cf7feace61c01f";
_FlowPlayerLicenses["gameastor.com.tw"] = "#@dc54cb00895d8863d2c";
_FlowPlayerLicenses["beanfun.com"] = "#@7e04160289445b1309a";
function GetFlowPlayerLicense()
{
var strDomain = document.domain;
var intDomainIndex = strDomain.indexOf("beanfun.");
if ( intDomainIndex == -1 ) intDomainIndex = strDomain.indexOf("gameastor.");
if (intDomainIndex == -1) intDomainIndex = strDomain.indexOf("twindex.");
strDomain = strDomain.substring(intDomainIndex);
var strKey = (_FlowPlayerLicenses[strDomain] == null) ? _FlowPlayerLicenses["beanfun.com"] : _FlowPlayerLicenses[strDomain];
return strKey;
}