if (!window.xm2hero) window.xm2hero = {};

xm2hero.Base = function() {
    this.control = null;
    this.rootCanvas = null;
    this.root = null;
    this.frontThumb = 4;
    this.autoRotate = 8000;
    this.lockNav = false;
}

xm2hero.Base.prototype = {
    dispose : function() { this.root = null; },
    initialize : function(control, userContext, rootElement) {
		this.control = control;
		this.data = null;
		this.root = this.control.content;
		this.rootCanvas = this.root.findName("rootCanvas");

        this.registerButton(this.rootCanvas.findName("productBox"), null, null, this.clickBox);
        this.registerButton(this.rootCanvas.findName("download_click"), this.rOverDownload, this.rOutDownload, this.clickDownload);
        this.registerButton(this.rootCanvas.findName("buy_click"), this.rOverBuy, this.rOutBuy, this.clickBuy);
        
        this.registerButton(this.rootCanvas.findName("back_buttons"), this.rOverBack, this.rOutBack, this.backClick);
        this.registerButton(this.rootCanvas.findName("forward_buttons"), this.rOverForward, this.rOutForward, this.forwardClick);
        
        this.registerButton(this.rootCanvas.findName("click_right"), null, null, this.backClick);
        this.registerButton(this.rootCanvas.findName("click_left"), null, null, this.forwardClick);
        
        this.registerButton(this.rootCanvas.findName("highligh_click_element"), null, null, this.clickHighlight);
        this.registerButton(this.rootCanvas.findName("yellow_outline"), null, null, this.clickHighlight);
        
        this.rootCanvas.findName("loadRun").addEventListener("Completed", Silverlight.createDelegate(this, this.preloadEntrySpin));        
        
        this.rootCanvas.findName("preload_fadeout").addEventListener("Completed", Silverlight.createDelegate(this, this.slideHorizon));
        this.rootCanvas.findName("slideHorizon").addEventListener("Completed", Silverlight.createDelegate(this, this.autoRotateReset));
        this.rootCanvas.findName("boxDrop").addEventListener("Completed", Silverlight.createDelegate(this, this.introOpacity));
        this.rootCanvas.findName("thumbsFlyIn").addEventListener("Completed", Silverlight.createDelegate(this, this.fourGrow));
        this.rootCanvas.findName("thumbsFlyIn").addEventListener("Completed", Silverlight.createDelegate(this, this.navButtons));
        
        this.rootCanvas.findName("spinintro").addEventListener("Completed", Silverlight.createDelegate(this, this.spinReset));
        this.rootCanvas.findName("spinNext").addEventListener("Completed", Silverlight.createDelegate(this, this.spinReset));
        this.rootCanvas.findName("spinBack").addEventListener("Completed", Silverlight.createDelegate(this, this.spinReset));
        
        this.rootCanvas.findName("thumb_one_grow").addEventListener("Completed", Silverlight.createDelegate(this, this.oneTextIn));
        this.rootCanvas.findName("thumb_one_shrink").addEventListener("Completed", Silverlight.createDelegate(this, this.oneTextOut));
        this.rootCanvas.findName("thumb_two_grow").addEventListener("Completed", Silverlight.createDelegate(this, this.twoTextIn));
        this.rootCanvas.findName("thumb_two_shrink").addEventListener("Completed", Silverlight.createDelegate(this, this.twoTextOut));
        this.rootCanvas.findName("thumb_three_grow").addEventListener("Completed", Silverlight.createDelegate(this, this.threeTextIn));
        this.rootCanvas.findName("thumb_three_shrink").addEventListener("Completed", Silverlight.createDelegate(this, this.threeTextOut));
        this.rootCanvas.findName("thumb_four_grow").addEventListener("Completed", Silverlight.createDelegate(this, this.fourTextIn));
        this.rootCanvas.findName("thumb_four_shrink").addEventListener("Completed", Silverlight.createDelegate(this, this.fourTextOut));
        this.rootCanvas.findName("thumb_five_grow").addEventListener("Completed", Silverlight.createDelegate(this, this.fiveTextIn));
        this.rootCanvas.findName("thumb_five_shrink").addEventListener("Completed", Silverlight.createDelegate(this, this.fiveTextOut));
        
        this.rootCanvas.findName("thumb_one_shrink").addEventListener("Completed", Silverlight.createDelegate(this, this.move));
        this.rootCanvas.findName("thumb_two_shrink").addEventListener("Completed", Silverlight.createDelegate(this, this.move));
        this.rootCanvas.findName("thumb_three_shrink").addEventListener("Completed", Silverlight.createDelegate(this, this.move));
        this.rootCanvas.findName("thumb_four_shrink").addEventListener("Completed", Silverlight.createDelegate(this, this.move));
        this.rootCanvas.findName("thumb_five_shrink").addEventListener("Completed", Silverlight.createDelegate(this, this.move));
        
        this.rootCanvas.findName("thumb_one_grow").addEventListener("Completed", Silverlight.createDelegate(this, this.outlineIn));
        this.rootCanvas.findName("thumb_two_grow").addEventListener("Completed", Silverlight.createDelegate(this, this.outlineIn));
        this.rootCanvas.findName("thumb_three_grow").addEventListener("Completed", Silverlight.createDelegate(this, this.outlineIn));
        this.rootCanvas.findName("thumb_four_grow").addEventListener("Completed", Silverlight.createDelegate(this, this.outlineIn));
        this.rootCanvas.findName("thumb_five_grow").addEventListener("Completed", Silverlight.createDelegate(this, this.outlineIn));
        this.rootCanvas.findName("thumb_one_LC").addEventListener("Completed", Silverlight.createDelegate(this, this.growThumb));
        this.rootCanvas.findName("thumb_two_LC").addEventListener("Completed", Silverlight.createDelegate(this, this.growThumb));
        this.rootCanvas.findName("thumb_three_LC").addEventListener("Completed", Silverlight.createDelegate(this, this.growThumb));
        this.rootCanvas.findName("thumb_four_LC").addEventListener("Completed", Silverlight.createDelegate(this, this.growThumb));
        this.rootCanvas.findName("thumb_five_LC").addEventListener("Completed", Silverlight.createDelegate(this, this.growThumb));
        this.rootCanvas.findName("thumb_one_RC").addEventListener("Completed", Silverlight.createDelegate(this, this.growThumb));
        this.rootCanvas.findName("thumb_two_RC").addEventListener("Completed", Silverlight.createDelegate(this, this.growThumb));
        this.rootCanvas.findName("thumb_three_RC").addEventListener("Completed", Silverlight.createDelegate(this, this.growThumb));
        this.rootCanvas.findName("thumb_four_RC").addEventListener("Completed", Silverlight.createDelegate(this, this.growThumb));
        this.rootCanvas.findName("thumb_five_RC").addEventListener("Completed", Silverlight.createDelegate(this, this.growThumb));
        
        this.rootCanvas.findName("outline_in").addEventListener("Completed", Silverlight.createDelegate(this, this.disableLock));
        
        this.rootCanvas.findName("loadRun").addEventListener("Completed", Silverlight.createDelegate(this, this.getAssets));
    },
    
    
    getAssets : function(sender, eventArgs)
    {
		this.rootCanvas.findName("preload_entry_spin").begin();
        var downloader = this.control.createObject("downloader");
        downloader.addEventListener("Completed", Silverlight.createDelegate(this, this.onCompleted));
        downloader.addEventListener("DownloadProgressChanged", Silverlight.createDelegate(this, this.preloader));
        downloader.open("GET", "/prophoto/expressionmedia2/xm2-hero/images/xm2heroassets.deploy");
        downloader.send();
    },
    
    onCompleted : function(sender, eventArgs)
    {
        this.rootCanvas.findName("thumb_one").setSource(sender, "thumb1_211x126.jpg");
        this.rootCanvas.findName("thumb_one_flip").setSource(sender, "thumb1_211x126.jpg");
        this.rootCanvas.findName("thumb_two").setSource(sender, "thumb2_211x126.jpg");
        this.rootCanvas.findName("thumb_two_flip").setSource(sender, "thumb2_211x126.jpg");
        this.rootCanvas.findName("thumb_three").setSource(sender, "thumb3_211x126.jpg");
        this.rootCanvas.findName("thumb_three_flip").setSource(sender, "thumb3_211x126.jpg");
        this.rootCanvas.findName("thumb_four").setSource(sender, "thumb4_211x126.jpg");
        this.rootCanvas.findName("thumb_four_flip").setSource(sender, "thumb4_211x126.jpg");
        this.rootCanvas.findName("thumb_five").setSource(sender, "thumb5_211x126.jpg");
        this.rootCanvas.findName("thumb_five_flip").setSource(sender, "thumb5_211x126.jpg");
        this.rootCanvas.findName("spinner").setSource(sender, "photoscope.jpg");
        this.rootCanvas.findName("back").setSource(sender, "arrow_back.png");
        this.rootCanvas.findName("back_flip").setSource(sender, "arrow_back.png");
        this.rootCanvas.findName("forward").setSource(sender, "arrow_fwd.png");
        this.rootCanvas.findName("forward_flip").setSource(sender, "arrow_fwd.png");
        this.rootCanvas.findName("download_button").setSource(sender, "btn_bkg.png");
        this.rootCanvas.findName("buy_button").setSource(sender, "btn_bkg.png");
        this.rootCanvas.findName("download_button_hover").setSource(sender, "btn_bkg_a.png");
        this.rootCanvas.findName("buy_button_hover").setSource(sender, "btn_bkg_a.png");
        this.rootCanvas.findName("xm2Logo").setSource(sender, "EM2_logo.png");
        this.rootCanvas.findName("productBox").setSource(sender, "EM2boxshot.png");
    },
    
    preloader : function(sender, eventArgs) {
        var percentage = Math.floor(sender.downloadProgress * 100);
		if (percentage >= 100) this.rootCanvas.findName("preload_fadeout").begin();
    },
    
    
    registerButton : function(button, overAction, outAction, clickAction) {
        if (overAction != null)
            button.addEventListener("MouseEnter", Silverlight.createDelegate(this, overAction));
        if (outAction != null)
            button.addEventListener("MouseLeave", Silverlight.createDelegate(this, outAction));
        if (clickAction != null)
	        button.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, clickAction));          
    },
    
    preloadEntrySpin : function(sender, eventArgs) {this.rootCanvas.findName("preload_entry_spin").begin();},
    preloadFade : function(sender, eventArgs) {this.rootCanvas.findName("preload_fadeout").begin();},
    
    disableLock : function(sender, eventArgs) { this.lockNav = false; },
    
    autoRotateReset : function(sender, eventArgs) {
		this.autoInterval = setInterval(Silverlight.createDelegate(this, this.forwardClick), this.autoRotate);
    },
    
    slideHorizon : function(sender, eventArgs) { 
        this.rootCanvas.findName("slideHorizon").begin(); 
        this.rootCanvas.findName("spinintro").begin();
        this.rootCanvas.findName("boxDrop").begin();
        this.rootCanvas.findName("thumbsFlyIn").begin();
        },
        
    spinReset : function(sender, eventArgs) {this.rootCanvas.findName("spinReset").begin();},
        
    introOpacity : function(sender, eventArgs) { this.rootCanvas.findName("introOpacity").begin(); },     
    
    navButtons : function(sender, eventArgs) {this.rootCanvas.findName("navButtons").begin();},    
        
    clickBox : function(sender, eventArgs) { window.location = ('http://www.microsoft.com/expression/products/Overview.aspx?key=media'); },
    
    rOverDownload : function(sender, eventArgs) { this.rootCanvas.findName("download_in").begin(); },
    rOutDownload : function(sender, eventArgs) { this.rootCanvas.findName("download_out").begin(); },
    clickDownload : function(sender, eventArgs) { window.location = ('http://www.microsoft.com/downloads/details.aspx?FamilyId=CD359E7D-FD27-4901-BAFF-6D564CFBD700&displaylang=en'); },
    
    rOverBuy : function(sender, eventArgs) { this.rootCanvas.findName("buy_in").begin(); },
    rOutBuy : function(sender, eventArgs) { this.rootCanvas.findName("buy_out").begin(); },
    clickBuy : function(sender, eventArgs) { window.location = ('http://store.microsoft.com/microsoft/Expression-Media-2/product/22BAF805'); },

    clickHighlight : function(sender, eventArgs) {
        if (this.frontThumb == 1) {
            window.location = ('/prophoto/expressionmedia2/articles/storytelling.aspx');
         }
         else if (this.frontThumb == 2) {
            window.location = ('/prophoto/expressionmedia2/articles/birdsandbees.aspx');
         }
         else if (this.frontThumb == 3) {
            window.location = ('/prophoto/expressionmedia2/articles/shellwildlife.aspx');
         }
         else if (this.frontThumb == 4) {
            window.location = ('/prophoto/expressionmedia2/articles/carpediem.aspx');
         }
         else if (this.frontThumb == 5) {
            window.location = ('/prophoto/expressionmedia2/articles/geotagging.aspx');
         }
    },
    
    rOverBack : function(sender, eventArgs) { this.rootCanvas.findName("nav_back_in").begin(); },
    rOutBack : function(sender, eventArgs) { this.rootCanvas.findName("nav_back_out").begin(); },
    backClick : function(sender, eventArgs) { 
        if (!this.lockNav) {
             this.rootCanvas.findName("outline_out").begin();
             if (this.frontThumb == 1) {
                this.lockNav = true;
                clearInterval(this.autoInterval);
                this.rootCanvas.findName("thumb_one_shrink").begin();
                this.frontThumb = 11;
             }
             else if (this.frontThumb == 2) {
                this.lockNav = true;
                clearInterval(this.autoInterval);
                this.rootCanvas.findName("thumb_two_shrink").begin();
                this.frontThumb = 22;
             }
             else if (this.frontThumb == 3) {
                this.lockNav = true;
                clearInterval(this.autoInterval);
                this.rootCanvas.findName("thumb_three_shrink").begin();
                this.frontThumb = 33;
             }
             else if (this.frontThumb == 4) {
                this.lockNav = true;
                clearInterval(this.autoInterval);
                this.rootCanvas.findName("thumb_four_shrink").begin();
                this.frontThumb = 44;
             }
             else if (this.frontThumb == 5) {
                this.lockNav = true;
                clearInterval(this.autoInterval);
                this.rootCanvas.findName("thumb_five_shrink").begin();
                this.frontThumb = 55;
             }
        }
    },
    
    rOverForward : function(sender, eventArgs) { this.rootCanvas.findName("nav_forward_in").begin(); },
    rOutForward : function(sender, eventArgs) { this.rootCanvas.findName("nav_forward_out").begin(); }, 
    forwardClick : function(sender, eventArgs) {
        if (!this.lockNav) { 
             this.rootCanvas.findName("outline_out").begin();
             if (this.frontThumb == 1) {
                this.lockNav = true;
                clearInterval(this.autoInterval);
                this.rootCanvas.findName("thumb_one_shrink").begin();
             }
             else if (this.frontThumb == 2) {
                this.lockNav = true;
                clearInterval(this.autoInterval);
                this.rootCanvas.findName("thumb_two_shrink").begin();
             }
             else if (this.frontThumb == 3) {
                this.lockNav = true;
                clearInterval(this.autoInterval);
                this.rootCanvas.findName("thumb_three_shrink").begin();
             }
             else if (this.frontThumb == 4) {
                this.lockNav = true;
                clearInterval(this.autoInterval);
                this.rootCanvas.findName("thumb_four_shrink").begin();
             }
             else if (this.frontThumb == 5) {
                this.lockNav = true;
                clearInterval(this.autoInterval);
                this.rootCanvas.findName("thumb_five_shrink").begin();
             }
        }
    },
    
    move : function(sender, eventArgs) { 
         this.rootCanvas.findName("outline_out").begin();
         if (this.frontThumb == 1) {
            this.rootCanvas.findName("spinNext").begin();
            this.rootCanvas.findName("thumb_three_OL").begin();
            this.rootCanvas.findName("thumb_two_LC").begin();
            this.rootCanvas.findName("thumb_one_CR").begin();
            this.rootCanvas.findName("thumb_five_RO").begin();
            this.frontThumb = 2;
         }
         else if (this.frontThumb == 2) {
            this.rootCanvas.findName("spinNext").begin();
            this.rootCanvas.findName("thumb_four_OL").begin();
            this.rootCanvas.findName("thumb_three_LC").begin();
            this.rootCanvas.findName("thumb_two_CR").begin();
            this.rootCanvas.findName("thumb_one_RO").begin();
            this.frontThumb = 3;
         }
         else if (this.frontThumb == 3) {
            this.rootCanvas.findName("spinNext").begin();
            this.rootCanvas.findName("thumb_five_OL").begin();
            this.rootCanvas.findName("thumb_four_LC").begin();
            this.rootCanvas.findName("thumb_three_CR").begin();
            this.rootCanvas.findName("thumb_two_RO").begin();
            this.frontThumb = 4;
         }
         else if (this.frontThumb == 4) {
            this.rootCanvas.findName("spinNext").begin();
            this.rootCanvas.findName("thumb_one_OL").begin();
            this.rootCanvas.findName("thumb_five_LC").begin();
            this.rootCanvas.findName("thumb_four_CR").begin();
            this.rootCanvas.findName("thumb_three_RO").begin();
            this.frontThumb = 5;
         }
         else if (this.frontThumb == 5) {
            this.rootCanvas.findName("spinNext").begin();
            this.rootCanvas.findName("thumb_two_OL").begin();
            this.rootCanvas.findName("thumb_one_LC").begin();
            this.rootCanvas.findName("thumb_five_CR").begin();
            this.rootCanvas.findName("thumb_four_RO").begin();
            this.frontThumb = 1;
         }       
         else if (this.frontThumb == 11) {
            this.rootCanvas.findName("spinBack").begin();
            this.rootCanvas.findName("thumb_two_LO").begin();
            this.rootCanvas.findName("thumb_one_CL").begin();
            this.rootCanvas.findName("thumb_five_RC").begin();
            this.rootCanvas.findName("thumb_four_OR").begin();
            this.frontThumb = 5;
         }
         else if (this.frontThumb == 22) {
            this.rootCanvas.findName("spinBack").begin();
            this.rootCanvas.findName("thumb_three_LO").begin();
            this.rootCanvas.findName("thumb_two_CL").begin();
            this.rootCanvas.findName("thumb_one_RC").begin();
            this.rootCanvas.findName("thumb_five_OR").begin();
            this.frontThumb = 1;
         }
         else if (this.frontThumb == 33) {
            this.rootCanvas.findName("spinBack").begin();
            this.rootCanvas.findName("thumb_four_LO").begin();
            this.rootCanvas.findName("thumb_three_CL").begin();
            this.rootCanvas.findName("thumb_two_RC").begin();
            this.rootCanvas.findName("thumb_one_OR").begin();
            this.frontThumb = 2;
         }
         else if (this.frontThumb == 44) {
            this.rootCanvas.findName("spinBack").begin();
            this.rootCanvas.findName("thumb_five_LO").begin();
            this.rootCanvas.findName("thumb_four_CL").begin();
            this.rootCanvas.findName("thumb_three_RC").begin();
            this.rootCanvas.findName("thumb_two_OR").begin();
            this.frontThumb = 3;
         }
         else if (this.frontThumb == 55) {
            this.rootCanvas.findName("spinBack").begin();
            this.rootCanvas.findName("thumb_one_LO").begin();
            this.rootCanvas.findName("thumb_five_CL").begin();
            this.rootCanvas.findName("thumb_four_RC").begin();
            this.rootCanvas.findName("thumb_three_OR").begin();
            this.frontThumb = 4;
         }
         
    },
    
    growThumb : function(sender, eventArgs) {
        if (this.frontThumb == 1) {
            this.rootCanvas.findName("thumb_one_grow").begin();
        }
        else if (this.frontThumb == 2) {
            this.rootCanvas.findName("thumb_two_grow").begin();
        }
        else if (this.frontThumb == 3) {
            this.rootCanvas.findName("thumb_three_grow").begin();
        }
        else if (this.frontThumb == 4) {
            this.rootCanvas.findName("thumb_four_grow").begin();
        }
        else if (this.frontThumb == 5) {
            this.rootCanvas.findName("thumb_five_grow").begin();
        }
        this.autoRotateReset();
    },
    oneGrow : function(sender, eventArgs) {this.rootCanvas.findName("thumb_one_grow").begin();},
    oneShrink: function(sender, eventArgs) {this.rootCanvas.findName("thumb_one_shrink").begin();},
    oneTextIn : function(sender, eventArgs) {this.rootCanvas.findName("text_one_in").begin();}, 
    oneTextOut : function(sender, eventArgs) {this.rootCanvas.findName("text_one_out").begin();},
    
    twoGrow : function(sender, eventArgs) {this.rootCanvas.findName("thumb_two_grow").begin();},
    twoShrink: function(sender, eventArgs) {this.rootCanvas.findName("thumb_two_shrink").begin();},
    twoTextIn : function(sender, eventArgs) {this.rootCanvas.findName("text_two_in").begin();}, 
    twoTextOut : function(sender, eventArgs) {this.rootCanvas.findName("text_two_out").begin();},
    
    threeGrow : function(sender, eventArgs) {this.rootCanvas.findName("thumb_three_grow").begin();},
    threeShrink: function(sender, eventArgs) {this.rootCanvas.findName("thumb_three_shrink").begin();},
    threeTextIn : function(sender, eventArgs) {this.rootCanvas.findName("text_three_in").begin();}, 
    threeTextOut : function(sender, eventArgs) {this.rootCanvas.findName("text_three_out").begin();},
       
    fourGrow : function(sender, eventArgs) {this.rootCanvas.findName("thumb_four_grow").begin();},
    fourShrink: function(sender, eventArgs) {this.rootCanvas.findName("thumb_four_shrink").begin();},
    fourTextIn : function(sender, eventArgs) {this.rootCanvas.findName("text_four_in").begin();}, 
    fourTextOut : function(sender, eventArgs) {this.rootCanvas.findName("text_four_out").begin();},
    
    fiveGrow : function(sender, eventArgs) {this.rootCanvas.findName("thumb_five_grow").begin();},
    fiveShrink: function(sender, eventArgs) {this.rootCanvas.findName("thumb_five_shrink").begin();},
    fiveTextIn : function(sender, eventArgs) {this.rootCanvas.findName("text_five_in").begin();}, 
    fiveTextOut : function(sender, eventArgs) {this.rootCanvas.findName("text_five_out").begin();},
    
    
    
    outlineIn : function(sender, eventArgs) {this.rootCanvas.findName("outline_in").begin();},
    outlineOut : function(sender, eventArgs) {this.rootCanvas.findName("outline_out").begin();}
    
}