/* [INCLUDE FILE] oas/oas_gamepages */
//configuration
OAS_url ='http://ads.miniclip.com/RealMedia/ads/';
OAS_listpos = 'Bottom2,Middle';
OAS_query = '?';
OAS_sitepage = 'miniclip.com/gamepages';
//end of configuration
OAS_version = 10;
OAS_rn = '001234567890'; OAS_rns = '1234567890';
OAS_rn = new String (Math.random()); OAS_rns = OAS_rn.substring (2, 11);
function OAS_NORMAL(pos) {
document.write('');
document.write('');
}
OAS_version = 11;
if (navigator.userAgent.indexOf('Mozilla/3') != -1)
OAS_version = 10;
if (OAS_version >= 11)
document.write('<\/SCRIPT>');
document.write('');
function OAS_AD(pos) {
if (OAS_version >= 11 && typeof(OAS_RICH) !='undefined')
OAS_RICH(pos);
else
OAS_NORMAL(pos);
}
/* [INCLUDE FILE] sketchstar/animation_player_v2 */
/**
* Animation frame state constants' object
*/
var AnimationFrameState = {
// animation frame states
STATE_NONE: 0,
STATE_LOADING: 1,
STATE_LOADED: 2
};
/**
* Frame object holding information about current
* image location and state
*/
var AnimationFrame = Class.create({
/**
* Class constructor
*
* @param string src Image source location
* @param integer duration Duration of the frame in miliseconds
* @return AnimationFrame
*/
initialize: function(src, duration)
{
// current frame duration
this._duration = 100;
// current image load state
this._state = AnimationFrameState.STATE_NONE;
// set frame source url
this._src = src;
// reset HTMLImageElement
this._img = null;
if (duration) {
// set frame duration
this._duration = parseInt(duration, 10);
}
},
/**
* Get current loading state of the frame image
*
* @return integer
*/
getState: function()
{
return this._state;
},
/**
* Get duration of the frame
*
* @return integer
*/
getDuration: function()
{
return this._duration;
},
/**
* Get image object
*
* @return HTMLImageElement
*/
getImage: function()
{
return this._img;
},
/**
* Get unage location source
*
* @return string
*/
getImageSrc: function()
{
return this._src;
},
/**
* Load image if not already lloaded or loading
*
* @param object options Callback options object { onStart: function() {}, onComplete: function() {} }
* @return void
*/
load: function(options)
{
if (!this._img) {
if (options.onStart) {
options.onStart();
}
this._state = AnimationFrameState.STATE_LOADING;
this._img = new Element('img', {
"src": this._src
});
this._img.setStyle({
"zIndex": 1
});
this._img.onload = function(event) {
this._state = AnimationFrameState.STATE_LOADED;
if (options.onComplete) {
options.onComplete();
}
}.bind(this);
}
}
});
/**
* Animation object holding frame objects and
* information about animation dimensions
*/
var Animation = Class.create({
/**
* Class constructor
*
* @param array frames Array of frames [optional]
* @return Animation
*/
initialize: function(frames)
{
// list of animation frames
this._frames = [];
// animation dimension information
this._size = {
width: 400,
height: 300
};
if (Object.isArray(frames)) {
for (var i = 0; i < frames.length; i++) {
this._frames.push(frames[i]);
}
}
return this;
},
/**
* Add frame to the current list of frames
*
* @param AnimationFrame frame Frame object to add
* @return Animation
*/
addFrame: function(url, duration)
{
var frame = new AnimationFrame(url, duration);
this._frames.push(frame);
return this;
},
/**
* Get list of current animation frames
*
* @return array
*/
getFrames: function()
{
return this._frames;
},
loadFromUrl: function(url)
{
var ajax = new Ajax.Request(url, {
method: 'post',
asynchronous: false,
onSuccess: function(r) {
var frames = r.responseText.evalJSON();
if (Object.isArray(frames) && (frames.length > 0)) {
for (var i = 0; i < frames.length; i++) {
var frame = frames[i];
this.addFrame(frame.url, frame.duration);
}
}
}.bind(this)
});
},
/**
* Set animation size (width and height)
*
* @param integer width Width of animation frames
* @param integer height Height of animation frames
* @return Animation
*/
setSize: function(width, height)
{
this.setWidth(width);
this.setHeight(height);
return this;
},
/**
* Set width of animation frames
*
* @param integer width Width of animation frames
*/
setWidth: function(width)
{
this._size.width = parseInt(width, 10);
return this;
},
/**
* Get width of animation frames
*
* @return integer
*/
getWidth: function()
{
return this._size.width;
},
/**
* Set height of animation frames
*
* @param integer height Height of animation frames
*/
setHeight: function(height)
{
this._size.height = parseInt(height, 10);
return this;
},
/**
* Get height of animation frames
*
* @return integer
*/
getHeight: function()
{
return this._size.height;
}
});
/**
* Animation player state constants' object
*/
var AnimationPlayerState = {
// animation player state
STATE_STOPPED: 0,
STATE_PLAYING: 1,
STATE_PAUSED: 2,
STATE_SEEKING: 3
};
/**
* Animation player used to playback Animation objects
*/
var AnimationPlayer = Class.create({
/**
* Class constructor
*
* @param HTMLDivElement|string container Id or div itself to hold the player
* @param object options Custom option override
* @parem Animation animation Animation object (with frames)
* @return AnimationPlayer
*/
initialize: function(container, options, animation)
{
// main container div
this._container = null;
// find the animation target container
this._target_container = $(container);
// animation image (frame) container
this._animation_container = null;
// Animation object
this._animation = animation;
// information about animation frames
this._frames = {
"list": [],
"count": 0,
"loaded": 0,
"current": null
};
// current percentage of loaded animations
this._load_progress = 0;
// large center loading image options
this._loading = {
"img": null,
"width": 0,
"height": 0
};
// small corner loading image options
this._loading_small = {
"img": null,
"width": 0,
"height": 0
};
// Control.Slider object
this._slider = null;
// slider buffer div
this._slider_buffer = null;
// window timeout pointer
this._timeout = null;
// current player state
this._state = AnimationPlayerState.STATE_STOPPED;
// custom player options
this.options = {
"play": true,
"loop": false,
"slider": true,
"preload": false,
"loading": {
"large": {
"url": null
},
"small": {
"url": null,
"position": 'topright'
}
},
"dataSource": null,
"onAnimationFinished": null,
"onAnimationLoaded": null,
"onFrameChanged": null,
"onSliderSlide": null,
"onSliderChange": null,
"onInitialized": null
};
// override options with user defined ones
Object.extend(this.options, options || {});
// throw an exception if there are no frames in the animation
if (animation) {
if (animation.getFrames().length === 0) {
throw "Animation does not contain frames to play!";
} else {
this._initPlayer();
}
} else {
if (this.options.dataSource) {
this._loadFromUrl(this.options.dataSource);
} else {
throw "Animation does not contain frames to play nor has the data source been defined";
}
}
},
/**
* Initialize player after all required elements have been created
*
* @return void
*/
_initPlayer: function()
{
// create player container
this._initContainer();
// append player container to the target container
this._target_container.appendChild(this._container);
// save animation frames
this._frames.list = this._animation.getFrames();
// save frame count
this._frames.count = this._frames.list.length;
// create center loading div (if defined in options)
if (this.options.loading.large.url) {
this._initLoading();
}
// create small corner loading div (if defined in options)
if (this.options.loading.small.url) {
this._initLoadingSmall();
}
// create slider (if defined in options)
if (this.options.slider) {
this._initSlider();
}
// execute user defined callback
if (this.options.onInitialized && Object.isFunction(this.options.onInitialized)) {
this.options.onInitialized(this);
}
// preload images if defined in options
if (this.options.preload) {
// preload all frames
this.preload();
} else {
// play if auto play is enabled
if (this.options.play) {
// if no frames need to be preloaded
if (this.options.preload === false) {
this.play();
} else {
// preload the required number of frames and play
this.preload();
}
}
}
},
/**
* Load animation frames from
*/
_loadFromUrl: function(url)
{
var ajax = new Ajax.Request(url, {
method: 'post',
asynchronous: true,
onSuccess: function(r) {
var frames = r.responseText.evalJSON();
if (Object.isArray(frames) && (frames.length > 0)) {
this._animation = new Animation();
frames.each(function(frame) {
this._animation.addFrame(frame.url, frame.duration);
}.bind(this));
this._initPlayer();
}
}.bind(this)
});
},
/**
* Initialize animation player container
*
* @return AnimationPlayer
*/
_initContainer: function()
{
// create another container inside the wrapper div
this._container = new Element('div', {
"class": 'animation_player_container'
});
// set width and height of the inner container to the one of animation
this._container.setStyle({
"width": this._animation.getWidth() + 1 + 'px',
"position": 'relative'
});
// create another container inside the wrapper div
this._animation_container = new Element('div', {
"class": 'animation_container'
});
this._container.appendChild(this._animation_container);
// set width and height of the inner container to the one of animation
this._animation_container.setStyle({
"width": this._animation.getWidth() + 'px',
"height": this._animation.getHeight() + 'px',
"position": 'relative'
});
// initialize slider container
this._slider_container = null;
return this;
},
/**
* Initialize large center loading div
*
* @return AnimationPlayer
*/
_initLoading: function()
{
// extract the image source
var loading_img_src = this.options.loading.large.url;
// create the image element
this._loading.img = new Element('img', {
"src": loading_img_src
});
this._loading.img.onload = function(event) {
// save dimension parameters
this._loading.width = this._loading.img.width;
this._loading.height = this._loading.img.height;
// center and hide the loading image
var top = (this._animation.getHeight() / 2) - (this._loading.height / 2);
var left = (this._animation.getWidth() / 2) - (this._loading.width / 2);
// set image style
this._loading.img.setStyle({
"display": 'none',
"position": 'absolute',
"top": top + 'px',
"left": left + 'px',
"zIndex": 1000
});
this._animation_container.appendChild(this._loading.img);
}.bind(this);
return this;
},
/**
* Initialize small corner loading div
*
* @return AnimationPlayer
*/
_initLoadingSmall: function()
{
var loading_small_image_src = this.options.loading.small.url;
this._loading_small.img = new Element('img', {
"src": loading_small_image_src
});
this._loading_small.img.onload = function(event) {
this._loading_small.width = this._loading_small.img.width;
this._loading_small.height = this._loading_small.img.height;
var distance = 5;
this._loading_small.img.setStyle({
"display": 'none',
"position": 'absolute',
"zIndex": 1000
});
// position the loading image
switch (this.options.loading.small.position) {
case 'topleft':
this._loading_small.img.setStyle({
"top": distance + 'px',
"left": distance + 'px'
});
break;
case 'bottomleft':
this._loading_small.img.setStyle({
"top": this._animation.getHeight() - this._loading_small.height - distance + 'px',
"left": distance + 'px'
});
break;
case 'bottomright':
this._loading_small.img.setStyle({
"top": this._animation.getHeight() - this._loading_small.height - distance + 'px',
"right": distance + 'px'
});
break;
case 'center':
// center and hide the loading image
var top = (this._animation.getHeight() / 2) - (this._loading_small.height / 2);
var left = (this._animation.getWidth() / 2) - (this._loading_small.width / 2);
// set image style
this._loading_small.img.setStyle({
"top": parseInt(top) + 'px',
"left": parseInt(left) + 'px'
});
break;
case 'topright':
default:
this._loading_small.img.setStyle({
"top": distance + 'px',
"right": distance + 'px'
});
break;
}
this._container.appendChild(this._loading_small.img);
}.bind(this);
return this;
},
/**
* Initialize slider element
*
* @return AnimationPlayer
*/
_initSlider: function()
{
// return if the slider has already been created
if (this._slider) {
return;
}
// create the slider container
this._slider_container = new Element('div', {
"class": 'animation_player_slider_container'
});
this._container.appendChild(this._slider_container);
// create the track div
var track = new Element('div', {
"class": 'animation_player_slider_track'
});
this._slider_container.appendChild(track);
// create the slider buffer div
this._slider_buffer = new Element('div', {
"class": 'animation_player_buffer'
});
track.appendChild(this._slider_buffer);
// create the slider div
var slider = new Element('div', {
"class": 'animation_player_slider_slider'
});
track.appendChild(slider);
// calculate one percent in pixels
var one_perc = track.getWidth() / this._frames.count;
// instantiate the slider object
this._slider = new Control.Slider(slider, track, {
axis: 'hodizontal',
range: $R(0, this._frames.count),
increment: one_perc,
alignX: 0,
alignY: -2,
disabled: false
});
// define jump-to-position functionality
this._slider_buffer.onclick = function(event) {
if (this._slider.disabled) {
return false;
}
var e = event || window.event;
// get x position of pointer click
var x = e.layerX;
// get progress percentage of where the user clicked
var percentage = x / this._slider.trackLength;
// calculate index of the frame to display
var frame_index = parseInt(this.getAnimationFrameCount() * percentage, 10);
// check how many frames in a row have been loaded
var first_frames_loaded = this.getStartingFramesLoaded();
// only allow clicks inside loaded frames area
if (frame_index <= first_frames_loaded) {
this._slider.setValue(frame_index);
this._showFrame(frame_index);
// if the player was playing before then continue playing
if (this._state == AnimationPlayerState.STATE_PLAYING) {
this.play();
}
} else {
// cancel the click
Event.stop(event);
return false;
}
}.bind(this);
// disable clicks on the trackbar
Event.stopObserving(this._slider.track, "mousedown", this._slider.eventMouseDown);
// update frame on dragging the slider
this._slider.options.onSlide = function(position) {
// convert position to the integer
position = parseInt(position, 10);
// return false if the position hasn't changed
if (position == this._frames.current) {
return;
}
var starting_frames_loaded = this.getStartingFramesLoaded();
if (position > starting_frames_loaded) {
position = starting_frames_loaded;
this._slider.setValue(position);
}
this._state = AnimationPlayerState.STATE_SEEKING;
this._showFrame(position);
if (this.options.onSliderSlide && Object.isFunction(this.options.onSliderSlide)) {
this.options.onSliderSlide(position, this);
}
}.bind(this);
// execute user defined event handler
this._slider.options.onChange = function(position) {
// convert position to the integer
position = parseInt(position, 10);
// if custom even handler is defined
if (this.options.onSliderChange && Object.isFunction(this.options.onSliderChange)) {
// execute user defined callback
this.options.onSliderChange(position, this);
}
if (this._slider.dragging && this.options.onSliderChangeManual && Object.isFunction(this.options.onSliderChangeManual)) {
this.options.onSliderChangeManual(position, this);
}
}.bind(this);
return this;
},
/**
* Preload all unloaded frames
*
* @return AnimationPlayer
*/
preload: function()
{
// show large center loading while preloading
this.showLoading();
// loop through all frames
this._frames.list.each(function(frame) {
// check if the frame has not yet been loaded
if (frame.getState() == AnimationFrameState.STATE_NONE) {
// start loading the frame
frame.load({
onComplete: function() {
// mark frame as loaded
this._onFrameLoaded();
// if all frames have been loaded
if (this.getFramesLoaded() == this.getAnimationFrameCount()) {
// hide large center loading
this.hideLoading();
// start playing (if required)
if (this.options.play) {
this.play();
} else {
this.stop();
}
// not all frames have been yet loaded
} else {
// if preload is number of frames
if (Object.isInteger(this.options.preload)) {
// start playback if number of first frames loaded is the same or greater than the required number
if ((this.options.preload > 0) && (this.getStartingFramesLoaded() >= this.options.preload) && this.options.play) {
this.play();
}
} else {
// if preload is percentage
if (Object.isPercentage(this.options.preload)) {
var loadprogress = this.getStartingFramesLoadProgress();
var preload = Object.percentageToInt(this.options.preload);
// start playback if percentage of first frames loaded is the same or greater than the required amount
if ((preload > 0) && (loadprogress >= preload) && this.options.play) {
this.play();
}
}
}
}
}.bind(this)
});
}
}.bind(this));
return this;
},
/**
* Event happening when a frame has finished loading
*
* @return AnimationPlayer
*/
_onFrameLoaded: function()
{
// increment number of frames that have been loaded
this._frames.loaded++;
// set loading progress to the percentage of loaded animations
this._load_progress = parseInt(this._frames.loaded / this.getAnimationFrameCount() * 100, 10);
// update slider buffer
this._updateSliderBufferProgress();
// if all frames have been loaded
if ((this._frames.loaded == this._frames.count)) {
// hide all loading images
this.hideLoading();
this.hideLoadingSmall();
if (this._slider_buffer) {
// flash the slider buffer
new Effect.Highlight(this._slider_buffer, {
startcolor: '#22FC11',
endcolor: '#A0A6FF',
duration: 1.5
});
}
// execute user defined event handler
if (this.options.onAnimationLoaded && Object.isFunction(this.options.onAnimationLoaded)) {
this.options.onAnimationLoaded(this);
}
}
return this;
},
/**
* Update the width of the slider buffer
*
* @return AnimationPlayer
*/
_updateSliderBufferProgress: function()
{
// if the slider and buffer have been initialized
if (this._slider_buffer) {
// calculate number of animations loaded in a row
var loaded = this.getStartingFramesLoaded();
// calculate buffer width percentage
var percentage = parseInt(loaded / this.getAnimationFrameCount() * 100, 10);
// change width of the buffer
this._slider_buffer.setStyle({
"width": this.getLoadProgress() + '%'
});
}
return this;
},
/**
* Load all frames that have not yet been loaded
*
* @return AnimationPlayer
*/
_loadPendingFrames: function()
{
// return if all frames have been loaded
if (this.getFramesLoaded() == this.getAnimationFrameCount()) {
return false;
}
// loop through all frames
this._frames.list.each(function(frame) {
// if the frame has not been loaded
if (frame.getState() == AnimationFrameState.STATE_NONE) {
// load it
frame.load({
onComplete: function() {
// mark frame as loaded
this._onFrameLoaded();
// load the rest of pending frames
if (this.getFramesLoaded() < this.getAnimationFrameCount()) {
this._loadPendingFrames();
}
}.bind(this)
});
}
}.bind(this));
return this;
},
/**
* Show frame with the specified index
*
* @param integer index Index of the frame to display
* @return AnimationPlayer|boolean
*/
_showFrame: function(index)
{
// return if trying to display the current frame
if (index == this._frames.current) {
return false;
}
// get the AnimationFrame object
var frame = this._frames.list[index];
// if frame was found
if (frame) {
if (!frame.getImage()) {
return false;
}
// set current index to the new index
this._frames.current = index;
this.hideLoading();
// clear the container
this._animation_container.update();
// append frames HTMLImageElement to the container
this._animation_container.appendChild(frame.getImage());
// if slider exists, set it's position to the index
if (this._slider) {
this._slider.setValue(index);
}
// execute user defined event handler
if (this.options.onFrameChanged && Object.isFunction(this.options.onFrameChanged)) {
this.options.onFrameChanged(index, this);
}
}
return this;
},
/**
* Show next frame in the queue
*
* @return AnimationPlayer|boolean
*/
_showNextFrame: function()
{
// clear the existing timeout
clearTimeout(this._timeout);
// show first frame if the playback is stopped or hasn't started
if (this._frames.current === null) {
var next_index = 0;
// the the index of the next frame in queue
} else {
var next_index = this._frames.current + 1;
// if current frame is already the last frame
if (next_index >= this._frames.count) {
// execute user defined event handler
if (this.options.onAnimationFinished && Object.isFunction(this.options.onAnimationFinished)) {
this.options.onAnimationFinished(this);
}
// start from the first frame is looping is enabled
if (this.options.loop) {
var next_index = 0;
// lopping is disabled
} else {
// set state to STOPPED
this._state = AnimationPlayerState.STATE_STOPPED;
return false;
}
}
}
// get frame to be played
var frame = this._frames.list[next_index];
// if frame was found
if (frame) {
// if frame's HTMLImageElement is already loaded
if (frame.getState() == AnimationFrameState.STATE_LOADED) {
// hide the corner loading
this.hideLoadingSmall();
// if animation is currently playing
if (this._state == AnimationPlayerState.STATE_PLAYING) {
// display the specified frame
this._showFrame(next_index);
// queue the following frame
this._timeout = setTimeout(this._showNextFrame.bind(this), frame.getDuration());
}
// frame's HTMLImageElement has not yet been loaded
} else {
// still loading
if (frame.getState() == AnimationFrameState.STATE_LOADING) {
// show corner loading
this.showLoadingSmall();
// retry after 10 miliseconds
setTimeout(this._showNextFrame.bind(this), 10);
// frame has not even started loading
} else {
// show corner loading
this.showLoadingSmall();
// load the frame
frame.load({
onComplete: function() {
// mark frame as loaded
this._onFrameLoaded();
// display the frame if the animation is playing
if (this._state == AnimationPlayerState.STATE_PLAYING) {
// display the specified frame
this._showFrame(next_index);
// queue the following frame
this._timeout = setTimeout(this._showNextFrame.bind(this), frame.getDuration());
}
// preload other pending frames if there are any left
if (this.getFramesLoaded() < this.getAnimationFrameCount()) {
this._loadPendingFrames();
}
}.bind(this)
});
}
}
}
return this;
},
/**
* Get the animation object
*
* @return Animation
*/
getAnimation: function()
{
return this._animation;
},
/**
* Get current load progress (0 - 100)
*
* @return integer
*/
getLoadProgress: function()
{
return this._load_progress;
},
/**
* Get total (non-sequential) number of frames loaded
*
* @return integer
*/
getFramesLoaded: function()
{
return this._frames.loaded;
},
/**
* Get number of frames loaded from the start with no unloaded inbetween
*
* @return integer
*/
getStartingFramesLoaded: function()
{
// assume that none has been loaded
var loaded = 0;
// loop throught each frame and check the state
this._frames.list.each(function(frame) {
if (frame.getState() == AnimationFrameState.STATE_LOADED) {
loaded++;
}
});
return loaded;
},
getStartingFramesLoadProgress: function()
{
var total = this.getAnimationFrameCount();
var loaded = this.getStartingFramesLoaded();
return parseInt(loaded / total * 100, 10);
},
/**
* Get number of frames in the current animation
*
* @return integer
*/
getAnimationFrameCount: function()
{
return this._frames.count;
},
/**
* Start playback
*
* @return AnimationPlayer
*/
play: function()
{
//return if the animation is already playing
if (this._state == AnimationPlayerState.STATE_PLAYING) {
return false;
}
// start from the first frame if the playback is stopped
if (this._state == AnimationPlayerState.STATE_STOPPED) {
this._frames.current = null;
}
// set state to PLAYING
this._state = AnimationPlayerState.STATE_PLAYING;
// display the next frame after the current one
this._showNextFrame();
return this;
},
/**
* Pause playback
*
* @return AnimationPlayer
*/
pause: function()
{
// don't play the following frames
clearTimeout(this._timeout);
// set state to PAUSED
this._state = AnimationPlayerState.STATE_PAUSED;
// load pending frames while waiting
this._loadPendingFrames();
return this;
},
/**
* Stop playback
*
* @return AnimationPlayer
*/
stop: function()
{
// don't play the following frames
clearTimeout(this._timeout);
// set state to STOPPED
this._state = AnimationPlayerState.STATE_STOPPED;
// load pending frames while waiting
this._loadPendingFrames();
// reset current frame
this._frames.current = null;
// go to the first frame
this._showFrame(0);
return this;
},
/**
* Stop/resume the playback
*
* @return AnimationPlayer
*/
playPause: function()
{
// play if it's not already playing
if (this._state != AnimationPlayerState.STATE_PLAYING) {
this.play();
} else {
this.pause();
}
return this;
},
/**
* Show large center loading image
*
* @return AnimationPlayer
*/
showLoading: function()
{
// if the loading image exists
if (this._loading.img) {
// hide the small corner loading image
this.hideLoadingSmall();
// display the center loading image
this._loading.img.style.display = 'block';
}
return this;
},
/**
* Hide large center loading image
*
* @return AnimationPlayer
*/
hideLoading: function()
{
// if the loading image exists
if (this._loading.img) {
// hide the large center loading image
this._loading.img.style.display = 'none';
}
return this;
},
/**
* Show small corner loading image
*
* @return AnimationPlayer
*/
showLoadingSmall: function()
{
// if the loading image exists
if (this._loading_small.img) {
// if the large center loading image is not currently being displayed
if (this._loading.img && (this._loading.img.style.display != 'block')) {
// display the small corner loading image
this._loading_small.img.style.display = 'block';
}
}
return this;
},
/**
* Hide small corner loading image
*
* @return AnimationPlayer
*/
hideLoadingSmall: function()
{
// if the loading image exists
if (this._loading_small.img) {
// hide the small corner loading image
this._loading_small.img.style.display = 'none';
}
return this;
},
/**
* Show the slider if it is initialized
*
* @return AnimationPlayer
*/
showSlider: function()
{
if (this._slider_container) {
this._slider_container.style.display = 'block';
}
return this;
},
/**
* Hide the slider if it is initialized
*
* @return AnimationPlayer
*/
hideSlider: function()
{
if (this._slider_container) {
this._slider_container.style.display = 'none';
}
return this;
},
/**
* Hide/show slider based on its current state
*
* @return AnimationPlayer
*/
toggleSlider: function()
{
if (this._slider_container.style.display == 'none') {
this.showSlider();
} else {
this.hideSlider();
}
return this;
},
enableSlider: function()
{
this._slider.setEnabled();
},
disableSlider: function()
{
this._slider.setDisabled();
},
toggleSliderEnabled: function()
{
if (this._slider.disabled) {
this._slider.setEnabled();
} else {
this._slider.setDisabled();
}
},
/**
* Get current player state
*
* @return integer
*/
getState: function()
{
return this._state;
},
/**
*
*/
destroy: function()
{
try {
clearTimeout(this._timeout);
Element.remove(this._container);
} catch (e) {
throw "Player already destroyed!";
}
}
});
Object.extend(Object, {
isInteger: function(object) {
if (!Object.isUndefined(object)) {
return (/^[0-9]+$/).test(object.toString());
}
return false;
},
isPercentage: function(object) {
if (!Object.isUndefined(object)) {
return (/^[0-9]+\%$/).test(object.toString());
}
return false;
},
percentageToInt: function(object) {
return parseInt(object.toString().gsub('%', ''), 10);
}
});
/* [INCLUDE FILE] sketchstar/top3panel_v2 */
var top3panel = Class.create({
initialize: function(src)
{
this._url = src;
this._animations = null;
this.profile = false;
this._idx = 0;
this._players = null;
this._animations = null;
this._connectorPos = new Array(0,105,210);
this._thumb1 = null;
this._thumb2 = null;
this._thumb3 = null;
this._uThumb1 = null;
this._uThumb2 = null;
this._uThumb3 = null;
this._milisecs = null;
this._timeout = null;
this._options = {"play": true,"loop": true,"slider": false,"preload": false,
"loading": {
"large": {
"url": "/sketch-star/ss2/img/layout/animationPlayer/loadingAnimation.gif"
},
"small": {
"url": "/sketch-star/ss2/img/layout/animationPlayer/stars_loading_bw.gif",
"position": 'center'
}
}
};
this.load(this._url);
},
load : function(url)
{
var myAjax = new Ajax.Request(
url, {
method: 'post',
onSuccess: function(r) {
var json = r.responseText.evalJSON();
if (json.success) {
this.onAnimationsload(json.result).bind(this);
} else {
alert('OOps! No animations to load');
}
}.bind(this),
onFailure: function(r) {alert('Failure: ' + r.responseText);}
});
},
onAnimationsload : function(list)
{
//hide preloaded content if available
preloadedContentExists = false;
for(i = 1; i < 2; i++){
if($('hide'+i) != undefined){
$('hide'+i).remove();
preloadedContentExists = true;
}
}
this._animations = new Array();
this._players = new Array();
var i = 1;
list.each(function(l) {
var animation = new Animation();
var isGif = false;
l.frames.each(function(f){
animation.addFrame(f[0],f[1]);
if(f[1]==0){
isGif = true;
}
})
var container = $('container'+i);
if(isGif){
var gifPlayer = new Element('img',{
src : '/sketch-star/ss2/getFrame.php?id='+l.id+'&frame=65535'
});
container.appendChild(gifPlayer);
}else{
var player = new AnimationPlayer(container,this._options,animation);
}
this._animations.push(l);
i++;
}.bind(this));
if(!preloadedContentExists){
this.initDisplay();
}else{
this.showAnimation();
}
},
initDisplay : function(){
for(i=0;i<3;i++){
/*
Editor's picks
*/
if($('ep1')!=null){
if(this._animations[i].editorsPick == 1){
var ep=$('ep'+(i+1));
ep.setStyle({display: 'block'});
}else{
var ep=$('ep'+(i+1));
ep.setStyle({display: 'none'});
}
}
/*Thumbnails*/
var thumb = "";
$('thumb'+(i+1)).update(thumb);
/*Titles*/
$('title'+(i+1)).update( ""+this._animations[i].title+"");
if(!this.profile){
/*Author thumbnail*/
var uThumb = new Element('img',{
src : '/players/en/resize.php?uid=' + this._animations[i].authorId+'&w=16&h=16',
title : "Visit " + this._animations[i].authorNameFull+"'s profile"
});
uThumb.setStyle({cursor: 'pointer'});
uThumb.onclick=function(){this.gotoProfile(this._animations[i].authorId).bind(this);}
$('authorThumb'+(i+1)).appendChild(uThumb);
/*Author name*/
$('authorName'+(i+1)).update( ''+this._animations[i].authorNameFull+'');
$('authorName'+(i+1)).title= "Visit "+this._animations[i].authorNameFull+"'s profile";
/*Times and votes*/
$('time'+(i+1)).update(this._animations[i].length);
$('votes'+(i+1)).update(this._animations[i].votes);
}else{
/*Times and Finished*/
$('votes'+(i+1)).update(this._animations[i].votes);
$('views'+(i+1)).update(this._animations[i].views);
$('time'+(i+1)).update(this._animations[i].finished);
}
}
this.showAnimation();
},
showAnimation : function(){
clearTimeout(this._timeout);
if (this._animations[this._idx] != undefined) {
var a = this._animations[this._idx];
} else {
var a = this._animations[0];
this._idx = 0;
}
for(var i=1;i<4;i++){
$('T3Pn'+(i)).className='';
}
$('T3Pn'+(this._idx+1)).className = "selected";
$('connector').setStyle({ top : this._connectorPos[this._idx]+'px'});
for(i=1;i<4;i++){
$('container'+i).style.display = "none";
}
$('container'+(this._idx+1)).style.display = "block";
$('container'+(this._idx+1)).style.cursor = "pointer";
var link = this._animations[this._idx].id;
$('container'+(this._idx+1)).onclick = function(){this.gotoAnimation(link)}.bind(this);
var milisecs = this.timeToSecs(a.length) * 2000;
if (milisecs < 6000) {
milisecs = 6000;
}
this._timeout = setTimeout(function(){this.moveToNext()}.bind(this), milisecs);
},
timeToSecs: function(time)
{
var secs = 0;
var spl = time.split(':');
spl[0]=spl[0]*1;
spl[1]=spl[1]*1;
secs += (spl[0] * 60);
secs += spl[1] ;
return secs;
},
moveTo: function(num){
clearTimeout(this._timeout);
this._idx = num-1;
this.showAnimation();
return false;
},
moveToNext: function(){
clearTimeout(this._timeout);
this._idx ++;
this.showAnimation();
return false;
},
moveToPrev: function(){
clearTimeout(this._timeout);
this._idx --;
this.showAnimation();
return false;
},
setConnectorPos: function(posArray){
this._connectorPos = posArray;
},
gotoAnimation : function(id){
window.location="/sketch-star/en/player.php?id="+id;
},
gotoProfile : function(id){
window.location="/sketch-star/en/profile.php?id="+id;
}
})/* [INCLUDE FILE] sketchstar/swfobject */
/**
* SWFObject v1.5: Flash Player detection and embed - http://blog.deconcept.com/swfobject/
*
* SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
*/
if(typeof deconcept=="undefined"){var deconcept=new Object();}if(typeof deconcept.util=="undefined"){deconcept.util=new Object();}if(typeof deconcept.SWFObjectUtil=="undefined"){deconcept.SWFObjectUtil=new Object();}deconcept.SWFObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a){if(!document.getElementById){return;}this.DETECT_KEY=_a?_a:"detectflash";this.skipDetect=deconcept.util.getRequestParameter(this.DETECT_KEY);this.params=new Object();this.variables=new Object();this.attributes=new Array();if(_1){this.setAttribute("swf",_1);}if(id){this.setAttribute("id",id);}if(w){this.setAttribute("width",w);}if(h){this.setAttribute("height",h);}if(_5){this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));}this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion();if(!window.opera&&document.all&&this.installedVer.major>7){deconcept.SWFObject.doPrepUnload=true;}if(c){this.addParam("bgcolor",c);}var q=_7?_7:"high";this.addParam("quality",q);this.setAttribute("useExpressInstall",false);this.setAttribute("doExpressInstall",false);var _c=(_8)?_8:window.location;this.setAttribute("xiRedirectUrl",_c);this.setAttribute("redirectUrl","");if(_9){this.setAttribute("redirectUrl",_9);}};deconcept.SWFObject.prototype={useExpressInstall:function(_d){this.xiSWFPath=!_d?"expressinstall.swf":_d;this.setAttribute("useExpressInstall",true);},setAttribute:function(_e,_f){this.attributes[_e]=_f;},getAttribute:function(_10){return this.attributes[_10];},addParam:function(_11,_12){this.params[_11]=_12;},getParams:function(){return this.params;},addVariable:function(_13,_14){this.variables[_13]=_14;},getVariable:function(_15){return this.variables[_15];},getVariables:function(){return this.variables;},getVariablePairs:function(){var _16=new Array();var key;var _18=this.getVariables();for(key in _18){_16[_16.length]=key+"="+_18[key];}return _16;},getSWFHTML:function(){var _19="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","PlugIn");this.setAttribute("swf",this.xiSWFPath);}_19="