Image expand resizing issue

Question

http://www.kowalskidesign.com/source/normalFlash.html
Hello,
I'm having problems resizing the expanded view. This is when you click on a thumb and the image enlarges with a description.
I've tried changing lines 204-205 (highlighted in bold in code below)
'// extends mask producing fully visible image' changing:-
width: (2 * MWIDTH),  to width: 550    and the same with the height but i get mixed results.
If anyone could give me some pointers it would be very much appreciated.
The link is above. Here is the code:-
// Grid Expandable Gallery
// (C)RimV - www.mymedia-art.com - [email protected]
// FLASH LIB
import flash.geom.*;
import flash.display.BitmapData;
import flash.filters.DropShadowFilter;
// FUSE KIT
import com.mosesSupposes.fuse.*;
import com.mosesSupposes.fusefx.*;
import com.endologik.fusefx.*;
// DYNAMIC REGISTRATION
import com.darronschall.DynamicRegistration;
//______________________________________________ PARAMETERS
// Gallery characteristic
var strokeThickness:Number = 2;
var rows:Number = 4;
var columns:Number = 5;
var bWidth:Number = 700;
var bHeight:Number = 500;
var speed:Number = 0.5;
var layerAlpha:Number = 70;
// Roll over / roll out effec
var Effect:Array = ["None", "brightness", "photo flash", "grayscale"];
var effectID:Number = 2;
// data path
var styleSheet:String = "css/styles.css";
var xmlPath:String = "normalFlash.xml";
//______________________________________________ VARIABLES
// Gallery dimension
var SWIDTH:Number;
var SHEIGHT:Number;
var MWIDTH:Number;
var MHEIGHT:Number;
var nWidth:Number;
var nHeight:Number;
var TOTAL:Number;
// Movieclip dimension
var maskContainer:MovieClip = new MovieClip();
var layer:MovieClip = new MovieClip();
var current:MovieClip = new MovieClip();
var descriptionClip:MovieClip = new MovieClip();
var preloader:Array = new Array();
var maskArray:Array = new Array();
var image:Array = new Array();
var position:Array = new Array();
var captionClip:MovieClip = new MovieClip();
// misc
var xmlData:XML = new XML();
var link:Array = new Array();
var description:Array = new Array();
var caption:Array = new Array();
var count:Number = 0;
var firstLoaded:Boolean = true;
var mWidth:Number;
var mHeight:Number;
var dX, dY:Number;
//______________________________________________ MAIN
initGallery();
function initGallery():Void
// Initialize ZigoEngine
ZigoEngine.register(PennerEasing, FuseItem, FuseFMP);
FuseFX.register(ColorFX);
ZigoEngine.OUTPUT_LEVEL = 0;
// hide display clip
display._visible = false;
// Global reference
_global.base = this;
// Gallery dimension
SWIDTH = Stage.width;
SHEIGHT = Stage.height;
base = this;
// stage resize listener
Stage.scaleMode = "noScale";
    Stage.align = "TL";
var stageResize:Object = new Object();
Stage.addListener(stageResize);
stageResize.onResize = onStageResize;
// start building gallery
buildGallery();
dX = -(Stage.width - bWidth) * .5;
dY = -(Stage.height - bHeight) * .5;
function onStageResize():Void
base._x = (Stage.width - bWidth) * .5 + dX;
base._y = (Stage.height - bHeight) * .5 + dY;
function buildGallery():Void
// Load XML
loadXML();
// Load StyleSheet
loadStyleSheet();
// Load XML
function loadXML():Void
xmlData.ignoreWhite = true;
xmlData.onLoad = loadData;
xmlData.load(xmlPath);
// Load image and save data
function loadData(loaded:Boolean):Void
if (loaded)
var data:Array = xmlData.firstChild.firstChild.childNodes;
TOTAL = data.length;
createMaskContainer();
for (var i:Number = 0; i < TOTAL; i++)
var dat:Array = data[i].childNodes;
caption[i] = dat[1].attributes.content;
description[i] = dat[2].firstChild.nodeValue;
link[i] = dat[3].attributes.src;
// Image data
image[i] = new MovieClip();
position[i] = new Object();
loadImage(dat[0].attributes.src, i);
// Load image
function loadImage(src:String, index:Number):Void
image[index] = this.createEmptyMovieClip("image" + index, index + 1000);
// create movie clip loader listener
var mylistener:Object = new Object();
// update progress
mylistener.onLoadProgress = function(image:MovieClip, byteLoaded:Number, byteTotal:Number):Void
var num:Number = Math.round(byteLoaded / byteTotal * 100);
_global.base.preloader[index].percent.text = num;
// Load completed initialize data
mylistener.onLoadInit = function(target:MovieClip):Void
// remove preloader
preloader[index].removeMovieClip();
//set up necessary component and calculate data
// Setting center registration
DynamicRegistration.initialize(target);
target.setRegistration(target._width / 2, target._height / 2);
var r:Number = Math.floor(index / columns);
var c:Number = index % columns;
var deltaX:Number = (SWIDTH - bWidth) / 2;
var detalY:Number = (SHEIGHT - bHeight) / 2;
cover[index]._x = target._x2 = position[index].x = (c + 1) * strokeThickness + c * mWidth + mWidth / 2 + deltaX;
cover[index]._y = target._y2 = position[index].y = (r + 1) * strokeThickness + r * mHeight + mHeight / 2 + detalY;
target.xmin = target._x2 - (target._width - mWidth) / 2;
target.xmax = target._x2 + (target._width - mWidth) / 2;
target.ymin = target._y2 - (target._height - mHeight) / 2;
target.ymax = target._y2 + (target._height - mHeight) / 2;
target.index = index;
target.xk = speed;
target.yk = speed;
target.release = false;
target.oX = target._x2;
target.oY = target._y2;
target.setMask(maskArray[index]);
maskArray[index].tWidth = (target._width) / (bWidth / MWIDTH);
maskArray[index].tHeight = (target._height) / (bHeight / MHEIGHT);
// Apply effect
switch (Effect[effectID])
case "brightness": ZigoEngine.doTween(target, ColorFX.BRIGHTNESS, -70, 0);
break;
case "grayscale": ZigoEngine.doTween(target, ColorFX.SATURATION, -100, 0);
break;
// Setup interactive
target.onRelease = function():Void
// unhide image + move to center
if (!this.release)
delete this.onEnterFrame;
this.release = true;
current = this;
var index:Number = this.index;
// extends mask producing fully visible image
ZigoEngine.doTween({ target:maskArray[index],
width: (2 * MWIDTH),
height: (2 * MHEIGHT),
ease:"easeInQuint",
time:1,
func:function():Void
// display description
descriptionClip._visible = true;
descriptionClip.swapDepths(current._parent.getNextHighestDepth());
descriptionClip.content.htmlText = description[current.index];
descriptionClip.content._width = current._width - 5;
descriptionClip.back._height  = descriptionClip.content._height + 10;
descriptionClip.back._width = descriptionClip.content._width + 5;
descriptionClip._x = current._x;
descriptionClip._y = current._y + current._height - descriptionClip._height;
ZigoEngine.doTween({ target:descriptionClip,
alpha:100
// Disable effect
switch (Effect[effectID])
case "brightness": ZigoEngine.doTween(this, ColorFX.BRIGHTNESS, 0, 1);
break;
case "grayscale": ZigoEngine.doTween(this, ColorFX.SATURATION, 0, 2);
break;
// move to center
var centerX:Number = (SWIDTH - current._width) / 2;
var centerY:Number = (SHEIGHT - current._height) / 2;
ZigoEngine.doTween({ target:current,
x:centerX,
y:centerY,
ease:"easeOutQuint"
// display cover layer
var depth = this._parent.getNextHighestDepth();
layer.swapDepths(depth);
layer._visible = true;
ZigoEngine.doTween({ target:layer,
start_alpha:0,
alpha:layerAlpha
this.swapDepths(depth + 1);
// hide caption
ZigoEngine.doTween({ target:captionClip,
alpha:0,
func:function():Void
captionClip._visible = false;
else
// turn back to original position
ZigoEngine.doTween({ target:descriptionClip,
alpha:0,
func:function():Void
descriptionClip._visible = false;
ZigoEngine.doTween({ target:this,
_x2:this.oX,
_y2:this.oY,
func:function():Void
current.release = false;
ZigoEngine.doTween({ target:maskArray[this.index],
width: nWidth,
height: nHeight
ZigoEngine.doTween({ target:layer,
alpha:0,
func:function():Void
layer._visible = false;
// Enable effect
switch (Effect[effectID])
case "brightness": ZigoEngine.doTween(this, ColorFX.BRIGHTNESS, -70, 1);
break;
case "grayscale": ZigoEngine.doTween(this, ColorFX.SATURATION, -100, 2);
break;
// animate
target.onRollOver = function()
// animate image
if (!this.release)
this.onEnterFrame = function():Void
this._x2 += this.xk;
this._y2 += this.yk;
if (this._x2 >= this.xmax || this._x2 <= this.xmin) this.xk =- this.xk;
if (this._y2 >= this.ymax || this._y2 <= this.ymin) this.yk =- this.yk;
// effect
switch (Effect[effectID])
case "brightness": ZigoEngine.doTween(this, ColorFX.BRIGHTNESS, 50, 1);
break;
case "grayscale": ZigoEngine.doTween(this, ColorFX.SATURATION, 0, 2);
break;
case "photo flash": ZigoEngine.doTween(this, [ColorFX.BRIGHTNESS,ColorFX.CONTRAST],[100,100], 0);
ZigoEngine.doTween(this,[ColorFX.BRIGHTNESS,ColorFX.CONTRAST],[0,0], 2);
break;
// Show caption
captionClip.swapDepths(_global.base.getNextHighestDepth());
captionClip.captionText.text = caption[this.index];
captionClip._visible = true;
ZigoEngine.doTween({ target:captionClip,
x:_xmouse + 10,
y:_ymouse - 10,
start_alpha:0,
alpha:100
// disable
target.onRollOut = function():Void
delete this.onEnterFrame;
if (!this.release)
// effect
switch (Effect[effectID])
case "brightness": ZigoEngine.doTween(this, ColorFX.BRIGHTNESS, -70, 1);
break;
case "grayscale": ZigoEngine.doTween(this, ColorFX.SATURATION, -100, 2);
break;
// hide caption
ZigoEngine.doTween({ target:captionClip,
alpha:0,
func:function():Void
captionClip._visible = false;
// Fade in image
ZigoEngine.doTween({ target:target,
start_alpha:0,
alpha:100,
time:3
// Movie Clip Loader
var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(mylistener);
loader.loadClip(src, image[index]);
function createMaskContainer():Void
// Mask container
maskContainer = this.createEmptyMovieClip("maskContainer", 100000);
// Cover layer
layer = this.attachMovie("layer", "layer", 200000);
layer._width = SWIDTH;
layer._height = SHEIGHT;
layer._x = SWIDTH / 2;
layer._y = SHEIGHT / 2;
layer._alpha = layerAlpha;
layer.useHandCursor = false;
layer.onRelease = function():Void { };
layer._visible = false;
// attach mask clip and place in proper position
var k:Number = 0;
for (var i:Number = 0; i < rows; i++)
for (var j:Number = 0; j < columns; j++)
maskArray[k] = new MovieClip();
maskArray[k] = maskContainer.attachMovie("mask", "mask" + k, k);
maskArray[k]._x = (j + 1) * strokeThickness + j * 50 + 25;
maskArray[k]._y = (i + 1) * strokeThickness + i * 50 + 25;
k++;
DynamicRegistration.initialize(maskContainer);
maskContainer.setRegistration(maskContainer._width / 2, maskContainer._height / 2);
maskContainer._x2 = SWIDTH / 2;
maskContainer._y2 = SHEIGHT / 2;
MWIDTH = maskContainer._width;
MHEIGHT = maskContainer._height;
maskContainer._visible = false;
var deltaX:Number = bWidth / MWIDTH;
var deltaY:Number = bHeight / MHEIGHT;
maskContainer._xscale2 = deltaX * 100;
maskContainer._yscale2 = deltaY * 100;
nWidth = 50 + strokeThickness * (deltaX - 1) / deltaX;
nHeight = 50 + strokeThickness * (deltaY - 1) / deltaY;
mWidth = nWidth * deltaX;
mHeight = nHeight * deltaY;
for (var i:Number = 0; i < TOTAL; i++)
maskArray[i]._width = nWidth;
maskArray[i]._height = nHeight;
// attach preloader
preloader[i] = this.attachMovie("preloader", "preloader" + i, i + 8000);
preloader[i]._x = (maskArray[i]._x / MWIDTH) * (maskContainer._width) + maskContainer._x;
preloader[i]._y = (maskArray[i]._y / MHEIGHT) * (maskContainer._height) + maskContainer._y;
// Attach caption
captionClip = this.attachMovie("caption", "captionClip", 99999);
captionClip._visible = false;
function stopMoving():Void
for (var i:Number = 0; i < TOTAL; i++) delete image[i].onEnterFrame;
function loadStyleSheet():Void
// Attach Description Clip
descriptionClip = this.attachMovie("description", "descriptionClip", 300000);
descriptionClip.content.autoSize = true;
descriptionClip._visible = false;
descriptionClip._alpha = 0;
var myStyle:TextField.StyleSheet = new TextField.StyleSheet;
myStyle.load(styleSheet);
myStyle.onLoad = function(loaded:Boolean):Void
if (loaded)
_global.base.descriptionClip.content.styleSheet = this;
target.onEnterFrame = function():Void
this._x2 += this.xk;
this._y2 += this.yk;
if (this._x2 >= this.xmax || this._x2 <= this.xmin) this.xk =- this.xk;
if (this._y2 >= this.ymax || this._y2 <= this.ymin) this.yk =- this.yk;

Answer 1

Thanks, for your reply..
I've corrected it.. Its works as expected in Firefox and Chrome, problem with IE alone
My question is changing doctype declaration is alone enough for upgrading HTML 4 to 5?
Previously, i've used is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
now i changed to <!DOCTYPE html>