var eventAdded = 0;
var count = 0;
var arr = [];  	
var arr2 = [];

//play image video  	
function Play(centreSize) {
    //select the correct media icons
    ResetImageGalleryStatus();
    swapPanelIcons('img360Video','../images/icon-360-video-hover.png');
    $("#img360Video").addClass("IconSelected");
        
    //hide container flash
    $("#containerFlash").addClass("HiddenDiv");
    document.getElementById('containerFlash').innerHTML = '';
    //document.getElementById('btnPause').src = '../Images/pause-A.jpg';
   
    document.getElementById('btnPlay').src = '../Images/pause-B.jpg';
   // document.getElementById('btnPlay').src = '../Images/play-B.jpg';
    document.getElementById('btnInteract').src = '../Images/interact-A.jpg';
    
    count += 1;    
    if (count > 1)
    {
        return;
    }    
    
    if (arr[0] != null)
        $("#containerVideo").removeClass("HiddenDiv");    
		
    $("#imgVideo").threesixty({ images: arr, method: 'click', 'cycle': 1, direction: "forward" });
    
   
}

function Stop() 
{
    clearInterval(timerID);
    $("#imgVideo").unbind('click');            
    timerID = 0;
    eventAdded = 1;
    count = 0;
}

function Move()
{
    document.getElementById('btnPlay').src = '../Images/play-A.jpg';
   // document.getElementById('btnPause').src = '../Images/pause-A.jpg';
    document.getElementById('btnInteract').src = '../Images/interact-B.jpg';
    
    document.getElementById('imgVideo').style.cursor = 'e-resize';
    
	$("#imgVideo").threesixtyMove({images:arr2, method:'mousemove', 'cycle':2, direction:"backward"});;
	
	previousPosition = position;	
}

function StopMove(){
    document.getElementById('btnPlay').src = '../Images/play-B.jpg';
   // document.getElementById('btnPause').src = '../Images/pause-B.jpg';
    document.getElementById('btnInteract').src = '../Images/interact-A.jpg';
    $("#imgVideo").unbind('mousemove');  
    document.getElementById('imgVideo').style.cursor = 'default';   
}

function CheckPlay()
{
    document.getElementById('btnPlay').src = '../Images/play-B.jpg';
    //document.getElementById('btnPause').src = '../Images/pause-A.jpg';
    document.getElementById('btnInteract').src = '../Images/interact-A.jpg';
    
    if (eventAdded == 0) {
        eventAdded = 1;
        $("#imgVideo").click();       
    } else if (timerID == 0 && eventAdded==1) { 
        Play();
        $("#imgVideo").click();
    }else if (eventAdded==1 && timerID > 0)
    {
        Stop();  
    }
}

//play flash video
function PlayFlashVideo(filePath)
{        
    ResetVideoValue();
    //select the correct media icons
    ResetImageGalleryStatus();
    swapPanelIcons('imgHandBracVideo','../images/icon-hand-model-bracelet-hover.png');
    swapPanelIcons('imgHandVideo','../images/icon-hand-model-hover.png');
    $("#imgHandBracVideo").addClass("IconSelected");
    $("#imgHandVideo").addClass("IconSelected");
    
    //play flash video
    $("#imgVideo").attr("src","");  
    ShowLoading('loading_video');
    $("#bigPicture_Container").removeClass("HiddenDiv");           
    //show thumb container
   // $("#contentThumbVideo").removeClass("HiddenDiv");   
    //show flash container            
    $("#containerFlash").removeClass("HiddenDiv");                       
    
    document.getElementById('containerFlash').innerHTML = '';

    //set container in tag A for the flash player
    document.getElementById('containerFlash').innerHTML = '<a ' +  
			                                              'style="margin-left:80px;display:block;width:400px;height:330px"' +  
			                                              'id="playerFlash">' + 
		                                                  '</a>';
    
    flowplayer("playerFlash","../Flash/flowplayer-3.2.5.swf",{
            // product key from your account
	        key: '#$79fa5adfc3f90158577',
            clip:{	            
	            autoPlay: true, 
	            autoBuffering: true,
	            accelerated: false,
	            url: filePath,	            
	            loop: true,
	            onBegin: function () {
                    // make play button hidden
                    this.getPlugin("play").css({opacity: 0});                    
                  }	            
                },//for looping
                onFinish: function () { this.play(); } ,
                onBeforeFinish: function() {
                    // loop to the first clip
                    this.play(0);
                    // return false so that the player will not do anything it
                    // normally does with this event
                return false; },
                    plugins: { 
                        controls: {
					            // the only required property
			                    url: '../Flash/flowplayer.controls-3.2.3.swf',			               
		                        // which buttons are visible and which are not?
		                        play:true,
		                        volume:false,
		                        mute:false,
		                        time:false,
		                        stop:true,
		                        playlist:false,
		                        fullscreen:false
			            }
                    }
            }
        );    
	
    HideLoading('loading_video');
    
}

function PlayVideo(isFlash,imageArr,flashPath)
{
    // reset defaul value for the video
    ResetVideoValue();
    
    if (isFlash)
        PlayFlashVideo(flashPath);
    else
    {  
        //remove the images from the body
         $("[id*=imageVideo]").remove();          

        arr = new Array();
        arr2 = new Array();         
        
        //populate the array for the image video
        ShowLoading('loading_video');
        var ctr=0; 
        for(var i=0;i<imageArr.length;i++)
        {
            var imgPath = imageArr[i].UrlPath;
            //array for play
            arr.push(imgPath);
            //array for interact
            arr2.push(imgPath);
            //load the images         
	        var o =$("<img>").attr("src",imgPath).attr("id","imageVideo" + i);		
	        $("body").append(o); o.hide();
	        ctr+=1;
        }
        
        setTimeout(function()
            {StartVideo();
            },2000);
        }
}

function StartVideo()
{
    HideLoading('loading_video');
    //reset start position
    z = 0;
    Play();    
}

//Gets the videos for a product and create the thumbnails
function GetVideos()
{  
    var flashVideoNotFound =  false;
    //if containerVideo is already visible i don't load again the images
    if (!$("#containerVideo").hasClass("HiddenDiv"))
        return;
    
    //ShowLoading('loading_video');
    
    // reset defaul value for the video    
    ResetVideoValue();
    
    //hide all the video thumbnails
    for(var i=0;i<6;i++)
    {
        document.getElementById('thumbVideo_' + i).style.display = 'none';
    }
    
    var currSubCatId = 0;
    if (currentlySelectedItem != null && currentlySelectedItem != undefined)
        currSubCatId = currentlySelectedItem.SingleObject.SubCategoryId;
    else
        return;
          
    document.getElementById('videoTab').style.display = 'inline';  
    //check if there are flash video and show the thumbnail
    Website.WebServices.WebService.GetFlashVideo(GetCookie(), 
    function(result)
    {               
        //put these in
        var videos = eval('(' + result + ')');      
        
        //i have flash video        
        if (videos.ObjectCollection != null && videos.ObjectCollection.length > 0)
        {         
            for(var i=0;i<videos.ObjectCollection.length;i++)
            {                
                //i need to start from 2(use thumb1 and thum2 for 360)
                var count = i + 2;
                //we can have max 6 thumbs
                if (count<=5)
                {   
                    var imgId = 'imgThumbVideo_' + count;
                    var li = document.getElementById('thumbVideo_' + count);
                    li.style.display = 'inline-block';
                                
                    var thumb = document.getElementById(imgId);
                    var imgThumb = '';
                    if(currSubCatId==10 || currSubCatId==11 || currSubCatId==22 || currSubCatId==27) //earrings
                        imgThumb='../images/earring-video.jpg';
                    else if (currSubCatId==8 || currSubCatId==9 || currSubCatId==26) //necklaces
                        imgThumb='../images/necklace-video.jpg';
                    else if (videos.ObjectCollection[i].CentreSize == null)
                    {
                        if (currSubCatId==13)
                            imgThumb='../images/thumbnail-handmodel-bracelet-default.png';
                        else
                            imgThumb = '../images/video-handmodel-default.png';
                    }
                    else if (videos.ObjectCollection[i].CentreSize == 'small' )
                        imgThumb = '../images/video-handmodel-0-5.png';
                    else if (videos.ObjectCollection[i].CentreSize == 'big' )  
                        imgThumb = '../images/video-handmodel-1.png';
                    
                    thumb.setAttribute('src',imgThumb);
                    thumb.setAttribute('alt','');
                    thumb.setAttribute('title','Flash');     
                   // var Path = videos.ObjectCollection[i].GraphicFilePath ;
                    li.Path = videos.ObjectCollection[i].GraphicFilePath ;
                    li.onclick = function()
                    {
                        SelectVideoThumb(this);
                        PlayVideo(true,null,this.Path);
                    }                                           
                }
            }    
            //show hand icon and attach video onclick
            //bracelets icon
            if (currSubCatId==13)
            {
                document.getElementById('liHandBracVideo').style.display = 'block';
                document.getElementById('liHandBracVideo').onclick = function()
                { 
                    RemoveZoom(true);
                    tabSwitch_2(2, 2, 'tab_', 'content_');
                    //select first video for hand model              
                    SelectVideoThumb(document.getElementById('thumbVideo_2'));
                    PlayVideo(true,null,videos.ObjectCollection[0].GraphicFilePath); 
                }   
            }else
            {
                document.getElementById('liHandVideo').style.display = 'block';
                document.getElementById('liHandVideo').onclick = function()
                {   
                    RemoveZoom(true);
                    tabSwitch_2(2, 2, 'tab_', 'content_');
                    //select first video for hand model              
                    SelectVideoThumb(document.getElementById('thumbVideo_2'));
                    PlayVideo(true,null,videos.ObjectCollection[0].GraphicFilePath); 
                }         
            }
        }//wedding band
        else if (videos.SingleObject != null && videos.SingleObject !=undefined)
        {           
            var imgId = 'imgThumbVideo_2';
            var li = document.getElementById('thumbVideo_2');
            li.style.display = 'inline-block';
                        
            var thumb = document.getElementById(imgId);
            thumb.setAttribute('src','../images/video-handmodel-default.png');
                
            thumb.setAttribute('alt','');
            thumb.setAttribute('title','Flash');           
               
            li.onclick = function()
            {
                SelectVideoThumb(this);
                PlayVideo(true,null,videos.SingleObject.GraphicFilePath);
            }       
            
            //show hand icon and attach video onclick
             //bracelets icon
            if (currSubCatId==13)
            {
                document.getElementById('liHandBracVideo').style.display = 'block';
                document.getElementById('liHandBracVideo').onclick = function()
                { 
                    RemoveZoom(true);
                    tabSwitch_2(2, 2, 'tab_', 'content_');
                    //select first video for hand model              
                    SelectVideoThumb(document.getElementById('thumbVideo_2'));
                    PlayVideo(true,null,videos.SingleObject.GraphicFilePath); 
                }
            }else
            {
                document.getElementById('liHandVideo').style.display = 'block';
                document.getElementById('liHandVideo').onclick = function()
                { 
                    RemoveZoom(true);
                    tabSwitch_2(2, 2, 'tab_', 'content_');
                    //select first video for hand model              
                    SelectVideoThumb(document.getElementById('thumbVideo_2'));
                    PlayVideo(true,null,videos.SingleObject.GraphicFilePath); 
                }
            }
        }
        else
        {            
            //flash video not found
            flashVideoNotFound = true;
            //remove hand icon
            document.getElementById('liHandVideo').style.display = 'none';        
            document.getElementById('liHandBracVideo').style.display = 'none';    
        }
        
        //get all the images for the video
        Website.WebServices.WebService.GetVideos(GetCookie(), 
        function(result)
        {   
             $("#imgVideo").attr("src","");         
            //put these in
            var photos = eval('(' + result + ')');
            
            //remove thumb for video
            if (photos.SingleObject == null || photos.SingleObject ==undefined)
            {            
                //HideLoading('loading_video'); 
                //flash video and image video not found
                if (flashVideoNotFound)
                {
                    //remove hand icons
                    document.getElementById('li360Video').style.display = 'none';    
                    document.getElementById('liHandVideo').style.display = 'none';   
                    document.getElementById('liHandBracVideo').style.display = 'none';    
                    $("#contentThumbVideo").addClass("HiddenDiv");
                    //show the message 'no video found'
                    //$("#NoVideo").removeClass("HiddenDiv");            
                }else //no 'image video' but i have flash video
                {
                    $("#contentThumbVideo").removeClass("HiddenDiv");     
                }
            }else
            {
                $("#contentThumbVideo").removeClass("HiddenDiv");        
                
                //default videoSet 
                if (photos.SingleObject.Default !=null && photos.SingleObject.Default !=undefined)
                {                    
                    //show thumbnail for default video
                    var imgId = 'imgThumbVideo_0';
                    var li = document.getElementById('thumbVideo_0');
                    li.style.display = 'inline-block';
                    var arrImage = new Array();
                    arrImage = photos.SingleObject.Default;
                    
                    var thumb = document.getElementById(imgId);
                     //bracelets 
                    if (currSubCatId==13)
                        thumb.setAttribute('src','../images/thumbnail-360-bracelet-default.png');
                    else
                        thumb.setAttribute('src','../images/video-ring-360-default.png');
                        
                    thumb.setAttribute('alt','');
                    thumb.setAttribute('title','Video');           
                    li.images = arrImage;
                    li.onclick = function()
                    {
                        SelectVideoThumb(this);
                        PlayVideo(false, this.images, '');
                    }                   
                     //show 360 icon and attach video onclick
                    document.getElementById('li360Video').style.display = 'block';
                    document.getElementById('li360Video').onclick = function()
                    { 
                        RemoveZoom(true);
                        tabSwitch_2(2, 2, 'tab_', 'content_');
                        //select first video for 360              
                        SelectVideoThumb(document.getElementById('thumbVideo_0'));
                        PlayVideo(false,arrImage,''); 
                    }
                
                }//i have image video in both size
                else if (photos.SingleObject.Small!= null && photos.SingleObject.Small.length != 0 && photos.SingleObject.Small !=undefined && photos.SingleObject.Big.length != 0  && photos.SingleObject.Big !=undefined && photos.SingleObject.Big!= null)
                {                    
                     //show thumbnail for small video
                    var imgId = 'imgThumbVideo_0';
                    var li = document.getElementById('thumbVideo_0');
                    li.style.display = 'inline-block';
                    var arrSmall = new Array();
                    arrSmall = photos.SingleObject.Small;
                    
                    var thumb = document.getElementById(imgId);
                    thumb.setAttribute('src','../images/video-ring-360-0-5.png');
                    thumb.setAttribute('alt','');
                    thumb.setAttribute('title','Video');           
                        
                    li.images = arrSmall;
                    li.onclick = function()
                    {
                        SelectVideoThumb(this);
                        PlayVideo(false, this.images, '');
                    }
                    
                    //show 360 icon and attach video onclick
                    document.getElementById('li360Video').style.display = 'block';
                    document.getElementById('li360Video').onclick = function()
                    { 
                        RemoveZoom(true);
                        tabSwitch_2(2, 2, 'tab_', 'content_');
                        //select first video for 360              
                        SelectVideoThumb(document.getElementById('thumbVideo_0'));
                        PlayVideo(false,arrSmall,''); 
                    }
                    
                     //show thumbnail for big video
                    var imgId = 'imgThumbVideo_1';
                    var li = document.getElementById('thumbVideo_1');
                    li.style.display = 'inline-block';
                    var arrBig = new Array();
                    arrBig = photos.SingleObject.Big;
                    var thumb = document.getElementById(imgId);
                    thumb.setAttribute('src','../images/video-ring-360-1.png');
                    thumb.setAttribute('alt','');
                    thumb.setAttribute('title','Video');           
                   
                    li.images = arrBig;
                    li.onclick = function()
                    {
                        SelectVideoThumb(this);
                        PlayVideo(false, this.images, '');
                    }
                
                }//only small size video
                else if (photos.SingleObject.Small!= null && photos.SingleObject.Small.length != 0  && photos.SingleObject.Small !=undefined)
                {                
                    //show thumbnail for video
                    var imgId = 'imgThumbVideo_0';
                    var li = document.getElementById('thumbVideo_0');
                    li.style.display = 'inline-block';
                    var arrSmall = new Array();
                    arrSmall = photos.SingleObject.Small;            
                    var thumb = document.getElementById(imgId);
                    thumb.setAttribute('src','../images/video-ring-360-0-5.png');
                    thumb.setAttribute('alt','');
                    thumb.setAttribute('title','Video');           
                   
                    li.images = arrSmall;
                    li.onclick = function()
                    {
                        SelectVideoThumb(this);
                        PlayVideo(false, this.images, '');
                    }
                    
                    //show 360 icon and attach video onclick
                    document.getElementById('li360Video').style.display = 'block';
                    document.getElementById('li360Video').onclick = function()
                    { 
                        RemoveZoom(true);
                        tabSwitch_2(2, 2, 'tab_', 'content_');
                        //select first video for 360              
                        SelectVideoThumb(document.getElementById('thumbVideo_0'));
                        PlayVideo(false,arrSmall,''); 
                    }
                }//only big size video
                else if (photos.SingleObject.Big!= null && photos.SingleObject.Big.length != 0  && photos.SingleObject.Big !=undefined)
                {
                    //show thumbnail for video
                    var imgId = 'imgThumbVideo_0';
                    var li = document.getElementById('thumbVideo_0');
                    li.style.display = 'inline-block';
                    var arrBig = new Array();
                    arrBig = photos.SingleObject.Big;     
                    var thumb = document.getElementById(imgId);
                    thumb.setAttribute('src','../images/video-ring-360-1.png');
                    thumb.setAttribute('alt','');
                    thumb.setAttribute('title','Video');           
                       
                    li.images = arrBig;
                    li.onclick = function()
                    {
                        SelectVideoThumb(this);
                        PlayVideo(false, this.images, '');
                    }
                    
                    //show 360 icon and attach video onclick
                    document.getElementById('li360Video').style.display = 'block';
                    document.getElementById('li360Video').onclick = function()
                    { 
                        RemoveZoom(true);
                        tabSwitch_2(2, 2, 'tab_', 'content_');
                        //select first video for 360              
                        SelectVideoThumb(document.getElementById('thumbVideo_0'));
                        PlayVideo(false,arrBig,''); 
                    }
                }else
                {         
                    //flash video and image video not found
                    if (flashVideoNotFound)
                    {
                        document.getElementById('li360Video').style.display = 'none';
                        document.getElementById('liHandVideo').style.display = 'none';
                        document.getElementById('liHandBracVideo').style.display = 'none';    
                        $("#contentThumbVideo").addClass("HiddenDiv");
                        document.getElementById('videoTab').style.display = 'none';                        
                        //show the message 'no video found'
                        //$("#NoVideo").removeClass("HiddenDiv");            
                    }else //no 'image video' but i have flash video
                    {                       
                        $("#contentThumbVideo").removeClass("HiddenDiv");  
                    }
                }
                
            }          
            
            //HideLoading('loading_video');  
            
        },
        function(error)
        {
             HideLoading('loading_video');  
        });
    },
    function(error)
    {          
    });
}