<%@ page session="false" %>
<div ng-controller="updateAccountCtrl" ng-intro-options="IntroOptions" ng-intro-method="CallMe"
     ng-intro-oncomplete="CompletedEvent" ng-intro-onexit="ExitEvent"
     ng-intro-onchange="ChangeEvent" ng-intro-onbeforechange="BeforeChangeEvent" ng-init="init()">
	 <!--tour post-step="postStepCallback()" post-tour="postTourCallback()" step="currentStep" class="ng-scope"-->
	 <div ng-controller="TourCtrl">
	<tour step="currentStep" post-tour="postTourCallback()" post-step="postStepCallback()">
	  <div id="header">
		<ul class="menu-acc">
			<li><a href="#"><img src="img/res/images/inbox.png" /></a></li>
			<li><a href="#"><img src="img/res/images/acount_notify.png" /></a></li>
			<li class="user-avatar"><span>{{user.firstName}} {{user.lastName}}</span><img src="img/res/images/avatar.jpg" /></li>
			<li><a href="#"><img src="img/res/images/acount_setting.png" /></a></li>
		</ul>
	</div>
	<div > 
	 
	<!-- overlay -->
	<div id="overlay" ng-show="showOverlay">

	</div>
    <div id="bookDetailsOverlay" class="bookDetails-overlay" ng-show="showBookDetailsOverlay"></div>

    <div id="paymentInProgressOverlay" class="paymentInProgress-overlay" ng-show="showPaymentInProgress">
        <div class="paymentInProgressContainer">
            <span >We are processing your payment now. Please wait...</span>
            <div class="paymentInProgress"><img src="../img/loading.gif"></div>
        </div>
    </div>

    <div id="errorOverlay" class="paymentError-overlay" ng-show="paymentError">
        <a class="purchaseErrorCloseButton" ng-click="paymentError=false" ></a>
        <div class="paymentErrorContainer">
            <span >Oops... There seems to be a problem. Please enter your details again.</span>
            <div class="errorPaymentTryAgain"><a class="mindinkButton error" ng-click="paymentError=false">TRY AGAIN</a></div>
        </div>
    </div>

	<div id="welcome-box" ng-show="showWelcome" class="over-overlay">
		<div class="welcome-message">
			<div class="upper-case-text" >Hi {{user.firstName}}</div>
			<div class="welcome-message-text"> Congratulations on joining <br> 
			MINDink. Let's set up your <br>
			account.<br>
			</div>
			<button ng-click="getStarted()" class=" overlay-btn save-and-next blue welcome-button" >GET STARTED</button>
		</div>
	</div>
	
	<div id="container" >	
		
		<div id="update-account-left">
			<div class="left-container">
				<div class="preferences-logo-container" >
					<img class="preferences-logo over-overlay" src="img/logo.png" ng-click="books()">
				</div>
				<div id="step2" class="name-tag" ng-class="{true : 'over-overlay', false : 'under-overlay'}[nameTagZIndex]" ng-click="changeName()">
					<br>
					<h3>{{user.firstName}} {{user.lastName}}</h3>
				</div>
				<div class="preference-vertical-rule">

				</div>
				<div  class="preference-menu-uni">

					<!-- no uni selected -->
					<div id="step3" class="preference-menu-uni-button" ng-click="chooseUni()" ng-hide="hasUni" ng-class="{true : 'over-overlay relative-position', false : 'under-overlay'}[uniZIndex]">
						<img src="../../img/uni.png" class="img.circle">
					</div>
					<!-- uni selected -->
					<div ng-style="uniCarousel" class="university-select-carousel" ng-show="hasUni" ng-class="{true : 'over-overlay relative-position', false : 'under-overlay'}[uniZIndex]">
						<div ng-repeat="registeredUniversity in registeredUniversities" class="preference-menu-uni-button-selected" >
							<div ng-click="activateUni(registeredUniversity.id)"  ng-hide="activeUni == registeredUniversity.id" class="uni-menu-overlay"></div>
							<img ng-src="/content/mindink/universities/{{registeredUniversity.id}}/logo/small" ng-click="activateUni(registeredUniversity.id)" alt="{{registeredUniversity.id}}">
						</div>
					</div>


				</div>
				<ul class="preference-menu">
					<li ng-class="{true : 'over-overlay relative-position', false : 'under-overlay'}[subjectZIndex]">
						<div id="step4" class="preference-button-text"  ng-click="subjects()" >
							<div class="preference-button" ng-class="{true: 'selected-subject-background', false:'subject-background'}[showAddSubjects]"></div> <div class="preference-button-text-child">SUBJECTS</div>
						</div>
						
					</li>
					<li ng-class="{true : 'over-overlay relative-position', false : 'under-overlay'}[bookZIndex]">
						<div class="preference-button-text" ng-click="books()">
							<div class="preference-button" ng-class="{true: 'selected-book-background', false:'book-background'}[showAddBooks]"></div> <div class="preference-button-text-child">BOOKS</div>
						</div>
					</li>
					<li class="preference-logout-button">
						<div class="preference-button-text preference-bottom-button" ng-click="signout()">
							<div class="preference-button logout-background"></div> <div class="preference-button-text-child">LOGOUT</div>
						</div>
					</li>
				</ul>
				
				
			</div>
		</div>	
		<div id="step1" ng-style="{'background-image': !!preUpload && fileuploadMsgType != 'errorMsg' && 'url(' + preUpload + ')' || userId != undefined && 'url(/content/users/' + userId + '/avatar/large)' || 'url(/content/users/userId/avatar/large)'}" class = "profile-pic" ng-click="profile()" ng-class="{true : 'over-overlay', false : 'under-overlay'}[nameTagZIndex || picZIndex]">
		</div>
		<div class="pic-overlay" ng-show="nameTagZIndex" ng-class="{true : 'over-overlay', false : 'under-overlay'}[nameTagZIndex]"></div>
		<div id="update-account-right">
			<div class="right-container">
				
				<!-- Add profile pic -->

				<div class="add-profile-pic" ng-show="showAddProfilePic" ng-class="{true : 'over-overlay', false : 'under-overlay'}[picZIndex]">
					<div class="upload-pic">

						<div class="messageBox" ng-show="!!fileuploadMsg">
                            <div class="{{fileuploadMsgType}}">
                                <span class="fadeInLeft animated">
                                    {{fileuploadMsg}}
                                </span>
                            </div>
                        </div>

                        <form ng-submit="updatePic()">
	                         Upload a file:<br>
	                        <input class="upload-input" type="file" file-model="myFile" fileread="preUpload">
	                        <button class="overlay-btn save-and-next blue" >SAVE AND NEXT</button> 
                        </form>
                        <div class="skip-pic-upload" ng-click="skipPicUpload()">cancel</div>
					</div>
					<!--<button class="overlay-btn save-and-next" ng-click="updatePic()" >SAVE AND NEXT</button>-->
				</div>
			
				<!-- Update name -->
				
				<!-- <div class="preference-arrow name-arrow" ng-show="showUpdateName">
				</div> -->
				<div  >
				<form  ng-submit="updateName(user)" ng-show="showUpdateName">
					<input required  ng-class="{true : 'over-overlay preference-text-input-overlay', false : 'preference-text-input-no-overlay'}[showOverlay]" ng-model="user.firstName" type="text" autofocus id="update-first-name" placeholder="First name" class="preference-text-input">
					<input required ng-class="{true : 'over-overlay preference-text-input-overlay', false : 'preference-text-input-no-overlay'}[showOverlay]" ng-model="user.lastName" type="text" autofocus id="update-last-name" placeholder="Last name" class="preference-text-input">
					<button class="overlay-btn save-and-next" ng-class="{true:  'blue', false: 'grey' }[user.firstName != null && user.lastName != null]" ng-disabled="{{user.firstName != null || user.lastName != null}}">SAVE AND NEXT</button>
				</form>
				{{master}}
				</div>
			
				<!-- <div class="preference-arrow uni-arrow" ng-show="showUniArrow">
				</div> -->
				
					<button class="overlay-btn save-and-next" ng-class="{true: 'blue', false: 'grey' }[hasUni]" ng-disabled="!hasUni" ng-show="showUniArrow" ng-click="saveAndNextUni()">SAVE AND NEXT</button>
				
				<!-- Add unis -->
				<div class="add-uni" ng-show="showAddUni" ng-class="{true : 'over-overlay', false : 'under-overlay'}[uniZIndex]">
					<input placeholder="Search universities" autofocus ng-model="search" ng-class="{true : 'over-overlay preference-text-input-overlay', false : 'preference-text-input-no-overlay '}[showOverlay]" type="text" id="university-name" class="ng-pristine ng-valid preference-text-input">
					<!-- <img class="uni-search-icon" src="img/Magnifier.png"> -->
					<div class="tour2">
						<span tourtip="Lets find the university you go to."
							tourtip-next-image1="img/searchs.png"
							tourtip-next-image2="img/university.png"
							tourtip-next-heading="Search : "
							tourtip-next-line="To Find your university type the university name into our search bar. Your university will appear in your search results below "
							tourtip-next-heading1="My Universities : "
							tourtip-next-line1=" Once your university has appeared in your search results, simply hover over the logo with your cursor and click the UP arrow to add it in your account."
							tourtip-step="1"
							tourtip-next-label="Close"
							tourtip-placement="right"
							tourtip-offset="520">
						</span>
					</div>
					<div class ="container" ng-class="{true : 'over-overlay', false : 'under-overlay'}[uniZIndex]">
					<div class="itemsList">
	                    	<div class="listHeader clearfix" ng-class="{true : 'white', false : ''}[showOverlay]">
	                    		<div class="listTitle floatLeft">MY UNIVERSITIES</div>
								<div class="tour1">
									<span tourtip="Welcome! Lets make life a little easier by setting up your account."
										tourtip-next-image1="img/university.png"						tourtip-next-image2="img/subjects.png"
										tourtip-next-image3="img/books.png"
										tourtip-next-image4="img/classmate.png"
										tourtip-next-heading="University : "
										tourtip-next-line=" You can add up to two universities to your account. You can find your university by searching above"
										tourtip-next-heading1="Subjects : "
										tourtip-next-line1=" Simply search for your subjects and add them to your account by clicking on the 'UP' arrow"
										tourtip-next-heading2=" Books : "										
										tourtip-next-line2= " We automatically add the textbooks you need for your 'My Books' account. Here is where you can preview and purchase your textbooks, with one click"
										tourtip-next-heading3="Classmates :"
										tourtip-next-line3= " Follow your classmates to stay connected and easily share notes and study"
										tourtip-step="0"
										tourtip-next-label="Continue Tour"
										tourtip-placement="right"
										tourtip-offset="40">
									</span>
								</div>
	                    		<div class="arrowsContainer" ng-hide="isTouch && false">

		                    			<a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-left fa-2x arrow"
                                            ng-mousedown="freeScrollCarousel('myUniList', 'myUniList', 'backward')"
                                            ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
                                        </a>

                                        &nbsp;&nbsp;&nbsp;

                                        <a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-right fa-2x arrow"
                                            ng-mousedown="freeScrollCarousel('myUniList', 'myUniList', 'forward')"
                                            ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
                                        </a>

		                        </div>
	                    	</div>
                            <div id="myUniList" class="carouselList2 uni" ng-class="{true : 'scrollable', false : ''}[isTouch || true]" anyaxis-scroll>
                                <ul ng-style="myUniStyle" resize widthratio="1">
                                    <li ng-repeat="registeredUniversity in registeredUniversities | orderBy:'name'" ng-style="liWidth" on-finish-render="myUniList" update-on-resize="myUniList"
                                            ng-mouseenter="subjectLayer='itemLayerHover';overlayNameShort='overlayNameShortHover';overlayNameLong='overlayNameLongHover';"
                                            ng-mouseleave="subjectLayer='';overlayNameShort='overlayNameShortNormal';overlayNameLong='overlayNameLongNormal';">
                                        <figure class="carousel-image">
                                            <div class="carousel-image-wrapper">
                                                <img class="uniAndBookImg" ng-src="/content/mindink/universities/{{registeredUniversity.id}}/logo/large" alt="{{uregisteredUniversity.name}}">
                                            </div>
                                            <figcaption>
                                                <div ng-class="subjectLayer" class="nameLayer">
                                                    <div ng-class="overlayNameShort" class="overlayName truncate overlayNameShortNormal">{{registeredUniversity.name}}</div>
                                                    <div ng-class="overlayNameLong" class="overlayName overlayNameLongNormal">{{registeredUniversity.name}}</div>
                                                    <div class="subjectHoverAction">
                                                        <div class="textHolder">
                                                            <div ng-class="addText" style="display: none;" class="subjectHoverActionText">Remove</div>
                                                        </div>
                                                        <div class="buttonHolder">
                                                            <div class="remove" ng-mouseenter="addText='show'" ng-mouseleave="addText='hide'" ng-click="deleteUniversity(registeredUniversity.id)"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </figcaption>
                                        </figure>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="itemsList">
                        	<div class="listHeader clearfix" ng-class="{true : 'white', false : ''}[showOverlay]">
                        		<div class="listTitle floatLeft">OTHER UNIVERSITIES</div>
                        		<div class="arrowsContainer" ng-hide="isTouch && false">

                        		    <a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-left fa-2x arrow"
                                        ng-mousedown="freeScrollCarousel('allUniList', 'allUniList', 'backward')"
                                        ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
                                    </a>

                                    &nbsp;&nbsp;&nbsp;

                                    <a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-right fa-2x arrow"
                                        ng-mousedown="freeScrollCarousel('allUniList', 'allUniList', 'forward')"
                                        ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
                                    </a>

                        		</div>
                        	</div>

                            <div id="allUniList" class="carouselList2 uni" ng-class="{true : 'scrollable', false : ''}[isTouch || true]" anyaxis-scroll>
                                <ul ng-style="allUniStyle" resize widthratio="1">
                                    <li ng-repeat="university in universities | filter:search | orderBy:'name'" ng-style="liWidth" on-finish-render="allUniList" update-on-resize="allUniList"
                                            ng-mouseenter="subjectLayer='itemLayerHover';overlayNameShort='overlayNameShortHover';overlayNameLong='overlayNameLongHover';"
                                            ng-mouseleave="subjectLayer='';overlayNameShort='overlayNameShortNormal';overlayNameLong='overlayNameLongNormal';">
                                        <figure class="carousel-image">
                                            <div class="carousel-image-wrapper">
                                                <img class="uniAndBookImg" ng-src="/content/mindink/universities/{{university.id}}/logo/large" alt="{{university.name}}">
                                            </div>
                                            <figcaption>
                                                <div ng-class="subjectLayer" class="nameLayer">
                                                <div ng-class="overlayNameShort" class="overlayName truncate overlayNameShortNormal">{{university.name}}</div>
                                                <div ng-class="overlayNameLong" class="overlayName overlayNameLongNormal">{{university.name}}</div>
                                                <div class="subjectHoverAction">
                                                    <div class="textHolder">
                                                        <div ng-class="addText" style="display: none;" class="subjectHoverActionText">Add</div>
                                                    </div>
                                                    <div class="buttonHolder">
                                                        <div class="add" ng-mouseenter="addText='show'" ng-mouseleave="addText='hide'" ng-click="addUniversity(university.id)"></div>
                                                    </div>
                                                </div>
                                                </div>
                                            </figcaption>
                                        </figure>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
				</div>
				<!-- Add subjects -->
				<!-- leaving arrows incase minds change -->
				<div class="preference-arrow subject-arrow" ng-show="showSubjectArrow">
				</div>
				<button class="overlay-btn save-and-next blue" ng-click="saveAndNextSubject()" ng-show="subjectZIndex" >SAVE AND NEXT</button>
				<!-- <div class="preference-arrow book-arrow" ng-show="showBookArrow">
				</div> -->
				<button class="overlay-btn save-and-next blue" ng-click="saveAndNextBook()" ng-show="bookZIndex" >SAVE AND NEXT</button>

                <div class="add-subject" ng-show="showAddSubjects">
                    <input id="subject-name" type="text" ng-model="subSearch" placeholder="Search subjects" autofocus ng-class="{true : 'preference-text-input-overlay', false : 'preference-text-input-no-overlay'}[showOverlay]" class="preference-text-input">
					
					<div class="container" ng-class="{true : 'over-overlay', false : 'under-overlay'}[subjectZIndex]">
                        <div class="itemsList">
	                    	<div class="listHeader clearfix" ng-class="{true : 'white', false : ''}[showOverlay]">
	                    		<div class="listTitle floatLeft">MY SUBJECTS AT {{registeredUniversities[0].ht}}</div>
	                    		<div class="arrowsContainer" ng-hide="isTouch && false">

		                            <a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-left fa-2x arrow"
                                        ng-mousedown="freeScrollCarousel('mySubjectsList', 'mySubjectsList', 'backward')"
                                        ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
                                    </a>

                                    &nbsp;&nbsp;&nbsp;

                                    <a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-right fa-2x arrow"
                                        ng-mousedown="freeScrollCarousel('mySubjectsList', 'mySubjectsList', 'forward')"
                                        ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
                                    </a>
	                    		</div>
	                    	</div>
                            <div id="mySubjectsList" class="carouselList2 subject" ng-class="{true : 'scrollable', false : ''}[isTouch || true]" anyaxis-scroll>
                                <ul ng-style="mySubjectStyle" resize widthratio="0.5">
                                    <li ng-repeat="subject in registeredSubjects | orderBy:'name'" on-finish-render="mySubjectsList" ng-style="liWidth" update-on-resize="mySubjectsList"
                                            ng-mouseenter="subjectLayer='itemLayerHover';overlayNameShort='overlayNameShortHover';overlayNameLong='overlayNameLongHover';"
                                            ng-mouseleave="subjectLayer='';overlayNameShort='overlayNameShortNormal';overlayNameLong='overlayNameLongNormal';">
                                        <figure class="carousel-image">
                                            <div class="carousel-image-wrapper">
                                                <img ng-src="/content/mindink/subjects/{{subject.id}}/cover/large" alt="{{subject.name}}">
                                            </div>
                                            <figcaption>
                                                <div ng-class="subjectLayer" class="nameLayer">
                                                    <div ng-class="overlayNameShort" class="overlayName truncate overlayNameShortNormal">{{subject.name}}</div>
                                                    <div ng-class="overlayNameLong" class="overlayName overlayNameLongNormal">{{subject.name}}</div>
                                                    <div ng-class="overlayNameLong" class="overlayDesc overlayNameLongNormal">{{subject.subjectNo}}</div>
                                                    <div ng-class="overlayNameLong" class="overlayDesc overlayNameLongNormal">{{subject.semester}}</div>
                                                    <div ng-class="overlayNameLong" class="overlayDesc overlayNameLongNormal">{{subject.year}}</div>
                                                    <div ng-class="overlayNameLong" class="subjectHoverAction overlayNameLongNormal">
                                                        <div class="textHolder">
                                                            <div ng-class="addText" style="display: none;" class="subjectHoverActionText">Remove</div>
                                                        </div>
                                                        <div class="buttonHolder">
                                                            <div class="remove" ng-mouseenter="addText='show'" ng-mouseleave="addText='hide'" ng-click="deleteSubject(subject.id)"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </figcaption>
                                        </figure>
                                    </li>
                                </ul>
								<div class="tour3">
									<span tourtip="Keep everything organized in My Subjects."
										tourtip-next-image1="img/searchs.png"
										tourtip-next-image2="img/university.png"
										tourtip-next-heading="Search : "
										tourtip-next-line="This works the same way as searching for your university. Simple type the subject number or name into our search bar."
										tourtip-next-heading1="My Subjects : "
										tourtip-next-line1="Again, Just hover and click the 'UP' arrow to add a subject in your account. You can also use 'DOWN' arrow to remove subjects from your account"
										tourtip-step="2"
										tourtip-next-label="Close"
										tourtip-placement="right"
										tourtip-offset="10">
									</span>
								</div>
                            </div>
                        </div>
                        <div class="itemsList">
                        	<div class="listHeader" ng-class="{true : 'white', false : ''}[showOverlay]">
                        		<div class="listTitle floatLeft">SUBJECTS AT {{registeredUniversities[0].ht}}</div>
                        		<div class="arrowsContainer" ng-hide="isTouch && false">

	                        		<a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-left fa-2x arrow"
	                        		    ng-mousedown="freeScrollCarousel('allSubjectsList', 'allSubjectStyle', 'backward')"
                                        ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
                                    </a>

	                        		    &nbsp;&nbsp;&nbsp;

	                        		<a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-right fa-2x arrow"
	                        		    ng-mousedown="freeScrollCarousel('allSubjectsList', 'allSubjectStyle', 'forward')"
	                        		    ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
	                        		</a>
                        		</div>
                        	</div>
                            <div id="allSubjectsList" class="carouselList2 subject" ng-class="{true : 'scrollable', false : ''}[isTouch || true]" anyaxis-scroll>
                               <ul ng-style="allSubjectStyle" resize widthratio="0.5">
                                    <li ng-repeat="subject in allSubjects | filter:subSearch | orderBy:'name'" ng-style="liWidth" on-finish-render="allSubjectsList" update-on-resize="allSubjectsList"
                                            ng-mouseenter="subjectLayer='itemLayerHover';overlayNameShort='overlayNameShortHover';overlayNameLong='overlayNameLongHover';"
                                            ng-mouseleave="subjectLayer='';overlayNameShort='overlayNameShortNormal';overlayNameLong='overlayNameLongNormal';">
                                        <figure class="carousel-image">
                                            <div class="carousel-image-wrapper">
                                                <img ng-src="/content/mindink/subjects/{{subject.id}}/cover/large" alt="{{subject.name}}">
                                            </div>
                                            <figcaption>
                                                <div ng-class="subjectLayer" class="nameLayer">
                                                    <div ng-class="overlayNameShort" class="overlayName truncate overlayNameShortNormal">{{subject.name}}</div>
                                                    <div ng-class="overlayNameLong" class="overlayName overlayNameLongNormal">{{subject.name}}</div>
                                                    <div ng-class="overlayNameLong" class="overlayDesc overlayNameLongNormal">{{subject.subjectNo}}</div>
                                                    <div ng-class="overlayNameLong" class="overlayDesc overlayNameLongNormal">{{subject.semester}}</div>
                                                    <div ng-class="overlayNameLong" class="overlayDesc overlayNameLongNormal">{{subject.year}}</div>
                                                    <div ng-class="overlayNameLong" class="subjectHoverAction overlayNameLongNormal">
                                                        <div class="textHolder">
                                                            <div ng-class="addText" style="display: none;" class="subjectHoverActionText">Add</div>
                                                        </div>
                                                        <div class="buttonHolder">
                                                            <div class="add" ng-mouseenter="addText='show'" ng-mouseleave="addText='hide'" ng-click="addSubject(subject.id)"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </figcaption>
                                        </figure>
                                    </li>
                                </ul>
                            </div>
                        </div>
                     </div>
				</div>
				<!-- put books here  -->
				<div ng-show="showAddBooks">
                    <div id="purchaseCompletedSlider" class="purchaseCompletedSlider" ng-class="showPurchaseCompleted" >
                        <div class="puchaseCompletedContainer" ng-style="purchaseCompletedContainerStyle">
                            <div class="purchaseCompletedBlur">
                                    <a class="bookDetailsCloseButton closePosition" ng-class="purchaseClose" ng-click="closePurchaseCompleted();"></a>
                                <div class="purchaseCompletedContent">
                                    <div class="purchasedCompletedText"><span>CONGRATULATION FOR PURCHASING</span></div>
                                    <div class="purchasedCompletedImage"><img ng-src="{{bookDetailsObj.isbn != undefined && '/content/mindink/books/' + bookDetailsObj.isbn + '/cover/small' || ''}} " alt="{{bookDetailsObj.title}}"></div>
                                    <div class="purchasedCompletedButton"><a class="mindinkButton" ng-click="viewBook('/reader/book/' + bookDetailsObj.isbn)">START READING</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                <form name="purchaseForm">
                    <div id="purchaseSlider" class="purchaseSlider" ng-class="showBookDetails" >
                        <a class="bookDetailsCloseButton closePosition" ng-class="purchaseClose" ng-click="closeBookDetails();" ></a>
                        <div class="bookDetails">
                            <div class="bookDetailsTop">
                                <div class="bookCover">
                                    <img ng-src="{{bookDetailsObj.isbn != undefined && '/content/mindink/books/' + bookDetailsObj.isbn + '/cover/small' || ''}} " alt="{{bookDetailsObj.title}}">
                                </div>
                                <div class="bookDetailsTopContent">
                                    <div class="bookDetailsTitle">{{bookDetailsObj.title}}</div>
                                    <div class="bookDetailsSubtitle">{{bookDetailsObj.subtitle}}</div>
                                    <div class="bookDetailsAuthor">Author: {{bookDetailsObj.author}}</div>
                                    <div class="bookDetailsIsbn">ISBN: {{bookDetailsObj.isbn}}</div>
                                    <div class="bookDetailsPrice">PRICE: {{bookDetailsObj.price}} <span class="gst">incl. GST</span> </div>
                                    <div class="bookDetailsButtonsContainer">
                                        <a class="mindinkButton blue" ng-click="slideBookPurchaseDetails()">BUY</a>&nbsp;&nbsp;<a  ng-click="viewBook('/reader/preview/' + bookDetailsObj.isbn)" class="mindinkButton black bookPreview">PREVIEW</a>
                                    </div>
                                </div>
                            </div>
                            <div class="bookDetailsDescHeader">DESCRIPTION:</div>
                            <div class="bookDetailsDescContent">
                                <div class="bookDetailsDesc" ng-class="bookDetailsDescStyle">{{bookDetailsObj.description}}</div>

                            </div>
                            <div class="bookDetailsbookDetailsDescSeeAll floatRight">
                                <a ng-show="toggleBookDesc" ng-click="toggleBookDetailsDesc()">Hide</a>
                                <a ng-show="!toggleBookDesc" ng-click="toggleBookDetailsDesc()">See all</a>
                            </div>
                            <div class="bookDetailsTextbookHeader">SUBJECTS USING THIS TEXTBOOK:</div>
                            <div ng-repeat="subject in bookDetailsObj.subjects">
                                <div class="sameSubjecctBook">{{subject.sujectNo}}&nbsp;&nbsp;&nbsp;{{subject.sujectName}}</div>
                            </div>
                        </div>
                        <div class="paymentSparater"><div class="line"></div></div>
                        <div class="paymentDetails">
                            <div class="billingInfo">
                                <div class="billingInfoTitle">BILLING INFORMATION</div>
                                <div class="textboxContainer">
                                    <div class="formTextbox inline">
                                        <input class="paymentTextbox name" type="text" id="billFirstName" name="billFirstName" placeholder="First Name" ng-disabled="paymentFieldDisabled" ng-model="billFirstName" required>
                                        <img src="../../img/alert.png" class="paymentAlertIcon" popover="Required first name" popover-trigger="mouseenter" ng-show="purchaseForm.billFirstName.$error.required && purchaseForm.billFirstName.$dirty">
                                   </div>
                                    <div class="formTextbox inline">
                                        <input class="paymentTextbox name" type="text" id="billLastName" name="billLastName" placeholder="Surname" ng-disabled="paymentFieldDisabled" ng-model="billLastName" required>
                                        <img src="../../img/alert.png" class="paymentAlertIcon" popover="Required last name" popover-trigger="mouseenter" ng-show="purchaseForm.billLastName.$error.required && purchaseForm.billLastName.$dirty">
                                    </div>
                                    <div class="formTextbox">
                                        <input class="paymentTextbox" type="text" id="billAddress" name="billAddress" placeholder="Street Address" ng-disabled="paymentFieldDisabled" ng-model="billAddress" required  />
                                        <img src="../../img/alert.png" class="paymentAlertIcon" popover="Required address" popover-trigger="mouseenter" ng-show="purchaseForm.billAddress.$error.required && purchaseForm.billAddress.$dirty">
                                    </div>
                                    <div class="formTextbox">
                                        <input class="paymentTextbox" type="text" id="billSuburb" name="billSuburb" placeholder="Suburb" ng-disabled="paymentFieldDisabled" ng-model="billSuburb" required>
                                        <img src="../../img/alert.png" class="paymentAlertIcon" popover="Required suburb" popover-trigger="mouseenter" ng-show="purchaseForm.billSuburb.$error.required && purchaseForm.billSuburb.$dirty">
                                    </div>
                                    <div class="formTextbox inline">
                                        <input class="paymentTextbox state" type="text" id="billState" name="billState" placeholder="State" ng-disabled="paymentFieldDisabled" ng-model="billState" required>
                                        <img src="../../img/alert.png" class="paymentAlertIcon" popover="Required state" popover-trigger="mouseenter" ng-show="purchaseForm.billState.$error.required && purchaseForm.billState.$dirty">
                                    </div>
                                    <div class="formTextbox inline">
                                        <input class="paymentTextbox postcode" type="text" id="billPostcode" name="billPostcode" placeholder="Postcode" ng-disabled="paymentFieldDisabled" ng-model="billPostcode" required>
                                        <img src="../../img/alert.png" class="paymentAlertIcon" popover="Required postcode" popover-trfigger="mouseenter" ng-show="purchaseForm.billPostcode.$error.required && purchaseForm.billPostcode.$dirty">
                                    </div>
                                </div>
                            </div>
                            <div class="paymentInfo">
                                <div class="billingInfoTitle">PAYMENT INFORMATION</div>
                                <div class="textboxContainer">
                                    <div class="formTextbox">
                                        <input class="paymentTextbox" type="text" id="ccName" name="ccName" placeholder="Enter Your Card Name" ng-disabled="paymentFieldDisabled"  ng-model="ccName" required>
                                        <img src="../../img/alert.png" class="paymentAlertIcon" popover="Required card name" popover-trigger="mouseenter" ng-show="purchaseForm.ccName.$error.required && purchaseForm.ccName.$dirty">
                                    </div>
                                    <div class="formTextbox">
                                        <input class="paymentTextbox" type="text" id="ccNo" name="ccNo" placeholder="Enter Your Card Number" ng-disabled="paymentFieldDisabled"  ng-model="ccNo" ng-minlength=13 ng-maxlength=19 only-number max="19" required>
                                        <img src="../../img/alert.png" class="paymentAlertIcon" popover="Invalid card number" popover-trigger="mouseenter" ng-show="(purchaseForm.ccNo.required || purchaseForm.ccNo.$invalid) && purchaseForm.ccNo.$dirty">
                                    </div>
                                    <div class="formTextbox inline">
                                        <input class="paymentTextbox month" type="text" id="ccMonth" name="ccMonth" placeholder="Expiry Month (mm)" ng-disabled="paymentFieldDisabled" ng-model="ccMonth" ng-minlength=2 ng-maxlength=2 only-number max="2" required>
                                        <img src="../../img/alert.png" class="paymentAlertIcon" popover="Invalid month" popover-trigger="mouseenter" ng-show="(purchaseForm.ccMonth.$error.required || purchaseForm.ccMonth.$invalid) && purchaseForm.ccMonth.$dirty">
                                    </div>
                                    <div class="formTextbox inline">
                                        <input class="paymentTextbox year" type="text" id="ccYear" name="ccYear" placeholder="Expiry Year (yy)" ng-disabled="paymentFieldDisabled" ng-model="ccYear" ng-minlength=2 ng-maxlength=2 only-number max="2" required>
                                        <img src="../../img/alert.png" class="paymentAlertIcon" popover="Invalid year" popover-trigger="mouseenter" ng-show="(purchaseForm.ccYear.$error.required || purchaseForm.ccYear.$invalid) && purchaseForm.ccYear.$dirty">
                                    </div>
                                    <div class="formTextbox">
                                        <input class="paymentTextbox cvv" type="text" id="ccCvv" name="ccCvv" placeholder="CVV ?" ng-disabled="paymentFieldDisabled" ng-model="ccCvv"  ng-minlength=3 ng-maxlength=4 only-number max="4" required>
                                        <img src="../../img/alert.png" class="paymentAlertIcon" popover="Invalid cvv" popover-trigger="mouseenter" ng-show="(purchaseForm.ccCvv.$error.required  || purchaseForm.ccCvv.$invalid) && purchaseForm.ccCvv.$dirty">
                                    </div>
                                </div>
                            </div>
                            <div><input type="submit" class="mindinkButton blue" ng-click="purchaseBook()" ng-disabled="!purchaseForm.$valid" value="CONFIRM PURCHASE"></div>
                            <div class="modifyYourCard" ng-show="modifyCard" >Want to <a class="modifyCard" ng-click="modifyPaymentDetails()">modify</a> your card details?</div>
                        </div>
                    </div>
                </form>


					<input id="book-name" type="text" ng-model="bookSearchField" placeholder="Search books" autofocus ng-class="{true : 'preference-text-input-overlay', false : 'preference-text-input-no-overlay'}[showOverlay]" class="preference-text-input">
					<div class="container" ng-class="{true : 'over-overlay', false : 'under-overlay'}[bookZIndex]">
					<div class="itemsList">
	                	<div class="listHeader" ng-class="{true : 'white', false : ''}[showOverlay]">
		            		<div class="listTitle floatLeft">MY BOOKS</div>
		            		<div class="arrowsContainer" ng-hide="isTouch && false">

		            		    <a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-left fa-2x arrow"
                                    ng-mousedown="freeScrollCarousel('myBooksList', 'myBooksList', 'backward')"
                                    ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
                                </a>

                                &nbsp;&nbsp;&nbsp;

                                <a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-right fa-2x arrow"
                                    ng-mousedown="freeScrollCarousel('myBooksList', 'myBooksList', 'forward')"
                                    ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
                                </a>

		            		</div>
		            	</div>
                        <div id="myBooksList" class="carouselList2 book" ng-class="{true : 'scrollable', false : ''}[isTouch || true]" anyaxis-scroll>
                            <ul ng-style="ulStyle" resize widthratio="0.7242">
                                <li ng-repeat="book in userBooks | orderBy:'name'" ng-style="liWidth" on-finish-render="myBooksList" update-on-resize="myBooksList"
                                        ng-mouseenter="bookLayer='itemLayerHover';overlayNameShort='overlayNameShortHover';overlayNameLong='overlayNameLongHover';"
                                        ng-mouseleave="bookLayer='';overlayNameShort='overlayNameShortNormal';overlayNameLong='overlayNameLongNormal';">
                                    <figure class="carousel-image">
                                        <div class="carousel-image-wrapper">
                                            <img class="uniAndBookImg" ng-src="/content/mindink/books/{{book.isbn}}/cover/small" alt="{{book.title}}">
                                        </div>
                                        <figcaption>
                                            <div ng-class="bookLayer" class="nameLayer">
                                                <div ng-class="overlayNameShort" class="overlayName truncate overlayNameShortNormal">{{book.title}}</div>
                                                <div ng-class="overlayNameLong" class="overlayName overlayNameLongNormal">{{book.title}}</div>
                                                <div ng-class="overlayNameLong" class="overlayDesc overlayNameLongNormal">{{book.author}}</div>
                                                <div ng-class="overlayNameLong" class="overlayDesc overlayNameLongNormal">ISBN: {{book.isbn}}</div>
                                                <div class="subjectHoverAction">
                                                    <div ng-show="!book.purchased" class="leftButton">
                                                        <div class="textHolder">
                                                            <div ng-class="addText" style="display: none;" class="subjectHoverActionText">Remove</div>
                                                        </div>
                                                        <div class="buttonHolder">
                                                            <div class="remove" ng-mouseenter="addText='show'" ng-mouseleave="addText='hide'" ng-click="deleteBook(book.id)"></div>
                                                        </div>
                                                    </div>
                                                    <div ng-show="!book.purchased" class="rightButton">

                                                        <div class="textHolder">
                                                            <div ng-class="purchaseText" style="display: none;" class="subjectHoverActionText">Buy</div>
                                                        </div>
                                                        <div class="buttonHolder">
                                                            <div class="purchase" ng-mouseenter="purchaseText='show'" ng-mouseleave="purchaseText='hide'" ng-click="slideBookDetails(book);"></div>
                                                        </div>
                                                    </div>
                                                    <div ng-show="book.purchased">
                                                        <div class="textHolder">
                                                            <div ng-class="playText" style="display: none;" class="subjectHoverActionText">Play</div>
                                                        </div>
                                                        <div class="buttonHolder">
                                                            <div class="play" ng-mouseenter="playText='show'" ng-mouseleave="playText='hide'" ng-click="viewBook('/reader/book/' + book.isbn)"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </li>
                            </ul>
                        </div>
					</div>

                    <div class="itemsList">
                       <div class="listHeader" ng-class="{true : 'white', false : ''}[showOverlay]">
		            		<div class="listTitle floatLeft">BOOKS SEARCH RESULTS</div>
		            		<div class="arrowsContainer" ng-hide="isTouch && false">

		                		<a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-left fa-2x arrow"
                                    ng-mousedown="freeScrollCarousel('searchBooksList', 'searchBooksList', 'backward')"
                                    ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
                                </a>

                                &nbsp;&nbsp;&nbsp;

                                <a ng-class="{true : 'white', false : ''}[showOverlay]" class="fa fa-angle-right fa-2x arrow"
                                    ng-mousedown="freeScrollCarousel('searchBooksList', 'searchBooksList', 'forward')"
                                    ng-mouseup="freeScrollStop()" ng-mouseleave="freeScrollStop()">
                                </a>

		            		</div>
		            	</div>
						
		
						<div class="tour4">
							<span tourtip="This is where things get really easy."
								tourtip-next-image1="img/books.png"
								tourtip-next-image2="img/dollar.png"
								tourtip-next-heading="My Books : "
								tourtip-next-line="We automatically update your account with the textbooks you need for your Subjects."
								tourtip-next-heading1="Preview and Purchase : "
								tourtip-next-line1=" By hovering the textbook and clicking on the '$' icon, you can see the details of the textbook, preview or purchase it with one click ."
								tourtip-step="3"
								tourtip-next-label="Close"
								tourtip-placement="right"
								tourtip-offset="680">
							</span>
						</div>
                        <div id="searchBooksList" class="carouselList2 book" ng-class="{true : 'scrollable', false : ''}[isTouch || true]" anyaxis-scroll>
                            <ul ng-style="searchBookstyle" resize widthratio="0.7242">
                                <li ng-repeat="book in searchBooks" ng-style="liWidth" on-finish-render="searchBooksList" update-on-resize="searchBooksList"
                                        ng-mouseenter="bookLayer='itemLayerHover';overlayNameShort='overlayNameShortHover';overlayNameLong='overlayNameLongHover';"
                                        ng-mouseleave="bookLayer='';overlayNameShort='overlayNameShortNormal';overlayNameLong='overlayNameLongNormal';">
                                    <figure class="carousel-image">
                                        <div class="carousel-image-wrapper">
                                            <img class="uniAndBookImg" ng-src="/content/mindink/books/{{book.isbn}}/cover/small" alt="{{book.title}}">
                                        </div>
                                        <figcaption>
                                            <div ng-class="bookLayer" class="nameLayer">
                                                <div ng-class="overlayNameShort" class="overlayName truncate overlayNameShortNormal">{{book.title}}</div>
                                                <div ng-class="overlayNameLong" class="overlayName overlayNameLongNormal">{{book.title}}</div>
                                                <div ng-class="overlayNameLong" class="overlayDesc overlayNameLongNormal">{{book.author}}</div>
                                                <div ng-class="overlayNameLong" class="overlayDesc overlayNameLongNormal">ISBN: {{book.isbn}}</div>
                                                <div class="subjectHoverAction">
                                                    <div class="leftButton">
                                                        <div class="textHolder">
                                                            <div ng-class="addText" style="display: none;" class="subjectHoverActionText">Add</div>
                                                        </div>
                                                        <div class="buttonHolder">
                                                            <div class="add" ng-mouseenter="addText='show'" ng-mouseleave="addText='hide'" ng-click="addBook(book.id)"></div>
                                                        </div>
                                                    </div>
                                                    <div class="rightButton">
                                                        <div class="textHolder">
                                                            <div ng-class="purchaseText" style="display: none;" class="subjectHoverActionText">Buy</div>
                                                        </div>
                                                            <div class="buttonHolder">
                                                            <div class="purchase" ng-mouseenter="purchaseText='show'" ng-mouseleave="purchaseText='hide'" ng-click="slideBookDetails(book);" ></div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </li>
                            </ul>
                        </div>

                    </div>
				</div>
            </div>
        </div>
		</div>
	</div>	
</div>
	</tour>
<a ng-click="openTour()" href="" class="button">Open Tour</a>
</div>
</div>

